강의

멘토링

커뮤니티

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
react
트위터
클론코딩
ssr
Next.js
React
react-query
next-auth
msw

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

受講後に得られること

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

こんにちは
です。

66,559

受講生

1,687

受講レビュー

9,755

回答

4.8

講座評価

22

講座

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

カリキュラム

全体

81件 ∙ (14時間 28分)

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

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

受講レビュー

全体

121件

4.5

121件の受講レビュー

  • noo9ya5923님의 프로필 이미지
    noo9ya5923

    受講レビュー 1

    平均評価 3.0

    3

    69% 受講後に作成

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

    • zerocho
      知識共有者

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

  • zimablue14님의 프로필 이미지
    zimablue14

    受講レビュー 14

    平均評価 4.4

    3

    54% 受講後に作成

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

    • 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開発に多くのお手伝いをさせていただきます!

          期間限定セール、あと8日日で終了

          ¥48,510

          30%

          ¥8,743

          zerochoの他の講座

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

          似ている講座

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