Next.jsとルーティング — 複数画面の考え方

ReactにNext.jsは何を足すのか

Reactは「画面の部品を作る」道具です。とても優秀ですが、それだけでは足りないものがあります。たとえば「/about を開いたらこのページ、/blog を開いたらあのページ」という画面の切り替え(ルーティング)や、サーバー側でデータを取ってくる機能です。これらをまとめて用意してくれるのがNext.js(ネクストジェイエス)というフレームワークです。

たとえるなら、Reactは「エンジン」、Next.jsは「エンジンを積んだ車体一式」です。エンジン単体では道を走れません。ハンドル(ルーティング)、燃料系(サーバー機能)、車体(ビルドや配信の仕組み)がそろって、はじめて公道を走れる1台になります。実務でReactを使うとき、その多くはNext.jsの上で動いています。

// 部品(コンポーネント)は作れる
function About() {
  return <h1>会社について</h1>;
}
// でも「/about で表示する」仕組みは別途用意が必要

// app/about/page.tsx を置くだけで /about になる
export default function About() {
  return <h1>会社について</h1>;
}

ファイル = ページ という発想

Next.jsの現在の標準(App Router)では、フォルダの構造がそのままURLになります。app というフォルダの下に page.tsx を置くと、それが1つのページになります。フォルダ名がURLの一部です。この「ファイルを置く場所がURLを決める」という発想さえつかめば、複数画面のサイトの地図が頭に描けます。

• app/page.tsx → /(トップページ)
• app/about/page.tsx → /about
• app/blog/page.tsx → /blog
• ページの中身は、これまで学んだReactコンポーネントそのもの

画面から画面へ移動するときは、a タグの代わりに Link という部品を使います。Link を使うと、ページ全体を読み込み直さずに必要な部分だけ差し替わるので、切り替えが速く、体感がなめらかになります。これがSPA(シングルページアプリケーション)の考え方です。

import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">ホーム</Link>
      <Link href="/about">会社について</Link>
      <Link href="/blog">ブログ</Link>
    </nav>
  );
}

まとめると、Next.jsはReactに「ルーティング・サーバー機能・配信の仕組み」を足したフレームワーク。app の下に page.tsx を置けばページになり、移動は Link で行う。この地図を持てば、複数画面のサイト全体が見通せます。