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

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ก.ย. 2024

ความคิดเห็น • 22

  • @HaluNo9
    @HaluNo9 5 วันที่ผ่านมา +1

    これ素晴らしいー!!

  • @kumonopanya
    @kumonopanya 5 วันที่ผ่านมา +5

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

  • @user-jl9ki6ih5p
    @user-jl9ki6ih5p 5 วันที่ผ่านมา +2

    container presenパターンだと、SEO的に残したいところもクライアントコンポになっちゃうところが悩みどころなんだよな〜
    分かる同士いる?😊

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  4 วันที่ผ่านมา +1

      なるほど、確かにクライアントコンポだとSEO的に弱いですね。
      RSCPayload削減かのトレードオフになりそうですね...

  • @KittaYoshio
    @KittaYoshio 2 วันที่ผ่านมา +1

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

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  วันที่ผ่านมา +1

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

  • @kentamikuriya
    @kentamikuriya 2 วันที่ผ่านมา +1

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

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  2 วันที่ผ่านมา +1

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

  • @やま-k6k3u
    @やま-k6k3u 5 วันที่ผ่านมา +4

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

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  4 วันที่ผ่านมา +1

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

  • @sado4148
    @sado4148 13 ชั่วโมงที่ผ่านมา

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

    • @sado4148
      @sado4148 12 ชั่วโมงที่ผ่านมา

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

  • @kk-ft1nx
    @kk-ft1nx 5 วันที่ผ่านมา +2

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

  • @euledge6852
    @euledge6852 5 วันที่ผ่านมา +1

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

  • @moemekko
    @moemekko 5 วันที่ผ่านมา +1

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

  • @わわ-r5o1n
    @わわ-r5o1n 4 วันที่ผ่านมา +1

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

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  4 วันที่ผ่านมา

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

  • @the_oneironaut
    @the_oneironaut 5 วันที่ผ่านมา +1

    Que legal.

  • @にら君クリエイティ部
    @にら君クリエイティ部 5 วันที่ผ่านมา +1

    ありがたい