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

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

難易度 中級以上

受講期間 無制限

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

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 (講義内で説明します)

こんにちは
zerochoです。

67,824

受講生

1,755

受講レビュー

9,765

回答

4.8

講座評価

25

講座

私の講義の強みはQ&Aです(Inflearn回答王を2回受賞)。24時間以内にできる限りお答えします!一緒に悩んでいるという気持ちで回答させていただきます!

私の講座の大きな強みはQ&Aサポートです。(インフラーンQ&A王賞を2回受賞)24時間以内にご質問にお答えし、最善を尽くしてサポートいたします!問題を一緒に解決している感覚を味わっていただけるでしょう。

👉ZeroCho Lectures
ZeroCho(ゼロチョ)講義の全ロードマップ。私の全コースの完全なロードマップはこちらでご確認いただけます。

– 『Node.js教科書』、『コーディング自律学習 ZeroChoのJavaScript』、『Let's Get IT JavaScript』、『TypeScript教科書』著者
ZeroCho.com 運営者
– 現) YouTubeにてZeroCho TVで開発関連の放送中
– 元) Smoretalk CTO
– 元) 今日のピックアップ CTO(カカオモビリティにエグジット後、カカオモビリティ最年少開発パート長)

  • Node.js教科書ZeroChoの独学JavaScriptLet's Get IT JavaScriptTypeScript教科書の著者

  • ZeroCho.comの運営者

  • 現在、開発関連のトピックを扱うYouTubeチャンネルZeroCho TVを運営中

  • SmoreTalk CTO

  • Today Pickup CTO(カカオモビリティに買収、最年少リード開発者として合流)

もっと見る

カリキュラム

全体

81件 ∙ (14時間 28分)

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

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

受講レビュー

全体

128件

4.4

128件の受講レビュー

  • dongry님의 프로필 이미지
    dongry

    受講レビュー 3

    平均評価 5.0

    5

    60% 受講後に作成

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

    • bras17171184님의 프로필 이미지
      bras17171184

      受講レビュー 3

      平均評価 3.7

      1

      88% 受講後に作成

      ビデオ編集があまりにも混乱しているので精神はありません。そのため、上に置いたコードを貼り付けたのですが、シンクが合わない場合が多く、探す時間が多くなります。講義内容は良かった部分はありましたが、このような部分のために勉強するときに流れがたくさん切れますね。

      • zerocho
        知識共有者

        まず、受講にご迷惑をおかけして申し訳ありません。講義教案と映像修正中ですが、どんな部分が混乱しているのかとコードがシンクが合わないのか一つだけ教えていただければ幸いです。

    • noo9ya5923님의 프로필 이미지
      noo9ya5923

      受講レビュー 1

      平均評価 3.0

      3

      69% 受講後に作成

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

      • zerocho
        知識共有者

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

    • zimablue14님의 프로필 이미지
      zimablue14

      受講レビュー 14

      平均評価 4.4

      3

      54% 受講後に作成

      確かに役に立つ内容がたくさんあるのですが、学習するのが大変な感じがします。 生徒よりも教師の利便性に重点が置かれているように見えるので残念です。

      • hoho952791님의 프로필 이미지
        hoho952791

        受講レビュー 6

        平均評価 4.3

        1

        88% 受講後に作成

        いつもゼロチョの講義が好きな方でしたが、nextはちょっとあまりにも下の気がしました。 その理由は次のとおりです。 1. 講義の順番がすくい - 講義が整理ができていないと混乱します。 もともとゼロ秒様の講義は整理が体系的にする感じの講義ではありませんでしたが、今回はちょっとひどいです。ここに行ってそこに行ったり来たりします。 2. コードをただボトム 一緒に従いながらやりたいのですが、ただ福祉です。 だからと言うと、それが私が見ている講義やコードがシンクが合うわけでもありません。 コードを1強2強3強それぞれ全部上げていただきたいです。

        • zerocho
          知識共有者

          まず、受講にご迷惑をおかけして申し訳ありません。 フォローしている部分は、他の受講評に返信して残したことを再度上げます。 "この講義は盲目的に従う目的で作られた講座ではありません(クローンコーディングの長所と短所の映像でお話しました)。 この講義を聞くコツは、直接先にクローンコーディングをしてみて、この講座のコードは正解のように活用されることをお勧めします。フォローせずにx.comのようなサイトを自分で作成できるようにするのが講義の目的です。"

        • zerocho
          知識共有者

          コードは1強2強3強全部上がっていますが(それも一講の当中間コードまで合計8個のコードが羽毛に上がっています)どんな意味なのかよく分かりません。

        • こんにちは。 羽毛に上がっているのは確認をしたが。 大胆にセッション別に上がっているのに。 それではなく、小さな単位で1強の場合、1強に合うコード 2強なら2強に合ったコードで上がっていればいいようです。 講義の順番が混乱しているということ aをしてからbをしてからaが間違っていて、aをコードを修正するということをお伝えします。 これがあまりにも頻繁です。 講義を受講しても見たい部分だけ選んで見ても なめらかに見ればいいと思います。 そして視覚的な資料も一緒にあればいいようです。 単にカット編集しかありませんが、言葉だけではありません。 視覚的な資料とともに説明していただければ幸いです。 個人的には公式文書も一度ずつ見ました。 公式文書がはるかに見やすく整理が上手です。 人鋼が整理できない感じが強すぎます。 会社でnextスタディをするのにnext14バージョンがゼロチョンしかないので見たのに 会社で見たことがなかったらセッション2の中間部分まで見たことがないようです。

        • zerocho
          知識共有者

          講義コードは1講義ずつ再アップロードしました。授業ノートにそれぞれのコードのGitHubリンクがあります。 aをしていたらbがおかしくなって、またaを修正したとおっしゃっていますが、基本的に1つの講義動画が終わった時点で、その講義の内容については実行できるようになっています。ただ、新しい機能bを追加すると、既存のaコードを修正することもありえます。これは講義内容がごちゃごちゃになっているのではなく、プログラミング講義であれば仕方ないことです。 視覚的な資料は講義教案(GitHub README.md)にまとめて整理しています。近いうちに受講生の方々が整理した講義ノートも一緒にアップロードする予定です。 そして、講義の序盤にセクション1、2の部分はコードを打ち込まずにコピーして使うように申し上げました。もちろん、打ち込むことや、講義を自分のスタイルで見ることは自由です。私はもう打ち込む講義は制作しない予定です。自分でまず作ってみるのではなく、講義に出てきたコードをただ一文字ずつ打ち込むのは、ただコピペするのと同じような行為なので意味がないと思うからです(私の個人的な主観です)。この部分は私の講義とスタイルが合わないので、仕方ないかと思います。

      zerochoの他の講座

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

      似ている講座

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