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

Рет қаралды 16,672

Shin Coding Tutorial

Күн бұрын

Пікірлер: 35

@あっきー-i9j 27 күн бұрын

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

@programming_tutorial_youtube 26 күн бұрын

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

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

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

@programming_tutorial_youtube Ай бұрын

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

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

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

@やま-k6k3u Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@kumonopanya Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@ookuraseiya6980 Ай бұрын

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

@euledge6852 Ай бұрын

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

@ZeroIchiEngineer Ай бұрын

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

@kk-ft1nx Ай бұрын

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

@わわ-r5o1n Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@わわ-r5o1n Ай бұрын

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

@HaluNo9 Ай бұрын

これ素晴らしいー！！

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

ありがたい

@粢田博也 Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@KittaYoshio Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@kentamikuriya Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@ねこうま-r2s 9 күн бұрын

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

@sado4148 Ай бұрын

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

@sado4148 Ай бұрын

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

@programming_tutorial_youtube Ай бұрын

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

@sado4148 Ай бұрын

ありがとうございます！