- 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 思い出し
- 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によるパフォーマンス向上
- Layout
- Static Export でも恩恵受けられる?
- ページ遷移時の Partial Renderingどうなんだろう?
- RSC使えないと魅力半減か?
- ただそこまでパフォーマンスを求めるアプリってあまりない気もする…
- Pages Router から乗り換えるべきか?
- 上記メリットと作業コストの天秤?
- 公式はAppを推奨している
- pages と共存できる?
- routeごとにできる
- 簡単に移行できるの?
- で、何が嬉しいの?
- ライブラリ
- 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
- 使えるがパフォーマンスの問題あり?
- Support for NextJS 13 App Router · Issue #7649 · chakra-ui/chakra-ui
- https://github.com/vercel/commerce
- AddyOsmani.com - React Server Components, Next.js App Router and examples
npx create-next-app@latest
export したが、ほとんど変わらないので無駄な比較だった…
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
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