Next.js 15 App Router で開発するときの3つのポイント

Next.js 15 を使った開発の注意点

弊社では Webアプリ開発に Next.js 15（App Router）を採用しています。 従来の Pages Router とは考え方が異なる部分が多いため、開発時に意識している3つのポイントをまとめました。

1. Server Component を優先する

App Router では、デフォルトですべてのコンポーネントが Server Component です。 "use client" を付けるのはインタラクティブな部分（フォーム・状態管理）だけに留め、できる限りサーバーで処理するのがパフォーマンス面で有利です。

// ✅ Server Component（デフォルト）
export default async function Page() {
  const data = await fetchData()
  return <div>{data.title}</div>
}

2. params は必ず await する

Next.js 15 では params が Promise になっています。 await を忘れると型エラーや実行時エラーの原因になります。

// ✅ 正しい書き方
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // ...
}

3. fetch のキャッシュ戦略を明示する

デフォルトのキャッシュ挙動が変わったため、cache や revalidate を明示することで意図しない挙動を防げます。

// 60秒ごとに再検証
const res = await fetch(url, { next: { revalidate: 60 } })

// キャッシュしない
const res = await fetch(url, { cache: "no-store" })

Webアプリ開発についてのご相談はお問い合わせフォームからどうぞ。