Tweet
Tweet

Slide 1

Slide 1 text

App Router 入門 Next.js App Router@Recruit bootcamp2024

Slide 2

Slide 2 text

Profile Name: 佐藤 昭文（Akifumi Sato ） 所属: 横断エンジニアリング部 ＡＰソリューショングループ（通称ASG ） Web Engineer Work 『レジュメ』 『リクルートダイレクトスカウト』 Activity https://zenn.dev/akfm JS Conf 2023 Vercel meetup Node 学園42 Rust 入門本の執筆

Slide 3

Slide 3 text

Agenda 話さないこと Pages Router ・React の基礎 experimental な機能、不安定な機能 話すこと Next.js の歴史 これからのNext.js(App Router) App Router Short Tutorial 話すこと・話さないこと

Slide 4

Slide 4 text

Next.js の歴史

Slide 5

Slide 5 text

Next.js の歴史(1) 年 イベント 補足 2013/05 React が公開 2016/10 Next.js が公開 React ＋SSR が広く認知される 2018~2019 Gatsby.js の台頭 SSR->SSG が注目される 2019/07 [email protected] dynamic ルーティング・Typescript 対応 2020/03 [email protected] SSG 対応 2020/07 [email protected] ISR 対応

Slide 6

Slide 6 text

Next.js の歴史(2) 年 イベント 補足 2021~2022 Next.js@v10~12 パフォーマンス改善・次世代コンパイラの開発に着手 2022/05 Layout RFC 発表 後のApp Router 2022/10 [email protected] App Router(Beta) 2023/05 [email protected] App Router(Stable) 、Server Actions(Beta) 2023/10 [email protected] Server Actions(Stable) 2024/05 [email protected] Partial Pre Rendering

Slide 7

Slide 7 text

Next.js の歴史に見る進化 Next.js は常に高いパフォーマンスを追い求めてきた コードスプリッティングや静的化 画像やfont の最適化（ next/image 、 next/fotn ）など Next.js は常により良い DX も追い求めてきた SWC をベースとしたRust コンパイラを内包し、コンパイル速度改善 webpack 作者sokra 氏をVercel に迎え、Rust 製の後継バンドラー開発 2024 年現在、Next.js はApp Router への過渡期である RSC などのReact の最新機能を取り入れた、設計思想の大幅なアップデート Next.js は破壊的変更ではなく段階的移行という手段を選んだ Next.js はいかにして進化してきたか

Slide 8

Slide 8 text

Pages -> App Router

Slide 9

Slide 9 text

App Router とは ( 公式ドキュメントより)Next.js App Router は、Server Components 、Streaming with Suspense 、Server Actions といったReact の最新機 能を使ったアプリケーション構築のための新しいモデル 新たなNext.js のアプリケーション構築方法 pages ではなく、 app ディレクトリ配下に配置する フレームワークとしてはほとんど別物レベル React の新機能（主にサーバー側機能）が使える React Server Components Server Actions 強力なCache その他諸々新機能（多くて混乱するので割愛）

Slide 10

Slide 10 text

Pages Router の現在 Pages Router において、新規機能開発の予定はない 深刻な脆弱性対応やパフォーマンス改善は取り込まれるかもしれない 予期せずApp Router 側の修正がPages Router に影響してしまうこともしばしば… Pages Router で利用できるライブラリは多く、いい意味で「枯れてる」状態 しかし徐々にライブラリ群もApp Router のみ対応している状況になっていくであろうことが予想される いずれはNext.js ユーザーはApp Router へ移行することになる React のClass Component -> Functional Component への移行に近いかもしれない 実態としてはdeprecated に近い

Slide 11

Slide 11 text

App Router の現状 Next.js としてはApp Router はstable と宣言してるが、実際には未成熟な状態 stable 宣言当初、バグがかなり多くプロダクションReady とは言えなかった 今日では致命的なバグについて、徐々に解消しつつある ただし、まだ一部機能ではバグが多いため、機能ごとに見極めが必要 関連ライブラリも増えてきたものの、発展途上 学習コスト・対応コスト高 Vercel 以外で利用するには深い理解が必要となる(Cache Handler 周りとか) 現状社内の一部プロジェクトでApp Router が使われているが、実験的採用に止まる App Router はエコシステム含め未成熟な段階

