Next.js 開発Tips

App Router の基本

Next.js 13以降で導入されたApp Routerは、ファイルシステムベースのルーティングを提供します。

フォルダ構成

app/
├── page.tsx          # / ルート
├── about/
│   └── page.tsx      # /about
└── blog/
    ├── page.tsx      # /blog
    └── [slug]/
        └── page.tsx  # /blog/:slug

Server Components

デフォルトでServer Componentとして動作します。

// これはServer Component
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{/* ... */}</div>;
}

Client Components

'use client' ディレクティブで明示的に指定：

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}