inflearn logo

Next + Create a SNS service with React Query

We will create an SNS service similar to Twitter (X.com) using the React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand stack. Finally, we will add SSR for search engine optimization!

(4.4) 128 reviews

3,397 learners

Level Intermediate

Course period Unlimited

Next.js
Next.js
React
React
react-query
react-query
next-auth
next-auth
msw
msw
Next.js
Next.js
React
React
react-query
react-query
next-auth
next-auth
msw
msw

Reviews from Early Learners

4.4

5.0

부끄

60% enrolled

const quote = I won't make the same mistake again~

5.0

Grit Grit

68% enrolled

This is a lecture by Zerocho that I trust and watch! I tried to study Next and looked at the official documentation, but I couldn't read it well, so I think it's faster to watch all the lectures and then look at the official documentation. Usually, I watch all the lectures and then study the core functions, and then I remember only the keywords of the functions in the official documentation. If I need a function while working, I look it up in the official documentation and apply it. The lecture time is not long and it's well-divided, so it's good to watch it on the subway or when I have free time, and it's also very convenient to look it up again when I don't understand something. I used to use React-query only as a function that I used to use, but I think I've been using it better after listening to the explanation this time!! I also used Zustand for the first time this time and learned about MSW and various libraries as a bonus. I'm so grateful that you've consistently uploaded good quality supplementary contents such as distribution and web socket that are good to know in the field. Please keep up the good work and continue to be active! ㅎㅎ

5.0

미니버드

53% enrolled

Thanks to this lecture, Next.js has become my favorite and best technology!!! I have taken lectures on various platforms so far, and this is the first time I took a lecture on Inflearn. After taking this Next lecture, I was so satisfied that I took other Inflearn lectures! This lecture is not just about clone coding, but it kindly teaches you well, so I think my skills have improved a lot! Thank you for teaching me the best Next technology, and I will receive a lot of help in web development in the future!

What you will gain after the course

  • React Development

  • React + TypeScript

  • React Query

  • Next.js App Router

  • SSR & SEO

  • MSW

  • Next Auth

  • Real-time Websocket Chat

  • zustand

  • AWS Deployment

Other than Elon Musk's x.com
Let's create a zero-second z.com !

The latest version of the Next course, which has been attended by a total of 4,400 people!

Next 14 lessons have been updated to Next 15!

  • Twitter changed their name to X.com, so I changed from Nodebird to Jet.com.

  • You don't have to know Next. I'll teach you everything in this lecture. You should know React.

  • It uses Next.js App Router by default (previous Nodebird tutorial was Next Page Router)

  • Since I've already updated the version, I've also updated all the library versions to React Query 5, Next Auth 5, and MSW 2.

  • Next 14 features like Server Actions are a given.

  • Implement infinite scrolling, data caching, optimistic updates, rollbacks, and more with React Query.

  • Implement real-time chat with websocket + react-query.

  • Replacing Context API with Zustand.

  • The lecture flows through the same process as the actual work (when the planner finishes planning -> when the backend developer has not yet created the API -> when the backend developer completes the API).

You can create results like this 🙋‍♀

How do I change the address while opening a modal?

Let's use the latest router features such as parallel routes and intercepting routes.

Let's follow along with high quality!

Almost the same main features and routes as x.com !

Pay attention to the scroll height!!

Learn how to use infinite scrolling to fetch data infinitely.

Look at the heart reaction speed!!!

Optimistic update that allows for instantaneous responses when sending data to the server!

  • You will be able to organize your folder structure by looking at the plan.

  • You can develop APIs without a backend developer.

  • You can efficiently manage data based on API.

  • You can prepare to deploy the front server yourself.

  • This will enable you to implement real-time chat.

What you'll learn 📚

Are you curious about the role of those folders?

Actively utilize Next App Router

Next App Router has many new and interesting folders added: ()folder, @folder, (.)folder, (..)folder, (...)folder, []folder, _folder...

Routing can be made easy just by organizing the folder structure well. Let's learn together.

Creating a fake API server with MSW

Backend developer hasn't created API yet? So the schedule keeps getting pushed back? But you can't just suck your thumb! Let's create a fake API server with MSW and develop the front end first. With cute cats!

Developing with cute cats 😺 dummy data!

We've prepared everything, including the API and documentation!

Implementing a service with a prepared backend

