inflearn logo
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.5) 수강평 126개

강의소개.상단개요.수강생.short

난이도 중급이상

수강기한 무제한

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

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.5

5.0

부끄

60% 수강 후 작성

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

5.0

Grit Grit

68% 수강 후 작성

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% 수강 후 작성

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!

강의상세_배울수있는것_타이틀

  • 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.

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • 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

선수 지식, 필요할까요?

  • HTML, CSS knowledge

  • JavaScript knowledge up to ES2022

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

  • TypeScript (I will tell you in the lecture)

강의소개.지공자소개

67,371

수강생

1,726

수강평

9,762

답변

4.8

강의 평점

25

강의_other

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)

더보기

커리큘럼

전체

81개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

해당 강의에서 제공: [object Object]
강의 게시일: 
마지막 업데이트일: 

수강평

전체

126개

4.5

126개의 수강평

  • dongry님의 프로필 이미지
    dongry

    수강평 3

    평균 평점 5.0

    5

    60% 수강 후 작성

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

    • minsukweb0331님의 프로필 이미지
      minsukweb0331

      수강평 1

      평균 평점 5.0

      5

      68% 수강 후 작성

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

      • nack1400님의 프로필 이미지
        nack1400

        수강평 10

        평균 평점 5.0

        5

        31% 수강 후 작성

        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
          지식공유자

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

      • roider23164240님의 프로필 이미지
        roider23164240

        수강평 8

        평균 평점 5.0

        5

        100% 수강 후 작성

        Thank you~!

        • ehdgus37262456님의 프로필 이미지
          ehdgus37262456

          수강평 2

          평균 평점 5.0

          5

          53% 수강 후 작성

          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!

          zerocho님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!

          강의상세.할인문구

          $38.50

          28%

          $53.90