【完全保存版】Next.js App Routerのベストプラクティスを解説

Рет қаралды 23,014

Shin Coding Tutorial

Күн бұрын

Пікірлер: 41

@あっきー-i9j 3 ай бұрын

Next.jsの考え方の著者です。取り上げていただきありがとうございます

@programming_tutorial_youtube 3 ай бұрын

あっきーさんですね！！こちらこそ！！執筆していただいて大変ありがとうございます（動画で勝手に紹介してしまって、申し訳ございませんでした...）とても分かりやすくて僕としても大変勉強になりました。今後も随時、参考にさせていただきます🥲🥲

@ななななな-j3o 4 күн бұрын

概念、単語レベルでご説明されていて大変わかりやすかったです

@tadanodaigakusei29 28 күн бұрын

あなたは、新世界の神になってください!!!

@mac3752 Ай бұрын

必要な部分のみが簡潔にまとまっていてとてもわかりやすかったです！ありがとうございます

@やま-k6k3u 4 ай бұрын

1時間40分越え！気合い入ってますね。いつも動画を楽しみにしてます！

@programming_tutorial_youtube 4 ай бұрын

全ては説明できませんでしたが、いつの間にか長くなっちゃいました😇 ありがとうございます！お時間のある時に見ていただけると嬉しいです

@ookuraseiya6980 3 ай бұрын

天才っす。一生着いていきます。

@林翔太-k9g 3 ай бұрын

昼休みに1週間かけて拝見しました。有益な動画をありがとうございます！開発する中で再度この動画や参考にあげれたサイトを確認しようと思います！

@programming_tutorial_youtube 3 ай бұрын

林さんですね！！先日はご丁寧なDMありがとうございました。そして1週間かけてみてくださいまして、嬉しい限りでございますぜひ、開発の一助になれば幸いです。これからもお互いに開発がんばっていきましょう！

@林翔太-k9g 3 ай бұрын

先日は突然のDMに丁寧にお返事をいただきありがとうございました🙇 良いアウトプットができましたら、また報告させてください！これからも学ばせていただきます！

@kk-ft1nx 4 ай бұрын

神動画ありがたき幸せ🙏🙏

@kumonopanya 4 ай бұрын

app router は便利すぎる page routerにはもう戻れない

@programming_tutorial_youtube 4 ай бұрын

今ならapprouter利用率が高そうですよね

@HaluNo9 4 ай бұрын

これ素晴らしいー！！

@ZeroIchiEngineer 4 ай бұрын

先月から勉強させていただいてます！ありがとうございます！

@euledge6852 4 ай бұрын

ちょうど今、app router入れるかどうか悩んでいた時なので助かる

@わわ-r5o1n 4 ай бұрын

いつもためになる動画をありがとうございます！マインドマップ凄く分かりやすかったので配布して欲しいです！！

@programming_tutorial_youtube 4 ай бұрын

こちらこそ、いつもありがとうございます！分かりました！概要欄に記載しておきますね。

@わわ-r5o1n 4 ай бұрын

@@programming_tutorial_youtube ありがとうございます！

@にら君クリエイティ部 4 ай бұрын

ありがたい

@naotoishii5165 Ай бұрын

