인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
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) 100 reviews

3,237 students

Next.js
React
react-query
next-auth
msw

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 !

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

63,633

Students

1,512

Reviews

9,586

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

100 reviews

4.5

100 reviews

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Reviews 14

    Average Rating 5.0

    5

    34% enrolled

    まだ初半を受講しているのに満足しています。 ただし、講義中 "ヨガ、ヨゲ、イ、コレ、コレ"と言われる部分が多いので、混乱することを除いては良いです。 ("要ないのでここに"同じことを言われるときはマウスカーソルを開けて見なければなりません) モーダルであればモーダル、ボタンであればボタンと正確に指して教えていただければと思います。これはライブだから"これがあります"、"表現が多すぎます。 個人的に従いながら受講するより視聴だけして流れを理解しようとする方へ方向を変えたら大丈夫です。

    • zerocho
      Instructor

      まず、フォローしている間にご迷惑をおかけしたことがありましたので申し訳ありません。しかし、この講義は盲目的に従う目的で作られた講座ではありません(クローンコーディングの長所と短所の映像で申し上げました)。もしそうなら、私は毎日このコードをすべて見せてくれるので、講義時間が30時間を超えたのでしょう。 この講義を聞くコツは、直接先にクローンコーディングをしてみて、この講座のコードは正解のように活用されることをお勧めします。あるいは、講義を先に目でしか見ず、学んだ内容を元に直接ついてみてみましょう。コードに従わずにx.comのようなサイトを自分で作成できるようにするのが講義の目的です。

    • ありがとうございます。 良い勉強方法を学びました。

  • noo9ya5923님의 프로필 이미지
    noo9ya5923

    Reviews 1

    Average Rating 3.0

    3

    69% enrolled

    新技術を導入してクローンコーディングを進めるコンテンツは良いと思います。 しかし、時間が少し流れているのか、パッケージのバージョンが合わないか、使用法が変化したことによってエラーが多く発生し、講義視聴時間より公式文書を見つけて直接修正する時間が圧倒的に増える状況が発生しました(講義1、公式文書9 =講義を見るのか公共のホームに入るとアラームを聞くのか混乱します) 講義というよりは、Xクローンコーディングのデモンストレーションを見るだけです。 そのパッケージはどのように使用されるのか、どんなメリットがあるのか​​、nextjsフレームワークのライフサイクルが、メリット、デメリット、推奨ファイル構造設計を主に説明していただければもっと良かったと思います。 コーディング織りを主に見せながら、むしろ説明が貧弱だという感じをたくさん受けて、ヒョンタがたまに来ました。 クローンコーディングで正しい方法論と構造設計、最適化などをもっと集中して見せてほしいと思いましたが、そうではなく、むしろ公式文書を見て知ってもっと勉強するように言うので、本当にたくさんの公式文書を見るようになり、講義に出てくる知識も得られるようになり、良いと思いますが、ことを目的に講義をパブリッシングしたら成功したと思われますが、もっと理解を容易にするために講義を受講した目的がなくなったように、物足りなさがたくさん残る講義です。 次のレッスンでは、準備されたコードと統一されたネーミングコンベンション、実務で使用するさまざまなファイル構造で、積載適所の例を中心としたレッスンが用意されてほしいと思います。 それでは、私はFitHubのソースコードを活用して講義に出てくるエラーを解決するために公式文書で改めて勉強して解決することにします。 いつも良い講義を作るために努力しているゼロ初心者に微弱なのに役立つフィードバックだったことを願っています。

    • zerocho
      Instructor

      良いフィードバックありがとうございます。次からは実務中心の構造設計とパッケージの長所と短所を中心に進めてみましょう!

  • dongry님의 프로필 이미지
    dongry

    Reviews 3

    Average Rating 5.0

    5

    60% enrolled

    const名言=一度当たったエラーにはならない〜

    • minsukweb0331님의 프로필 이미지
      minsukweb0331

      Reviews 1

      Average Rating 5.0

      5

      68% enrolled

      信じてみるゼロチョン講義ですね! Nextを勉強しようと公式文書も報告しましたが、よく読まないので、前の講義をずっと見た後、公式文書を見る方が理解が早いと思います。通常、前の講義をずっと見た後に核心的な機能を勉強した後、公式文書にある機能がある。 片方の講義時間も長くなく、よく分かち合っていたので、地下鉄や組んだときに見やすく、わかりにくい部分では振り返るのもとても楽でした。 React-queryも披露概念で使っていた機能だけを使っていましたが、今回の説明を聞きながらもっとよく書くようになったと思います! Zustandも今回に初めて見て、mswや様々なライブラリもおまけに気付いています。 現業で知っておけば良い配布やウェブソケットなど付録内容も着実に良いクオリティで上げていただきありがとうございますし、今後もファイティングしながら活動してください! ㅎㅎ

      • ehdgus37262456님의 프로필 이미지
        ehdgus37262456

        Reviews 2

        Average Rating 5.0

        5

        53% enrolled

        この講義のおかげで、Next.jsが私のお気に入りの最高の技術になりました! これまで様々なプラットフォームで講義を受けており、今回初めてインフラで講義を受講したのですが、このNext講義を受講した後、とても満足して以来他のインフラ講義も受講することになりました! この講義は単にクローンコーディングをするのではなく、親切によく教えてくれるので、私の実力もたくさん上昇するようです!私に最高のNext技術を教えてくれてありがとう、今後のWeb開発に多くのお手伝いをさせていただきます!

        zerocho's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!