ReactとNext.jsを理解する
そもそも
React と Next.jsを使用する際の開発手法をまとめる。
React基礎
React公式ドキュメントは随所に挟まれる「Deep Dive」や「Pitfall」の内容が特に学びが多い。
- コンポーネントを純粋に保つ
- state の保持とリセット
- state ロジックをリデューサに抽出する
- コンテクストで深くデータを受け渡す
- ref で DOM を操作する
- そのエフェクトは不要かも
- リアクティブなエフェクトのライフサイクル
- hydrateRoot
- 組み込みの React フック
React 19
React Server Components(RSC)
- Server Components
- 'use client'
- Understanding React Server Components
- Why do Client Components get SSR'd to HTML?
- 一言で理解するReact Server Components
- Reactチームが見てる世界、Reactユーザーが見てる世界
Next.js
- Caching in Next.js
- Server Components
- Client Components
- Route Segment Config
- Authentication
- Building APIs with Next.js
- Common mistakes with the Next.js App Router and how to fix them
- How to Think About Security in Next.js
- How we optimized package imports in Next.js
- next.js/examples
- Next.jsの考え方
Next.js 15
App Routerへの移行
- App Router Incremental Adoption Guide
- Next.js 15.1にてPages RouterでもReact 19がサポートされ、漸次的にApp Router化する際に一貫してReact 19を使用できるようになった。
- ブログサイトを Next.js App Router に移行したので学びを書く
Vercel
- Behind the scenes of Vercel's infrastructure: Achieving optimal scalability and performance
- Why does my Serverless Function work locally but not when deployed?
- How can I use files in Vercel Functions?
- VercelのBlogやGuidesは、Vercel特有の情報だけでなく、痒いところに手が届くReactやNextの実装方法なども掲載されており有益。
Client Componentsを理解する
- Client Componentsとは、あくまでも二段階仕掛けのReactコンポーネントツリーのうちの一つを指し示す概念であり、クライアントサイドでのみ実行されるコンポーネントを意味しない。
- その証拠に、主なReact Hooks（
useState、useReducer、useMemo、useCallback、useRefなど）は、Client Componentsでのみ使用可能だが、SSR時（ビルド時・リクエスト時）にも実行され、その結果はクライアントサイドでの初回レンダリング時に初期値となる。 - そのため、Static Renderingされるページでは、クライアントサイドでの初回レンダリング時の初期値が、ビルド時に計算された値になる（クライアントサイドで最新化されない）。
- 日付や時刻など、サーバーサイドとクライアントサイド、またはビルド時とリクエスト時で、値が異なりうるデータを扱う際には特に注意が必要。
- クライアントサイドでのみ処理を実行したい場合は、
useEffectを使う。 - Server Componentsはサーバーサイドでのみ実行される。
- Next.jsのレンダリング方式
'use client' function ClientComponent() { // Runs during SSR, state is serialized and sent to client const [count, setCount] = useState(0) // Runs during SSR, value is computed and serialized and sent to client const expensiveValue = useMemo(() => computeExpensive(), []) // Runs only after hydration on client useEffect(() => { document.title = `Count: ${count}` }, [count]) return <div>{expensiveValue}</div> }'use client' function ClientComponent() { // Runs during SSR, state is serialized and sent to client const [count, setCount] = useState(0) // Runs during SSR, value is computed and serialized and sent to client const expensiveValue = useMemo(() => computeExpensive(), []) // Runs only after hydration on client useEffect(() => { document.title = `Count: ${count}` }, [count]) return <div>{expensiveValue}</div> }