After working hard on MSW, I heard that the backend developer has completed the API! Now, let's develop the front end using the actual API.

I have prepared the backend. Just call it from the front and use it! Let's get the data from the backend with React Query and try caching, infinite scrolling, and optimistic updates.

Preparing for deployment via SSR

I have already distributed it on z.nodebird.com . You can also use SSR to improve SEO and make your front page appear well when shared on SNS.

It is also easily shared on KakaoTalk.

Live chat with Elon Musk!!

Bonus: Live chat

Learn about websockets and reverse infinite scrolling while implementing real-time chat~

Once you learn websocket technology, you can use it in various places, not just chatting (real-time refresh, notifications, etc.)

Things to note before taking the class 📢

Practice environment

  • Operating System and Version (OS): Windows 11

  • Tools used: Node.js 22, Next 15


Player Knowledge and Notes

  • Basic knowledge of HTML/CSS/JS/React is required.

  • The TypeScript required for the lecture will be explained in the lecture.


  • Your questions will be answered within 24 hours .

  • It is okay to organize the lecture content on your blog, but you must cite the source.

Recommended for
these people

Who is this course right for?

  • Anyone who wants to complete a web service using the React framework

  • Front-end developers && aspiring developers && job seekers

  • Those who want to actively use Next App Router

  • Anyone who wants to manage server data with React Query

  • For those who want to take care of everything from SSR to SEO

Need to know before starting?

  • HTML, CSS knowledge

  • JavaScript knowledge up to ES2022

  • React Basics (Watch Zerocho's Free React Course)

  • TypeScript (I will tell you in the lecture)

Hello
This is zerocho

67,824

Learners

1,755

Reviews

9,765

Answers

4.8

Rating

25

Courses

One of the key strengths of my courses is the Q&A support (Winner of the Inflearn Q&A King award twice). I respond to your questions within 24 hours, doing my best to help you out! I’ll answer your questions with the mindset that we are tackling the problems together!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
ZeroCho's full lecture roadmap. A complete roadmap of all my courses is available here.

– Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
ZeroCho.com Operator
– Currently) Broadcasting development-related content on ZeroCho TV via YouTube
– Formerly) Smoretalk CTO
– Formerly) CTO of Today's Pickup (Youngest Development Team Lead at Kakao Mobility after exit to Kakao Mobility)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • Former CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

More

Curriculum

All

