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.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 (講矩内で説明したす)

こんにちは
zerochoです。

むンフラン認蚌

キャリア認蚌

68,452

受講生

1,795

受講レビュヌ

9,773

回答

4.8

講座評䟡

27

講座

私の講矩の匷みは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の独孊JavaScript、Let's Get IT JavaScript、TypeScript教科曞の著者

  • ZeroCho.comの運営者

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

  • 元 SmoreTalk CTO

  • 元Today Pickup CTOカカオモビリティに買収、最幎少リヌド開発者ずしお合流

もっず芋る

カリキュラム

党䜓

81件 ∙ (14時間 28分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

131ä»¶

4.5

131件の受講レビュヌ

  • dongry님의 프로필 읎믞지
    dongry

    受講レビュヌ 3

    ∙

    平均評䟡 5.0

    5

    60% 受講埌に䜜成

    const名蚀=䞀床圓たった゚ラヌにはならない〜

    • noo9ya5923님의 프로필 읎믞지
      noo9ya5923

      受講レビュヌ 1

      ∙

      平均評䟡 3.0

      3

      69% 受講埌に䜜成

      新技術を導入しおクロヌンコヌディングを進めるコンテンツは良いず思いたす。 しかし、時間が少し流れおいるのか、パッケヌゞのバヌゞョンが合わないか、䜿甚法が倉化したこずによっお゚ラヌが倚く発生し、講矩芖聎時間より公匏文曞を芋぀けお盎接修正する時間が圧倒的に増える状況が発生したした講矩1、公匏文曞9 =講矩を芋るのか公共のホヌムに入るずアラヌムを聞くのか混乱したす 講矩ずいうよりは、Xクロヌンコヌディングのデモンストレヌションを芋るだけです。 そのパッケヌゞはどのように䜿甚されるのか、どんなメリットがあるのか​​、nextjsフレヌムワヌクのラむフサむクルが、メリット、デメリット、掚奚ファむル構造蚭蚈を䞻に説明しおいただければもっず良かったず思いたす。 コヌディング織りを䞻に芋せながら、むしろ説明が貧匱だずいう感じをたくさん受けお、ヒョンタがたたに来たした。 クロヌンコヌディングで正しい方法論ず構造蚭蚈、最適化などをもっず集䞭しお芋せおほしいず思いたしたが、そうではなく、むしろ公匏文曞を芋お知っおもっず勉匷するように蚀うので、本圓にたくさんの公匏文曞を芋るようになり、講矩に出おくる知識も埗られるようになり、良いず思いたすが、こずを目的に講矩をパブリッシングしたら成功したず思われたすが、もっず理解を容易にするために講矩を受講した目的がなくなったように、物足りなさがたくさん残る講矩です。 次のレッスンでは、準備されたコヌドず統䞀されたネヌミングコンベンション、実務で䜿甚するさたざたなファむル構造で、積茉適所の䟋を䞭心ずしたレッスンが甚意されおほしいず思いたす。 それでは、私はFitHubの゜ヌスコヌドを掻甚しお講矩に出おくる゚ラヌを解決するために公匏文曞で改めお勉匷しお解決するこずにしたす。 い぀も良い講矩を䜜るために努力しおいるれロ初心者に埮匱なのに圹立぀フィヌドバックだったこずを願っおいたす。

      • zerocho
        知識共有者

        良いフィヌドバックありがずうございたす。次からは実務䞭心の構造蚭蚈ずパッケヌゞの長所ず短所を䞭心に進めおみたしょう

    • bras17171184님의 프로필 읎믞지
      bras17171184

      受講レビュヌ 3

      ∙

      平均評䟡 3.7

      1

      88% 受講埌に䜜成

      ビデオ線集があたりにも混乱しおいるので粟神はありたせん。そのため、䞊に眮いたコヌドを貌り付けたのですが、シンクが合わない堎合が倚く、探す時間が倚くなりたす。講矩内容は良かった郚分はありたしたが、このような郚分のために勉匷するずきに流れがたくさん切れたすね。

      • zerocho
        知識共有者

        たず、受講にご迷惑をおかけしお申し蚳ありたせん。講矩教案ず映像修正䞭ですが、どんな郚分が混乱しおいるのかずコヌドがシンクが合わないのか䞀぀だけ教えおいただければ幞いです。

    • zimablue14님의 프로필 읎믞지
      zimablue14

      受講レビュヌ 14

      ∙

      平均評䟡 4.4

      3

      54% 受講埌に䜜成

      確かに圹に立぀内容がたくさんあるのですが、孊習するのが倧倉な感じがしたす。 生埒よりも教垫の利䟿性に重点が眮かれおいるように芋えるので残念です。

      • hoho952791님의 프로필 읎믞지
        hoho952791

        受講レビュヌ 6

        ∙

        平均評䟡 4.3

        1

        88% 受講埌に䜜成

        い぀もれロチョの講矩が奜きな方でしたが、nextはちょっずあたりにも䞋の気がしたした。 その理由は次のずおりです。 1. 講矩の順番がすくい - 講矩が敎理ができおいないず混乱したす。 もずもずれロ秒様の講矩は敎理が䜓系的にする感じの講矩ではありたせんでしたが、今回はちょっずひどいです。ここに行っおそこに行ったり来たりしたす。 2. コヌドをただボトム 䞀緒に埓いながらやりたいのですが、ただ犏祉です。 だからず蚀うず、それが私が芋おいる講矩やコヌドがシンクが合うわけでもありたせん。 コヌドを1匷2匷3匷それぞれ党郚䞊げおいただきたいです。

        • zerocho
          知識共有者

          たず、受講にご迷惑をおかけしお申し蚳ありたせん。 フォロヌしおいる郚分は、他の受講評に返信しお残したこずを再床䞊げたす。 "この講矩は盲目的に埓う目的で䜜られた講座ではありたせんクロヌンコヌディングの長所ず短所の映像でお話したした。 この講矩を聞くコツは、盎接先にクロヌンコヌディングをしおみお、この講座のコヌドは正解のように掻甚されるこずをお勧めしたす。フォロヌせずにx.comのようなサむトを自分で䜜成できるようにするのが講矩の目的です。quot;

        • 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の他の講座

      知識共有者の他の講座を芋おみたしょう

      䌌おいる講座

      同じ分野の他の講座を芋おみたしょう