next-app-router.org

Next.js App Router

• Blog - Next.js 13.4 | Next.js
• https://nextjs.org/docs/app/building-your-application/routing
• 新しいNext.jsの入門 ─ App DirectoryによるWeb開発をハンズオンで理解しよう - エンジニアHub｜Webエンジニアのキャリアを考える！
• ブログサイトを Next.js App Router に移行したので学びを書く | stin’s blog

説明

https://nextjs.org/docs/getting-started/installation

メモ

• 特徴
  • 見えるところ
    • Layout, page.tsx
    • _app, _document 廃止
    • next/document import 不要
    • getServerSideProps, getStaticProps なくなる
      • fetch のオプションで挙動が変わる
  • 見えないところ
    • アーキテクチャが違う
      • React Server Components and Suspense を基盤に構築
      • Reactの最新機能が使える
  • できるようになる
    • Suspense
    • transitions https://react.dev/reference/react/useTransition
    • RSC
      • コンポーネント単位の code splitting
      • server rendering
• Suspense 思い出し
  • React 18に備えるにはどうすればいいの？　5分で理解する - Qiita
  • Suspenseはどのような機能なのか｜ReactのSuspense対応非同期処理を手書きするハンズオン
  • Reactのトランジションで世界を分岐させるハンズオン
• https://nextjs.org/docs/getting-started/react-essentials
  • デフォルトで Server Components が使われる
  • Client Components にするには =’use client’;= directive を書く
• 疑問
  • で、何が嬉しいの？
    • Layout
      • nested layout
    • Colocation
      • > 特定のページにのみ使用するコンポーネントやフック、テストファイルなどを、page.tsxと同じディレクトリに置くことができます。そのためコロケーションと呼ばれる構造が実現しやすくなっています。
    • Suspense, Error
      • ローディングやエラーが書きやすい、柔軟に書ける、特定のファイルを書けばOK
    • RSCによるパフォーマンス向上
      • https://twitter.com/leeerob/status/1635289744182755330
  • Static Export でも恩恵受けられる？
    • ページ遷移時の Partial Renderingどうなんだろう？
    • RSC使えないと魅力半減か？
      • ただそこまでパフォーマンスを求めるアプリってあまりない気もする…
  • Pages Router から乗り換えるべきか？
    • 上記メリットと作業コストの天秤？
    • 公式はAppを推奨している
  • pages と共存できる？
    • routeごとにできる
  • 簡単に移行できるの？
    • migrationガイド
    • https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
• ライブラリ
  • Apollo Client は 対応済み Using Apollo Client with Next.js 13: releasing an official library to support the App Router - Apollo GraphQL Blog
  • Chakura UI は対応中 chakra-ui/chakra-ui#7180
    • Support for NextJS 13 App Router · Issue #7649 · chakra-ui/chakra-ui
      • 使えるがパフォーマンスの問題あり？

example

• https://github.com/vercel/commerce
• AddyOsmani.com - React Server Components, Next.js App Router and examples

実際に試す

npx create-next-app@latest

サイズ比較

export したが、ほとんど変わらないので無駄な比較だった…

App

Route (app)                                Size     First Load JS
┌ ○ /                                      4.93 kB        81.9 kB
└ ○ /favicon.ico                           0 B                0 B
+ First Load JS shared by all              77 kB
  ├ chunks/139-e7e29ea1fcab18c9.js         24.6 kB
  ├ chunks/2443530c-d4a6bd7fc7f21e3c.js    50.5 kB
  ├ chunks/main-app-322dc58cccdf6a8c.js    214 B
  └ chunks/webpack-edaab4aa230d655f.js     1.68 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   178 B            86 kB
+ First Load JS shared by all              85.8 kB
  ├ chunks/main-ec7b1d67e0a9d0ca.js        83.9 kB
  ├ chunks/pages/_app-c544d6df833bfd4a.js  192 B
  └ chunks/webpack-edaab4aa230d655f.js     1.68 kB

Pages

Route (pages)                              Size     First Load JS
┌ ○ /                                      4.49 kB        80.5 kB
├   └ css/32586a8b0a8a958d.css             1.73 kB
├   /_app                                  0 B              76 kB
├ ○ /404                                   182 B          76.2 kB
└ λ /api/hello                             0 B              76 kB
+ First Load JS shared by all              76.7 kB
  ├ chunks/framework-2c79e2a64abdb08b.js   45.2 kB
  ├ chunks/main-8173c7f3c74689b0.js        29.7 kB
  ├ chunks/pages/_app-5fbdfbcdfb555d2f.js  296 B
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/876d048b5dab7c28.css               706 B