Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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) 109 reviews

3,303 learners

  • zerocho
실습 중심
next.js
react
트위터
클론코딩
ssr
Next.js
React
react-query
next-auth
msw

Reviews from Early 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 !

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

65,292

Learners

1,590

Reviews

9,690

Answers

4.8

Rating

22

Courses

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

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
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

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

  • 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

  • CTO at SmoreTalk

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

Curriculum

All

81 lectures ∙ (14hr 28min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

109 reviews

4.5

109 reviews

  • 프론트취준님의 프로필 이미지
    프론트취준

    Reviews 14

    Average Rating 5.0

    5

    34% enrolled

    아직 초반부를 수강 중인데 만족합니다. 다만, 강의 중에 "요거, 요게, 이, 이거, 이게" 라고 말씀하시는 부분이 많아서 헷갈리는 거 빼고는 좋습니다. ("요게 없어서 여기에" 같은 말씀하실 때는 마우스 커서를 뚫어져라 봐야됩니다) 모달이면 모달, 버튼이면 버튼이라고 정확하게 지칭해서 말씀해 주시면 좋을 거 같습니다. 라이브여서 그런지 "이거 있죠 이거", "이렇게 뜨는거" 표현들이 너무 많아요.. 개인적으로 따라치면서 수강하기보다 시청만 하고 흐름을 이해하려는 쪽으로 방향을 바꾸었더니 괜찮습니다.

    • 제로초(조현영)
      Instructor

      먼저 따라치시는 동안에 불편을 겪으셨을 것 같아서 죄송합니다. 하지만 이 강의는 맹목적으로 따라치는 목적으로 만들어진 강좌가 아닙니다(클론코딩의 장단점 영상에서 말씀드렸습니다). 그랬다면 제가 일일이 코드를 다 보여드리느라 강의 시간이 30시간이 넘어갔을 겁니다. 이 강의를 듣는 요령은, 직접 먼저 클론코딩을 해보고, 이 강좌의 코드는 정답지처럼 활용하시는 걸 추천드립니다. 또는 강의를 먼저 눈으로만 쭉 보시고 배운 내용을 바탕으로 직접 따라 만들어보시거나요. 코드를 따라치지 않고도 x.com같은 사이트를 스스로 만들 수 있게 하는 게 강의의 목적입니다.

    • 감사합니다. 좋은 공부 방법을 배웠습니다.

  • 누구야님의 프로필 이미지
    누구야

    Reviews 1

    Average Rating 3.0

    3

    69% enrolled

    새로운 기술을 도입하여 클론 코딩을 진행하는 콘텐츠는 좋다고 봅니다. 하지만 시간이 조금 흘러서인지 패키지 버전이 안 맞거나 사용법이 변화된 것들로 인하여 에러가 많이 발생하여 강의 시청 시간 보다 공식문서를 찾아서 직접 수정하는 시간이 압도적으로 늘어나는 상황이 발생되었습니다.(강의1, 공식문서 9 = 강의를 보는 건지 공홈에 들어가라고 알람을 듣는 건지 헷갈립니다) 강의라기 보다는 X 클론 코딩 시연을 보는 것만 같습니다. 해당 패키지는 어떻게 사용되는지 어떤 장점이 있는지, nextjs 프레임워크의 라이프사이클이, 장점, 단점, 추천 파일 구조 설계를 주로 설명해주셨으면 더 좋았을거 같다라는 아쉬움이 있으며, 코딩 짜는 것을 주로 보여주면서 오히려 설명이 빈약하다는 느낌을 많이 받아서 현타가 가끔씩 왔습니다. 클론 코딩으로 올바른 방법론과 구조 설계, 최적화 등을 더 집중해서 보여주셨으면 좋았겠지만 그렇지 않고 오히려 공식문서를 보고 알아서 더 공부하라고 하니 진짜 많이 공식문서를 보게 되면서 강의에 안나오는 지식도 얻게 되고 좋은거 같기도 한데 이 것을 목적으로 강의를 퍼블리싱 하신거면 성공하신거라고 보입니다만 좀 더 이해를 쉽게 받기 위해서 강의를 수강한 목적이 사라진듯하여 아쉬움이 많이 남는 강의 입니다. 다음 강의에서는 준비된 코드와 통일된 네이밍 컨벤션, 실무에서 사용하는 다양한 파일 구조로 적재적소의 예제 위주의 강의가 마련되었으면 좋겠습니다. 그럼 저는 깃허브에 있는 소스코드를 활용하여 강의에 안나오는 에러를 해결하기 위하여 공식문서에서 다시 차근차근 공부하여 해결하기 위하여 가보겠습니다. 언제나 좋은 강의를 만들기 위하여 노력하시는 제로초님께 미약하나마 도움이 되는 피드백이었길 바랍니다.

    • 좋은 피드백 감사합니다. 다음부터는 실무 중심의 구조 설계와 패키지의 장단점 위주로 진행해보도록 하겠습니다!

  • 부끄님의 프로필 이미지
    부끄

    Reviews 3

    Average Rating 5.0

    5

    60% enrolled

    const 명언 = 한번 당했던 에러한테는 안 당하지~

    • Grit Grit님의 프로필 이미지
      Grit Grit

      Reviews 1

      Average Rating 5.0

      5

      68% enrolled

      믿고 보는 제로초님 강의네요! Next를 공부하려고 공식문서도 보고했지만 잘 안읽혀서 전 강의를 쭉 본다음에 공식문서 보는게 더 이해가 빠른거같아요. 보통 전 강의를 쭉 본다음에 핵심적인 기능들을 공부한 뒤 공식문서에서 어떤 기능들이 있다 키워드정도만 기억합니다 작업을 하다 어떤 기능이 필요하면 공식문서에서 찾아서 적용하는편입니다 편당 강의시간도 길지않고 잘 나눠놓으셔서 지하철이나 짬 날때 보기도 좋고 이해안되는 부분에서는 돌려보는것도 너무 편하더라구요 React-query도 찍먹개념으로 쓰던기능만 쓰고있었는데 이번에 설명들으면서 더 잘쓰게 된거같아요!! Zustand도 이번기회에 처음써보고 msw나 다양한 라이브러리도 덤으로 알아갑니당 현업에서 알아두면 좋은 배포나 웹소켓 등 부록내용들도 꾸준히 좋은 퀄리티로 올려주셔서 너무 감사드리고 앞으로도 화이팅하면서 활동해주세요! ㅎㅎ

      • 미니버드님의 프로필 이미지
        미니버드

        Reviews 2

        Average Rating 5.0

        5

        53% enrolled

        이 강의 덕분에 Next.js가 제가 가장 좋아하는 최고의 기술이 되었습니다!!! 지금까지 다양한 플랫폼에서 강의를 들어왔고, 이번에 처음으로 인프런에서 강의를 수강했는데 이 Next 강의를 수강한 뒤, 너무 만족스러워서 이후 다른 인프런 강의도 수강하게 되었습니다! 이 강의는 단순히 클론코딩을 하는 것이 아니라 친절하게 잘 알려주시니 저의 실력도 많이 상승하는 것 같습니다! 저에게 최고의 Next 기술을 알려주셔서 감사하고, 앞으로 웹 개발에 있어서 많은 도움 받도록 하겠습니다!

        $53.90

        zerocho's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!