概要
Next.js は Vercel が開発する React ベースのフルスタックフレームワークです。 App Router の導入により、Server Actions・Streaming など React の最新機能を活用した構成が標準になっています。
App Router の基本
app/ ディレクトリ配下にページを配置します。デフォルトでサーバーコンポーネントとして動作し、"use client" を宣言した場合のみクライアントコンポーネントになります。
クライアントコンポーネントはブラウザで ハイドレーション されてからインタラクティブになります。
// app/samples/page.tsx（サーバーコンポーネント）
export default async function SamplesPage() {
const data = await fetchData(); // サーバー側で直接 fetch できる
return <div>{data.title}</div>;
}
データフェッチ
generateStaticParams を使うと、動的ルートを静的生成できます。
export async function generateStaticParams() {
const slugs = getSlugs();
return slugs.map((slug) => ({ slug }));
}
注意点
"use client"はできるだけ末端のコンポーネントに留める- Server Components ではブラウザ API（window / localStorage）は使えない
next/navigationのuseRouterはクライアントコンポーネント限定- 認証状態に応じた redirect は Server Component か Middleware で行う