강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Next + React Query で SNS サービスを作成する

React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택을 사용하여 Twitter(X.com)와 유사한 SNS 서비스를 만들어보겠습니다. 마지막으로 검색 엔진 최적화를 위한 SSR까지!

難易度 中級以上

受講期間 無制限

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

学習した受講者のレビュー

学習した受講者のレビュー

4.5

5.0

부끄

60% 受講後に作成

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

5.0

Grit Grit

68% 受講後に作成

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

5.0

미니버드

53% 受講後に作成

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

受講後に得られること

  • React 開発

  • React + TypeScript

  • React Query

  • Next.js アプリ ルーター

  • SSR & SEO

  • MSW

  • Next Auth

  • リアルタイム Web ソケット チャット

  • 状態

  • AWS 配布

イロンマスクのx.com以外
ゼロ秒のz.comを作ろう!

累積4400人が聴いたの講座の最新バージョン!

Next 14コースはNext 15に更新されました!

  • Twitterが名前をX.comに変更し、私もノードバードからJet.comに変更しました。

  • ネクストモールシャーにもなります。この講義でお知らせします。リアクトは知っておく必要があります。

  • Next.js App Routerをデフォルトとして使用します。 (以前のノードバード講座はNext Page Routerでした)

  • この王様バージョンを上げたキムにReact Query 5、Next Auth 5、MSW 2でライブラリバージョンも全て最新化しました。

  • Server ActionのようなNext 14の機能は当然です。

  • React Queryでインフィニットスクロール、データキャッシュ、オプティミスティックアップデート、ロールバックなどを実装します。

  • Webソケット+ react-queryでリアルタイムチャットを実装します。

  • ZustandでContext APIを置き換えます。

  • 実務と同じプロセスで講義が流れます(企画者が企画を終えたとき - >バックエンド開発者がまだAPIを作成していないとき - >バックエンド開発者がAPIを完成したとき)

このような結果を作ることができます🙋‍♀

モーダル浮きながらアドレスを変えるのはどうしますか?

パララックルート、インターセプトルートなど最新のルータ機能を試してみましょう。

クオリティ高く追いましょう!

x.comの主な機能とルートをほぼそのままに!

スクロールの高さに注目!

データを無限にインポートするインフィニットスクロール方法を学びます。

ハートの反応速度を見てください!

サーバーにデータを転送しながら即時応答を実装するためのオプティミスティックアップデート!

  • 企画書を見てフォルダ構造をとることができるようになります。

  • バックエンド開発者がいなくてもAPI開発を進めることができます。

  • APIベースでデータを効率的に管理できるようになります。

  • 自分でフロントサーバーを展開する準備ができます。

  • リアルタイムチャットを実装できるようになります。

学習内容📚

そんなフォルダの役割が気になりますか?

Next App Routerを活用する

Next App Routerにはさまざまな不思議なフォルダがたくさん追加されました()フォルダ@フォルダ、(。)フォルダ、(..)フォルダ、(...)フォルダ、[]フォルダ、_フォルダ...

フォルダ構造だけを整理しても、ルーティングを簡単に行うことができます。一緒に学びましょう。

MSWで偽のAPIサーバーを作成する

バックエンド開発者はまだAPIを作成していませんか?それでどんどんスケジュールが後ろに押されると?それでも指だけを吸ってはいけません! MSWで偽のAPIサーバを作ってフロント先に開発しましょう。かわいい猫たちと一緒に!

かわいい猫😺ダミーデータと一緒に開発!

APIはもちろんドキュメントまで全て用意しておきました!

準備されたバックエンドでサービスを実装する

MSWで一生懸命開発し、バックエンド開発者がAPIを完成したというニュースが聞こえますね!それでは、実際のAPIを使ってフロントを開発しましょう。

バックエンドは私がすべて準備しました。ただフロントから呼び出して使ってください!バックエンドのデータはReact Queryにインポートしてキャッシュもしてみて、インフィニットスクロール、オプティミスティックアップデートもしましょう。

SSR経由で展開を準備する

z.nodebird.comに私が事前に配布しておきました。皆さんもSSRを通じてSEOを取り揃えて、フロントページをSNS共有してもよく出るようにしてみてください。

Katokにもよく共有されています

イロンマスクとリアルタイムチャット!

ボーナス:リアルタイムチャットまで

リアルタイムチャットを実装しながら、Webソケットとリバースインフィニットスクロールを学びましょう〜

ウェブソケット技術は一度身につけておけばチャットだけでなく様々なところで活用できますよ(リアルタイムリフレッシュとか…ノティフィケーションとか…)

受講前の注意事項📢

練習環境

  • オペレーティングシステムとバージョン(OS):Windows 11

  • 使用ツール: Node.js 22, Next 15


選手の知識と注意事項

  • HTML/CSS/JS/Reactに関する基本的な知識が必要です。

  • 講義に必要なタイプスクリプトは講義内でお知らせします。


  • 質問は24時間以内に回答いたします。

  • 講義内容をブログにまとめるのは大丈夫ですが、必ず出所を残してください。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React フレームワークを使用して Web サービスを完成させたい方

  • フロントエンドの現役開発者、志望者、就職準備生

  • Next App Router を積極的に使用してみたい方

  • サーバーのデータを React Query で管理したい方

  • SSR、SEOまで全部챙ぎたい方

前提知識、
必要でしょうか?

  • HTML、CSS の知識

  • JavaScript ES2022までの知識

  • React の基礎知識 (ゼロチョの React 無料講座をご覧ください)

  • TypeScript (講義内で説明します)

こんにちは
です。

67,175

受講生

1,712

受講レビュー

9,759

回答

4.8

講座評価

23

講座

제 강의의 장점은 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

  • Former CTO at SmoreTalk

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

カリキュラム

全体

81件 ∙ (14時間 28分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

126件

4.5

126件の受講レビュー

  • dongry님의 프로필 이미지
    dongry

    受講レビュー 3

    平均評価 5.0

    5

    60% 受講後に作成

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

    • minsukweb0331님의 프로필 이미지
      minsukweb0331

      受講レビュー 1

      平均評価 5.0

      5

      68% 受講後に作成

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

      • ehdgus37262456님의 프로필 이미지
        ehdgus37262456

        受講レビュー 2

        平均評価 5.0

        5

        53% 受講後に作成

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

        • nack1400님의 프로필 이미지
          nack1400

          受講レビュー 10

          平均評価 5.0

          5

          31% 受講後に作成

          私は1年目の開発者としてトレンドに合わせてnextjsを勉強したいと思いました。しかし、13バージョンが出てから、既存の12バージョンの講義では不足して公式文書を通じて一人で勉強していましたが、経験も実力も不足して勉強するのに困難がありました。 そこにトレンドに合ったライブラリを使いたくて、あれこれ適用してみると、私がよく知らず、ライブラリのメリットを正しく活用しているかどうか疑問もありました。 この時、ちょうどゼロチョ様のnextjs14バージョン講義とこれまでちゃんと書いてみたかったライブラリの大部分を使った講義が出てくるというニュースに喧嘩待っていました。 今一半分くらい聞いていますが、各セクションについて私が気になった部分の大部分が解消されています。 ありがとうございましたㅎㅎ

          • zerocho
            知識共有者

            ありがとうございます。気になる点はいつでも質問してください〜

        • roider23164240님의 프로필 이미지
          roider23164240

          受講レビュー 8

          平均評価 5.0

          5

          100% 受講後に作成

          ありがとうございます〜!

          ¥8,509

          zerochoの他の講座

          知識共有者の他の講座を見てみましょう!

          似ている講座

          同じ分野の他の講座を見てみましょう!