Slide 12

Slide 12 text

React の新機能

Slide 13

Slide 13 text

React Server Components(RSC) Server Component: サーバー側でのみレンダリングされる Component Client Component: 従来からあるクライアント・サーバーどちらでもレンダリング可能なComponent 今後RSC をサポートするフレームワークは増えていくと予想される Remix Vike React における新たなアーキテクチャ

Slide 14

Slide 14 text

RSC のモチベーション デフォルトでより良いパフォーマンスの達成 ハイドレーション処理・バンドルサイズを減らせる クライアント<-> サーバーの通信を減らし、より高速でセキュアに バックエンドへのフルアクセス より簡単にComponent が必要なデータを取得できるようになった 中間層(gSSP, tRPC, GraphQL, API Routes など) の実装や設計が不要に 参考: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#motivation 従来からあったReact の問題を解決したかった

Slide 15

Slide 15 text

Server Components App Router ではデフォルトでServer Components となる クライアントサイドでの動作前提な useState など一部 hooks は利用できない Component 自体を async にすることが可能で、 fetch を直接扱える Client Components/Server Components どちらも含めることができる サーバーでのみ実行されるComponent import { Counter } from "@/components/Counter"; // Client Component export default async function Page() { // 今までできなかったが、直接await できる const todo = await fetch('https://dummyjson.com/todos/random').then(res => res.json()) return ( 
todo: {JSON.stringify(todo)}
) }

Slide 16

Slide 16 text

SSR との違い SSR: ハードナビゲーション( 初期表示) のみ実行される SC: ハードナビゲーションでもソフトナビゲーション( Link の遷移) でも実行される 従来からあるSSR(Server Side Rendering) と混乱しやすいが、Server Components(SC) は全く異なる概念

Slide 17

Slide 17 text

Client Components ファイルの先頭に "use client" があるとそのComponent 以下は全てClient Component となる Next.js においてはSSR 時にもレンダリングされる 従来からあるComponent import { useState } from "react"; const [count, setCount] = useState(0) // Client Component のみで利用可能 "use client" export function Counter() { return (

count: >{count}

setCount(prev => prev + 1)}>increment
) }

Slide 18

Slide 18 text

Client Components children ( などのprops) を除き、Server Components を含むことはできない 従来からあるComponent children: React.ReactNode; // Server Components も可!
{children}
"use client" import { useState } from "react"; export function Accordion({ children, }: { }) { const [isOpen, setIsOpen] = useState(false) return (
toggle
) }

Slide 19

Slide 19 text

Server Actions ファイルや関数の先頭行に "use server" があるとServer Actions となる Client Components からサーバー側の関数を実行できる // action.ts "use server" async function create(formData: FormData) { const text = formData.get('name') // ...API へPOST したりDB に保存するなど... } // page.tsx export default function Page() { return ( Create ) }

Slide 20

Slide 20 text

App Router 固有の特徴

Slide 21

Slide 21 text

強力なCache 4 層のCache 層があり、多くがデフォルトで有効なためパフォーマンスが非常に良い

Slide 22

Slide 22 text

その他多くの機能 Nested Layout Error/Loading UI Dynamic Routes revalidate Parallel Routes Intercepting Routes etc… 他にも細々多くの機能が含まれ( 詳細はshort tutorial で)

Slide 23

Slide 23 text

Short Tutorial

Slide 24

Slide 24 text

Hello world. package.json https://github.com/vercel/next.js/tree/canary/examples/hello-world # pnpm を未インストール時のみ $ npm install -g pnpm # プロジェクトの作成 $ pnpm create next-app --example hello-world hello-world-app $ cd hello-world-app # Next.js はv14.2.3 を使うこと $ pnpm dev "dependencies": { - "next": "latest", + "next": "14.2.3", "react": "^18.2.0", "react-dom": "^18.2.0" },

Slide 25

Slide 25 text

Hello world. local サーバーを起動 $ pnpm dev

Slide 26

Slide 26 text

Hello world. ファイル保存時に自動整形されるようにIDE を設定 VSCode の設定方法 WebStorm の設定方法 フォーマット揃える手間を省くために、prettier をインストールしIDE に自動整形を設定 $ pnpm add -D prettier

Slide 27

Slide 27 text

file conventions App Router のルーティグは page.tsx で定義される

