ページとURLの仕組み

1. URLと「ルーティング」

URLは、インターネット上の住所です。たとえば https://example.com/company/access なら、example.com がサイトの住所、そのあとの /company/access が「サイトの中のどの部屋か」を表します。

「このURLが来たら、このページを見せる」という道案内をルーティングと呼びます。Next.jsの App Router では、この道案内をフォルダの並びで決めます。設定ファイルを書く必要はありません。

2. フォルダを作るとページになる

App Routerでは、プロジェクトの中の app というフォルダが、サイトの入り口になります。その中にフォルダを作り、page.tsx というファイルを置くと、それがページになります。

「.tsx」とは何か

ファイル名の最後の .tsx は、TypeScript（タイプスクリプト）という言語で、画面の部品を書いたファイルであることを表します。TypeScriptは、JavaScriptに「この欄には数字しか入らない」といった型（データの種類）のルールを足したものです。入力ミスを事前に見つけやすく、Next.jsでは標準的に使われます。.js や .jsx で書くこともできます。

3. 中身が変わるページ：動的ルート

ネットショップの商品詳細ページを考えてみましょう。商品が1,000個あるとき、1,000個のフォルダを作るのは大変です。

そこで、フォルダ名を [ ]（角かっこ）で囲みます。これを動的ルートと呼びます。

ページの中では「URLの id が 2 なら、2番の商品をデータベースから取り出して表示する」という処理を書きます。ブログ記事（/blog/[slug]）、お知らせ（/news/[id]）なども同じ考え方です。

4. 特別な役割を持つファイル

page.tsx 以外にも、決まった名前を付けると特別な役割を持つファイルがあります。AIや開発者が作ったフォルダを見たときに、意味が分かるようにしておきましょう。

layout.tsx：共通の枠

特に大事なのが layout.tsx です。app/layout.tsx に書いたヘッダーとフッターは、サイトの全ページに表示されます。さらに app/admin/layout.tsx を作れば、管理画面（/admin 以下）だけに左側のメニューを付ける、といったことができます。枠は入れ子にできるのです。

ほかにも、URLに出さずにフォルダを整理するための (グループ名) のように丸かっこで囲んだフォルダもあります。見かけたら「整理用のフォルダだな」と思えば十分です。

5. ページ間の移動：Link

ページからページへ移動するリンクには、Next.jsが用意した Link という部品を使います。

// 「会社概要へ」というリンクを置く
<Link href="/company">会社概要へ</Link>

コードは読めなくて大丈夫です。「href に移動先のURLを書く」とだけ覚えておきましょう。

普通のリンクと違い、Link は画面全体を読み込み直さず、変わった部分だけを差し替えます。さらに、画面に見えているリンク先のページを裏でこっそり先読み（プリフェッチ）しておくので、クリックした瞬間にページが切り替わったように感じられます。