▲ Next.jsチートシート
| 機能 | 用途 | 例 |
|---|---|---|
| App Router | ファイルベースルーティング | app/about/page.tsx → /about |
| Server Components | サーバーで描画（デフォルト） | async function Page() { const data = await fetch(...) } |
| Client Components | クライアントで描画 | "use client" をファイル先頭に記述 |
| generateStaticParams | 動的ルートの静的生成 | export async function generateStaticParams() {...} |
| loading.tsx | ローディングUI | app/loading.tsx → Suspense fallback |
| error.tsx | エラーバウンダリ | "use client" + Error component |
| layout.tsx | 共通レイアウト | app/layout.tsx → 全ページに適用 |
| middleware | リクエスト前処理 | middleware.ts → 認証チェック、リダイレクト |
| Route Handlers | APIエンドポイント | app/api/users/route.ts → GET/POST |
| next/image | 画像最適化 | |
| next/font | フォント最適化 | const inter = Inter({ subsets: ['latin'] }) |
| Metadata | SEOメタデータ | export const metadata = { title: '...' } |
| revalidate | ISR（増分静的再生成） | export const revalidate = 3600 // 1時間 |
| redirect | リダイレクト | redirect('/login') |
| cookies | Cookie操作 | cookies().get('token') |
| headers | リクエストヘッダー取得 | headers().get('authorization') |
| useRouter | クライアントナビゲーション | const router = useRouter(); router.push('/home') |
| usePathname | 現在のパス取得 | const pathname = usePathname() |
| useSearchParams | クエリパラメータ取得 | const params = useSearchParams() |
| Link | クライアントサイド遷移 | About |
| dynamic import | コンポーネント遅延読み込み | const Heavy = dynamic(() => import('./Heavy')) |
| Parallel Routes | 同時に複数スロット描画 | app/@modal/page.tsx + app/layout.tsx |
| Intercepting Routes | モーダルルーティング | app/(.)photo/[id]/page.tsx |
| Server Actions | サーバー側関数呼び出し | "use server" + form action |
| Caching | データキャッシュ制御 | fetch(url, { cache: 'no-store' }) |
📖 関連する用語
❓ よくある質問
Next.jsチートシートはどんな人向け？
Next.js初心者〜中級者向け。App Routerの基本機能を網羅しています。
Pages RouterとApp Routerの違いは？
App Routerが最新で推奨です。Server Componentsやレイアウトのネストが特徴です。
印刷して使える？
はい。印刷に最適化されたレイアウトで出力されます。
⚠️ よくあるエラー
- useRouter only works in Client Components
- Dynamic server usage — 静的ページで動的API使用