Slide 28

Slide 28 text

file conventions https://nextjs.org/docs/app/building-your-application/routing/defining-routes layout.js page.js error.js loading.js etc… App Router は特定のファイル名規役に応じてコンポーネントを処理する

Slide 29

Slide 29 text

Nested layout layout.tsx を修正して共通のヘッダーを作成 all page's header // app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); }

Slide 30

Slide 30 text

New page ディレクトリを作成して新しいページを作成 import Link from "next/link"; /todos // app/page.tsx export default function Page() { return ( <>

Hello, Next.js!

> ); }

Slide 31

Slide 31 text

New page ディレクトリを作成して新しいページを作成 // app/todos/layout.tsx export default function TodosLayout({ children, }: { children: React.ReactNode; }) { return ( <> {children} todos page's footer > ); }

Slide 32

Slide 32 text

New page ディレクトリを作成して新しいページを作成 // app/todos/page.tsx import Link from "next/link"; export default function Page() { return ( <>

Hello, Todos page!

/todos/random > ); }

Slide 33

Slide 33 text

New page ディレクトリを作成して新しいページを作成 // app/todos/random/page.tsx export default function Page() { return

Hello, Random todo

; }

Slide 34

Slide 34 text

Server Components + fetch dummy データをfetch して表示 const todo = await fetch('https://dummyjson.com/todos/random') .then((res) => res.json()) .finally(() => console.log('>>> fetch dummyjson')); // app/todos/random/page.tsx export default async function Page() { return ( <>

Hello, Random todo

todos: {JSON.stringify(todo, null, 2)}
> ); }

Slide 35

Slide 35 text

Error UI page.tsx でエラーが起きた時のUI は、 error.tsx で定義可能 // .then((res) => res.json()) .then((res) => { throw new Error('always error') }) // app/todos/random/page.tsx export default async function Page() { const todo = await fetch('https://dummyjson.com/todos/random') .finally(() => console.log('>>> fetch dummyjson')); // ... }

Slide 36

Slide 36 text

Error UI ※ pnpm dev 中に error.tsx を追加すると無限リロードが発生することがあるが、再起動で解消する page.tsx でエラーが起きた時のUI は、 error.tsx で定義可能 // app/todos/error.tsx "use client" export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { return (

Error!

reset()}>Try again 
{error.message}
) }

Slide 37

Slide 37 text

Loading UI 長い非同期処理を含む場合には、 loading.tsx でLoading UI を定義可能 await setTimeout(1000); // app/todos/random/page.tsx import { setTimeout } from "timers/promises"; export default async function Page() { const todo = await fetch('https://dummyjson.com/todos/random') .then(async (res) => { return res.json(); }) .finally(() => console.log('>>> fetch dummyjson')); // ... }

Slide 38

Slide 38 text

Loading UI 長い非同期処理を含む場合には、 loading.tsx でLoading UI を定義可能 // app/todos/random/loading.tsx export default function Loading() { return

Loading...

; }

Slide 39

Slide 39 text

Client Components + useState useState を使うために "use client" を追加 "use client"; import { useState } from "react"; const [count, setCount] = useState(0); // app/components/counter.tsx export function Counter() { return (

count: {count}

setCount(count + 1)}>increment
); }

Slide 40

Slide 40 text

Client Components + useState useState を使うために "use client" を追加 import { Counter } from "./components/counter"; // app/page.tsx import Link from "next/link"; export default function Page() { return ( <>

Hello, Next.js!

/todos > ); }

Slide 41

Slide 41 text

Server Actions form からサーバー側の関数を実行 // app/action.ts "use server"; export async function action(data: FormData) { // skip validation const name = data.get("name"); console.log(`action called with name: "${name}"`); // ...API へPOST したりDB に保存するなど... }

Slide 42

Slide 42 text

Server Actions form からサーバー側の関数を実行 import { action } from "./action"; // app/page.tsx import Link from "next/link"; import { Counter } from "./components/counter"; export default function Page() { return ( <>

Hello, Next.js!

/todos name: submit > ); }

Slide 43

Slide 43 text

Dynamic Routes 従来同様、 [id] のようなページも作成可能 // app/todos/[id]/page.tsx export default function Page({ params }: { params: { id: string } }) { return

Todo ID: {params.id} page!