81 lectures ∙ (14hr 28min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

128 reviews

4.4

128 reviews

  • dongry님의 프로필 이미지
    dongry

    Reviews 3

    Average Rating 5.0

    5

    60% enrolled

    const quote = I won't make the same mistake again~

    • zimablue14님의 프로필 이미지
      zimablue14

      Reviews 14

      Average Rating 4.4

      3

      54% enrolled

      There is definitely a lot of helpful content, but it feels difficult to learn. It's a shame that it seems to focus more on the convenience of the teacher than the student.

      • bras17171184님의 프로필 이미지
        bras17171184

        Reviews 3

        Average Rating 3.7

        1

        88% enrolled

        The video editing is so messy that I'm losing my mind. So I've attached the code you uploaded, but it's often out of sync, so it takes a lot of time to find it. There were some good parts to the lecture, but because of these parts, the flow of studying is often interrupted.

        • zerocho
          Instructor

          First of all, I apologize for the inconvenience. I am currently editing the lecture notes and videos, so if you could let me know which part is messed up or which code is out of sync, I would appreciate it.

      • noo9ya5923님의 프로필 이미지
        noo9ya5923

        Reviews 1

        Average Rating 3.0

        3

        69% enrolled

        I think the content that introduces new technologies and proceeds with clone coding is good. However, as time has passed, there have been many errors due to incorrect package versions or changes in usage, so the time spent directly modifying the official documentation has increased significantly more than the time spent watching the lecture. (Lecture 1, Official Document 9 = I'm confused whether I'm watching the lecture or hearing an alarm telling me to go to the official website) It feels more like watching a demonstration of X clone coding than a lecture. I wish they had mainly explained how the package is used, what its advantages are, the life cycle of the nextjs framework, advantages, disadvantages, and recommended file structure design. I felt that the explanation was lacking because they mainly showed coding, so I was sometimes shocked. It would have been nice if you had focused more on the correct methodology, structural design, optimization, etc. through clone coding, but instead, you were told to study more by looking at the official documentation, so you ended up looking at the official documentation a lot and gaining knowledge that wasn't covered in the lecture, which seems good. If you published the lecture for this purpose, it seems like you succeeded, but it's a lecture that leaves a lot of regret because it seems like the purpose of taking the lecture to make it easier to understand has disappeared. In the next lecture, I hope you will provide a lecture centered on examples that are appropriate for the situation, with prepared code, unified naming conventions, and various file structures used in practice. Then, I will use the source code on GitHub to solve errors that aren't covered in the lecture and study them step by step in the official documentation to solve them. I hope this feedback was helpful, even if it was a little, to Zerocho, who always strives to create good lectures.

        • zerocho
          Instructor

          Thank you for the great feedback. From now on, I will focus on practical structural design and the pros and cons of the package!

      • hoho952791님의 프로필 이미지
        hoho952791

        Reviews 6

        Average Rating 4.3

        1

        88% enrolled

        I usually liked Zerocho's lectures, but I thought Next was a bit too low. The reasons are as follows: 1. The lecture order is messy - The lectures are disorganized and jumbled. Normally, Zerocho's lectures were not organized systematically, but this time it's a bit worse. He goes back and forth from here to there. 2. Just copy and paste the code I want to follow along, but I just copy and paste. But even if I copy and paste, the code and the lecture I'm watching won't be in sync. I wish you could upload the codes for each of Lectures 1, 2, and 3.

        • zerocho
          Instructor

          First of all, I apologize for the inconvenience. I am in the process of revising the lecture notes and videos, so if you could let me know which parts are messed up and which codes are out of sync, I would appreciate it. I will re-upload the part that I left in a reply to another course review for the part that you follow along with. "This lecture is not designed for blindly following along (as I explained in the video on the pros and cons of clone coding). If it were, the lecture time would have been over 30 hours because I would have shown you all the codes one by one. The trick to taking this lecture is to try clone coding yourself first and use the code in this lecture as an answer sheet. Or, you can just watch the lecture first and then try to create it yourself based on what you learned. The purpose of this lecture is to enable you to create a site like x.com without following the code."

        • zerocho
          Instructor

          The codes for lectures 1, 2, and 3 are all uploaded (a total of 8 codes, including the middle code for each lecture, are uploaded to GitHub), but I'm not sure what you mean.

        • Hello. I checked what's uploaded to GitHub. It's uploaded in large chunks by session. If not, it would be better if it's uploaded in small units, such as 1st lecture, code for 1st lecture and 2nd lecture, code for 2nd lecture. When I say the lecture order is messed up, I mean, I do A, then B, then A is wrong, so I have to edit the code for A again. This happens too often. The problem with this is that I have to take all the lectures. Even if I take the lectures, I want to choose the parts I want to see, I think it would be good if I could see it smoothly. And it would be good if there were visual materials as well. It's not just cut editing, but explaining it with words. It would be good if you explained it with visual materials. Personally, I've looked through the official documents once in a while, and the official documents are much easier to read and well organized.. I feel like the lectures are not organized at all. I'm studying next at my company, and only Zerocho has the next14 version, so I watched it. If I hadn't watched it at my company, I think I would have only watched up to the middle part of session 2 and not watched it....

        • zerocho
          Instructor

          I have re-uploaded the lecture codes, one lecture at a time. You can find the GitHub links for each code in the lecture notes. You mentioned that you were working on 'a' and then had to modify 'a' again because 'b' went wrong. Basically, the content of each lecture video should be executable once the video is finished. However, when adding a new feature 'b', you might have to modify the existing code 'a'. This isn't because the lecture content is disorganized, but rather an inevitable aspect of programming lectures. Visual materials are collected and organized in the lecture materials (GitHub README.md). Lecture notes compiled by students will also be uploaded soon. Also, I mentioned at the beginning of the lectures, in sections 1 and 2, not to type along with the code but to copy and paste it. Of course, it's up to you whether you want to type along or watch the lectures in your own style. I won't be producing lectures where you simply type along anymore. I believe that just typing out the code from the lecture, one letter at a time, without trying to create it yourself first, is the same as copying and pasting, which is meaningless (this is just my personal opinion). It seems like my lecture style doesn't match this approach, which is something I can't help.

      zerocho's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!

      $53.90