Next.jsで /neko/tama に対応するページを作る方法

✅ パターン1：tama が固定の場合

/neko/tama のようなURLが毎回決まっている場合、以下のようなディレクトリ構成にします：

app/
└── neko/
    └── tama/
        └── page.tsx
  

これで http://localhost:3000/neko/tama にアクセスすると対応するページが表示されます。

✅ パターン2：tama が動的（変化する値）の場合

URLが /neko/123 や /neko/mike のように毎回変わる場合、動的ルーティングを使います。

以下のような構成になります：

app/
└── neko/
    └── [name]/
        └── page.tsx
  

[name] フォルダ名がポイントで、任意の文字列にマッチします。

📄 page.tsx のサンプルコード

import { useParams } from 'next/navigation';

export default function NekoDetailPage() {
  const params = useParams();
  const name = params.name;

  return (
    <main className="min-h-screen flex items-center justify-center bg-yellow-100">
      <h1 className="text-4xl font-bold text-yellow-700">
        こんにちは、{name}ちゃん！
      </h1>
    </main>
  );
}

🧠 まとめ