; }

Slide 44

Slide 44 text

Dynamic Routes 従来同様、 [id] のようなページも作成可能 // app/todos/page.tsx import Link from "next/link"; export default function Page() { return ( <>

Hello, Todos page!

  • /todos/random
  • /todos/111
> ); }

Slide 45

Slide 45 text

Full Route Cache のrevalidate https://nextjs.org/docs/app/building-your-application/caching#full-route-cache // `revalidate` をexport することで、レンダリングのキャッシュ(Full Route Cache) のrevalidate を設定可能 // pnpm dev ではなく、pnpm build && pnpm start でないと動作しないので要注意 // 3.0s ごとにrevalidate export const revalidate = 3; // app/todos/random/page.tsx export default async function Page() { const todo = await fetch('https://dummyjson.com/todos/random') .then((res) => res.json()) .finally(() => console.log('>>> fetch dummyjson')); return ( <>

Hello, Random todo

todos: {JSON.stringify(todo, null, 2)}
> ); }

Slide 46

Slide 46 text

Data Cache のrevalidate https://nextjs.org/docs/app/building-your-application/caching#data-cache revalidate: 3, // 3 秒でrevalidate // export const revalidate = 3; // app/todos/random/page.tsx export default async function Page() { const todo = await fetch('https://dummyjson.com/todos/random', { next: { }, }) .then((res) => res.json()) .finally(() => console.log('>>> fetch dummyjson')); return ( <>

Hello, Random todo

todos: {JSON.stringify(todo, null, 2)}
> ); }

Slide 47

Slide 47 text

Router Cache のrevalidate https://nextjs.org/docs/app/building-your-application/caching#router-cache import { revalidatePath } from "next/cache"; // Full Route Cache/Data Cache/Router Cache がrevalidate される revalidatePath("/todos/random"); // app/todos/random/action.ts "use server"; export async function revalidateTodo() { console.log("revalidatePath: /todos/random"); }

Slide 48

Slide 48 text

Router Cache のrevalidate https://nextjs.org/docs/app/building-your-application/caching#router-cache revalidate // app/todos/random/page.tsx import { revalidateTodo } from "./action"; export default async function Page() { // ... return ( <>

Hello, Random todo

todos: {JSON.stringify(todo, null, 2)}
> ); } // export const revalidate = 3;

Slide 49

Slide 49 text

Request Memorization レンダリング中は fetch はメモ化されるので、1 回しか通信されない const todo = await fetchTodo(); // fetch 1 const todo = await fetchTodo(); // fetch 2 // app/todos/random/page.tsx function fetchTodo() { return fetch("https://dummyjson.com/todos/random", { next: { revalidate: 3 }, }).then((res) => res.json()) as Promise<{ todo: string }>; } export async function generateMetadata() { return { // API 的にはリクエストごとにrandom なTODO が帰ってくるが // Memorization により1 回にまとまられるので画面とタイトルで齟齬が起きない title: `Todo: ${todo.todo}`, description: "This is a Next.js app.", }; } export default async function Page() { // ... }

Slide 50

Slide 50 text

ハンズオン課題 https://github.com/recruit-tech/bootcamp-2024-nextjs Pages Router で作ったblog をApp Router で書き換えてみましょう 近くの席の人同士で議論しながら進めましょう 佐藤・吉井さんが歩き回ってるので質問や不明点あれば気軽に聞いてください blog-app-router に参考実装があるのでどうしても参考実装がみたいというときはどうぞ Pages Router で作ったBlog アプリをApp Router で書き換えてみよう

Slide 51

Slide 51 text

付録1: 4 種類のCache ※ 時間が余ったら説明します

Slide 52

Slide 52 text

App Router におけるCache の種類 Mechanism What Where Purpose Duration Request Memoization 関数の戻り値 Server React Component tree にお けるdata の再利用 リクエストごと Data Cache API レスポンスやデータベ ースアクセスの結果 Server ユーザーやデプロイをまたぐ データの再利用 永続化 (revalidate 可) Full Route Cache HTML やRSC payload Server レンダリングコストやパフォ ーマンスの向上 永続化 (revalidate 可) Router Cache RSC Payload Client ナビゲーションごとのリクエ スト削減 ユーザーセッショ ン・時間

Slide 53

