Next.jsで app/users/[id]/page.tsx を作成した。この状態でブラウザから /users/123 にアクセスするとどうなる？

解説

正解は「正常に画面が表示される」です。普通に考えると「フォルダ名に [] などの記号を使うなんてエラーになりそう」とか「どこかで /users/:id のようなルーティングの設定を書かないといけないのでは？」と思いますよね。しかし、Next.jsではこの状態ですでに /users/123 や /users/abc といったURLで正常に画面が表示されます。設定ファイルが不要な「ファイルベースルーティング」Next.jsの最大の特徴の1つが、ファイルシステムベースのルーティングです。React単体で開発する場合、react-router-dom などを導入して「このURLが来たらこのコンポーネントを表示する」という設定ファイルを書く必要があります。一方Next.jsでは、「フォルダとファイルの配置」がそのまま「URL」になります。app/about/page.tsx を作れば自動的に /about というURLが誕生するのです。カッコ [] が意味する「動的ルーティング」では、ユーザーのプロフィール画面のように「ユーザーごとにIDが変わるURL」を作りたい場合はどうするのでしょうか？全ユーザー分のフォルダを手作業で作るわけにはいきません。そこで登場するのが、フォルダ名を [] で囲むDynamic Routes（動的ルーティング）という仕組みです。app/users/[id]/page.tsx とすることで、[id] の部分が「どんな文字列でも受け付ける変数」として機能します。受け取ったIDを画面に表示するには？アクセスされたURLのID（今回の場合は 123）をコンポーネント内で使いたい場合は、page.tsx の引数（props）から params として受け取ることができます。export default function UserPage({ params }: { params: { id: string } }) { return <div>ユーザーID: {params.id}</div>; }直感的には少し気持ち悪いフォルダ名かもしれませんが、これがNext.js開発の強力なスタンダードです。この仕組みのおかげで、ルーティングの管理が劇的に楽になります。