인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
Programming

/

Front-end

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

2,999 students

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

This course is prepared for Intermediate Learners.

What you will learn!

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

Screenshot 2023-11-20 135704

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 📚

Screenshot 2023-11-20 134555

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!

Screenshot 2023-11-20 134502

Developing with cute cats 😺 dummy data!

Screenshot 2023-11-20 133935

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.

Screenshot 2023-11-20 135121

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

Students

60,866

Reviews

1,414

Rating

4.8

Courses

21

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

 

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
– ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

Curriculum

All

81 lectures ∙ (14hr 28min)

Lecture resources

are provided.

Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!