Slide 53 text

Request Memoization レンダリング時のリクエストをメモ化する

Slide 54

Slide 54 text

Data Cache データの再利用を目的としたCache

Slide 55

Slide 55 text

Data Cache データの再利用を目的としたCache

Slide 56

Slide 56 text

Data Cache データの再利用を目的としたCache

Slide 57

Slide 57 text

Full Route Cache HTML やRSC payload をキャッシュする

Slide 58

Slide 58 text

Router Cache RSC Payload をキャッシュする

Slide 59

Slide 59 text

付録2: Client Boundary ※ 時間が余ったら説明します

Slide 60

Slide 60 text

Client Boundary 出典: https://postd.cc/server-components/ Client Component でimport されたComponent は全てClient Component となる

Slide 61

Slide 61 text

Client Boundary 出典: https://postd.cc/server-components/ Client Component でimport されたComponent は全てClient Component となる

Slide 62

Slide 62 text

Client Boundary 出典: https://postd.cc/server-components/ Client Component でimport されたComponent は全てClient Component となる

Slide 63

Slide 63 text

❌: Client がServer をimport 当然ながら、Client 側にServer 側のモジュールはimport できない // You cannot import a Server Component into a Client Component. import ServerComponent from "./Server-Component"; "use client"; export default function ClientComponent({ children, }: { children: React.ReactNode; }) { const [count, setCount] = useState(0); return ( <> setCount(count + 1)}>{count} > ); }

Slide 64

Slide 64 text

✅: Props でServer Component を渡す Props を通じてServer Component を渡すことは可能 children, children: React.ReactNode; // Server Components も可! "use client"; import { useState } from "react"; export default function ClientComponent({ }: { }) { const [count, setCount] = useState(0); return ( <> setCount(count + 1)}>{count} {children} > ); }

Slide 65

Slide 65 text

付録3: RSC のテストと Presentational/Container Component ※ 時間が余ったら説明します

Slide 66

Slide 66 text

Presentational/Container Component React Server Component のテストと Container / Presentation Separation 概要 Server Component を動作させて、結果の DOM やインタラクションを一気通貫でインテグレーションテス トすることは現状では難しい サーバー側の処理の妥当性と、DOM 描画・操作の妥当性は、それぞれ別のユニットテストとして分離する 「分離」には、Container / Presentation パターンを用いる Container / Presentation: Redux 全盛期に流行した見た目（presentational ）と振る舞い（container ）を 分離するパターン 「hooks 登場以前のモデルだから間に受けないで欲しい」と今では書かれてる RSC は現代における新たなContainer / Presentation になりうると提唱者も言っている quramy さんの以下の記事の要約なので、詳しくは以下を参照ください

Slide 67

Slide 67 text

Presentational Component のテスト Presentational Component のテストは従来通りのテスト方法で問題ない import "@testing-library/jest-dom"; import { screen, render } from "@testing-library/react"; import { ArtistPagePresentation } from "./page"; describe(ArtistPagePresentation, () => { it("renders artist's name", () => { render( ); expect(screen.getByText("John Coltrane")).toBeInTheDocument(); }); });

Slide 68

Slide 68 text

Container Component のテスト Container Component は単なる関数として実行して振る舞いを検証する // ... jest.mock('next/navigation', () => ({ notFound: jest.fn() })) jest.mock('@/prismaClient', () => ({ prisma: jestPrisma.client })) describe(ArtistPage, () => { beforeEach(() => initialize({ prisma: jestPrisma.client })) // ... it('passes fetched data to presentational component for existing id', async () => { const created = await ArtistFactory.create() const { type, props } = await ArtistPage({ params: { artistId: created.id } }) expect(type).toBe(ArtistPagePresentation) expect(props).toMatchObject({ artist: { name: created.name, biography: created.biography, }, } satisfies React.ComponentProps) }) })

Slide 69

Slide 69 text

最後に エンジニアは常に新たな知識を学ばなければならず、限られた時間の中では学ぶ内容の選択が重要（技術選 定の審美眼 by t-wada さん） App Router はReact の新機能を取り入れており、学んだ内容は他のReact フレームワークでも生かすことが できる可能性が高い フロントエンドの進化と未来に興味がある方はぜひ、一緒にApp Router を追いかけましょう！ App Router のすゝめ