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) 127 reviews

3,396 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

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,694

Learners

1,743

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

127 reviews

4.4

127 reviews

  • minsukweb0331님의 프로필 이미지
    minsukweb0331

    Reviews 1

    Average Rating 5.0

    5

    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! ㅎㅎ

    • ehdgus37262456님의 프로필 이미지
      ehdgus37262456

      Reviews 2

      Average Rating 5.0

      5

      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!

      • dongry님의 프로필 이미지
        dongry

        Reviews 3

        Average Rating 5.0

        5

        60% enrolled

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

        • nack1400님의 프로필 이미지
          nack1400

          Reviews 10

          Average Rating 5.0

          5

          31% enrolled

          As a first-year developer, I wanted to study nextjs according to the trend. However, after version 13 came out, I was studying on my own through the official documentation because the existing 12 version lectures were not enough, but I had difficulty studying because I lacked experience and skills. In addition, I wanted to use libraries that fit the trend, so I applied them here and there, and I had doubts about whether I was properly utilizing the advantages of the libraries without knowing much. At that time, I was eagerly waiting for the news that Zerocho's nextjs 14 version lecture and lectures that used most of the libraries I wanted to use properly were coming out. I'm about halfway through listening to it now, and most of the questions I had about each section have been resolved. Thank you so much. ㅎㅎ

          • zerocho
            Instructor

            Thank you. Feel free to ask me any questions you may have~

        • lss92094856님의 프로필 이미지
          lss92094856

          Reviews 38

          Average Rating 5.0

          Edited

          4

          100% enrolled

          The lecture is quite difficult and the pace is fast, so you have to look things up yourself while listening. It's far from a "kind" lecture. However, it was very helpful for practical work. +) Additional. No matter how I think about it, it's a lecture I can't give 5 points to, because the essence of a lecture is "explaining so you can understand", but that part is too much delegated for you to figure out yourself.

          zerocho's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!

          $53.90