とても勉強になりました。ありがとうございます！一点質問させてください。動画内で紹介いただいた4つのキャッシュについては以下のようなイメージでキャッシュの有無が確認されていく感じでしょうか。(長文申し訳ありません。 **①ユーザがページにアクセス** ↓ **②クライアントのRouter Cacheにて、静的/動的部分のキャッシュの有無を確認** - 全てのキャッシュあり - キャッシュを利用して、静的/動的部分をすぐに画面に表示　→ 処理終了 ↓ **③サーバーのFull Route Cacheにて、②で表示できなかった静的部分のキャッシュの有無を確認** - あり（SSG／ISRのキャッシュ） - キャッシュを利用して、静的部分をすぐに画面に表示 - なし（SSG／ISRのキャッシュが切れてる場合） - オリジンサーバから静的部分を取得し、Full Route CacheにSETした上で、静的部分を画面に表示 ↓ **④サーバーのRequest Memoizationにて、②で表示できなかった動的部分と同一リクエストの結果がキャッシュにあるか確認** - あり - キャッシュを利用して、動的部分をすぐに表示　→ 処理終了 ↓ **⑤サーバーのData Cacheにて、動的部分のキャッシュの有無を確認** - あり（SSG, ISR） - 動的部分をすぐに画面に表示　→ 処理終了 - なし - SSG／ISRでキャッシュが切れてる場合 - オリジンサーバからデータを取得し、Data CacheとRequest MemoizationにSETした上で、画面に表示　→ 処理終了 - SSR - オリジンサーバからデータを取得し、Request MemoizationにSETした上で、画面に表示　→ 処理終了 ※動的部分について、データ取得中は、loading.jsやSuspenseのfallbackUIが表示される。

@kentamikuriya 4 ай бұрын

いつもありがとうございます。質問失礼します。 57:20~で、CacheはVercelにホスティングするのであれば、CDNやEdge Serverに格納されるとおっしゃられております。こちらもしVercel以外にホスティング（AWS, GCP等）した場合、Cacheの格納先を自分たちで構築する必要があるという認識でしょうか。

@programming_tutorial_youtube 4 ай бұрын

SSGやISRなどのレンダリングはNext.jsの機能ですので、Vercel以外でも動きます(ISRはVercelで最適化されているのでISRを使う場合はVercelになると思います)。たとえば、SSGで作ったサイトをAWSでデプロイする場合、SSGのレンダリング(ビルド時にデータ取得＆静的化)は行われますが、DataCacheは行われるかどうかは定かではありません(これは僕の知識不足です。) もしもキャッシュされない場合は、SSGで出力した静的ファイルをS3にアップロードし、それをCloudFrontを利用してCDNキャッシュする必要があるかもです。 Amplifyでデプロイした場合は、自動でキャッシュを良しなにやってくれるかもですが、、詳細はちょっと分からないですね、、すみません。GCPも同様だと思います。 Vercel以外でもキャッシュの基本的な恩恵は受けられるみたいですが、グローバルCDN配信に自動で対応していないホスト先ではCDNキャッシュ設定など手動で行う必要があるかもです。

@粢田博也 4 ай бұрын

ちょうどリプレイスの設計をしているので非常に有益な動画ありがとうございます！ API Handlerでfetchした場合はデフォルトのキャッシュは使えないとのことでしたが、API HandlerをBFFとした構成で、フロントエンドからはAPIHandlerのエンドポイントを呼ぶ場合は、デフォルトのキャッシュが働く認識でいいんでしょうか？現在バックエンドから不要なデータが返りすぎているので、API HandlerをBFFサーバーとして間に挟む構成で進めています。

@programming_tutorial_youtube 4 ай бұрын

どうもご視聴ありがとうございます！フロントからAPIHandlerをfetchで呼び出すときにはデフォルトでキャッシュが働きます。なのでご認識の通りです！

@BB-bw8gs Ай бұрын

初めまして。ウェブ系プログラミング初心者で、自作のブログ(技術系、趣味系)を作成しようと考えていますがその場合PageRouterとAppRouterどちらで進めるのが良いと思いますでしょうか？競プロやゲームプログラミング等は常々触れている身です。アドバイス頂けると幸いです。

@programming_tutorial_youtube Ай бұрын

どちらでも良いと思います！ですがAppRouterが主流ですので、AppRouterが良いと個人的に思いますね！僕の教材は全てAppRouterでやっていこうと思っておりますので。

@programming_tutorial_youtube Ай бұрын

@BB-bw8gs Gatbyでもいいと思います！ Astroでもなんでも良いですね！ブログであればですね。 CMSはMicroCMSかContentLayerまたはNotionをCMSにしても良いと思います。いろんなCMSがありますので、調べてみると良いですね。もちろん自作CMSでも良いと思いますが。

@BB-bw8gs Ай бұрын

@@programming_tutorial_youtube ありがとうございます。間違えてコメント消してしまいました申し訳ないです。先程Udemyのnext.js13でマイクロブログ作成購入させて頂きましたのでそちらベースでまず流れ掴んでみます。 nortionベースにする講座もあったかと思いますので拝見させてもらおうと思います！

@the_oneironaut 4 ай бұрын

Que legal.

@sado4148 4 ай бұрын

ありがとうございます！一点質問です、Route Handlerを使わなくてもよいなどと触れてましたが、Next.jsだけでサーバ側も実装する場合、fetchを用いてキャッシュの取り扱いをして恩恵受けるには、Route Handlerに記載したapiを呼ぶのがキャッシュ再検証などもできて便利じゃないかなと思ったのですが、いかがでしょうか？ (サーバコンポーネントでそのままPrismaなど用いてデータ呼び出す場合キャッシュが使えなくないですか？)

@sado4148 4 ай бұрын

あっ勘違いしてました。いままでTanStackQueryを使ってクライアント側でフェッチしてユーザーごとにキャッシュを持たせていたのですが、Next.jsのfetchの場合サーバーサイドでのフェッチになるので、全体のキャッシュになるのですね(ユーザーごとではない) この場合って、キャッシュ使わなくてもサーバーサイドでPrismaなど用いてapi叩かなくてもデータをDBから返却できるので、パフォーマンスいいよねって話なのでしょうか？

@programming_tutorial_youtube 4 ай бұрын

@@sado4148 そうですね。prismaを利用したデータ取得の場合であればroute handlerを使ってAPIを作る必要はないかなと思っています。サーバーコンポーネントでのフェッチになりますので、ご認識の通りパフォーマンスが良くなります。ですがサーバーサイドでのキャッシュが付かないので、その場合は・メモ化(request memoizationと同等)したいのであればcache() ・複数ユーザー間でキャッシュ(Data Cacheと同等だと思います)したいのであればunstable_cache() でprismaを使った関数をラップしてあげるといいですね。 unstable_cacheは名前の通り安定ではないバージョンですので、今後名前の変更があると思います。

@sado4148 4 ай бұрын

ありがとうございます！

@ねこうまみ 2 ай бұрын

Tanstack queryでサーバーコンポーネント側でフェッチするときはprefetchしてクライアント側にキー指定で受け渡すみたいな感じであってますでしょうか、、？

@KittaYoshio 4 ай бұрын

いつも拝見させていただいてます。初学者で恐縮ですが質問させてくださいませ。 Next.jsだとuseClientを利用することによりCSRは構築可能、SSRも基本的に構築可能です。 ReactはCSR(SPA)のみなので、大は小を兼ねる。。。という意味で Next.jsを採用すればどちらでも転ぶことができるのでよいのかな・・・？と思ったのですが安直でしょうか・・？

@programming_tutorial_youtube 4 ай бұрын

いいと思いますよ！あまりにもリアルタイム性を要求するアプリであればReactだと思いますが、Next.jsで始めるのは良い選択だと思います。