ページのルーティングとファイル名の関係

本チャプターではNext.jsのページの追加について学んでいきます。
ページ追加にはNext.jsのルーティング機能を使用します。 Next.jsのルーティング機能についてはレッスン1 チャプター2「Next.jsとReactの違い-ルーティング」でも学びましたが、軽くおさらいしていきましょう。
Next.jsではFile System Based Routingという便利な仕組みがありこの仕組みを使用して
ページ追加を実装していきます。 この仕組みはpagesディレクトリにJavaScriptファイル(XXX.tsx)を作成するのみで自動で ルーティングが設定されるというものです。
詳しくは下記で例を記述します。

例(開発用サーバの場合)

pages/index.tsx →http://localhost:3000/でアクセスできる。

pages/about.tsx →http://localhost:3000/aboutでアクセスできる。

pages/sample/nest.tsx →http://localhost:3000/sample/nestでアクセスできる。

例の様な設定をどこかのファイルに記述するのではなくNext.jsのプロジェクトがpages以下のディレクトリ構造を認識し 自動で設定してくれるのです。
とても便利な仕組みですので是非マスターしましょう。

追加ページの作成

追加ページのファイル名をabout.tsxとし、Next.jsのルーティング機能を使用するためにpagesディレクトリの下にabout.tsxファイルを作成します。
index.tsxと同様に下記のコードを記述します。h1タグの中身と関数名のみ変更しています。

pages/about.tsx

const About = () => {
return (
  <h1>About Page</h1>;
  )
}

export default About

表示確認

ブラウザでhttp://localhost:3000/aboutページにアクセスすると以下の様にAbout Pageが表示されます。

Next.jsを利用するとルーティングの設定を行うことなく簡単にページを作成することができることが確認できました。
ここまでの設定では"/"(index.tsx)と/aboutページ以外にアクセスを行うと404エラーが表示されることも確認できます。

pagesディレクトリ内にさらにディレクトリを作成しその下にtsxファイルを作成した場合の動作も確認しておきます。 まずpagesの下にsampleディレクトリを作成し、nest.tsxファイルを作成します。

pages/sample/nest.tsx

const Nest = () => {
  return (
    <h1>ネストルーティング</h1>;
    )
  }
  
  export default Nest

nest.tsxファイルを作成後にhttp://localhost:3000/sample/nestにアクセスするとnest.tsxファイルの中身が表示されます。 このようにページの階層化も簡単に行うことができます。
/sample/nestの形はNested Routes(ネストルーティング)と呼ばれます。
本チャプターでは新規ページの作成について学びました。 次チャプターでは本チャプターで作成したabout.tsxにindex.tsxから遷移する為に必要な「リンクコンポーネント」というものを解説します。

Linkコンポーネントとは

index.tsx, about.tsxとsampleの下にnest.tsxファイルを作成しましたが、 作成した各ページに対してリンクの設定を行っていないためページを移動するためにはブラウザのURLを手動で書き換える以外に方法がありません。
リンクを利用してページ移動ができるように「Linkコンポーネント」というコンポーネントの設定を行っていきましょう。

Linkコンポーネントを使用しページ遷移の実装

Linkコンポーネントの使い方

index.tsxが表示されるルートページからaboutページへの移動を行うためLinkコンポーネントを利用します。 Linkコンポーネントはnext/linkからインポートし、 Linkタグの中で移動したいページをhref propsを利用して設定します。
それでは実装していきましょう。

実装

index.tsx

import Link from "next/link";

const Hello = () => {
  return (
    <div>
      <ul>
        <Link href="/about">
          <li>About</li>
        </Link>
      </ul>     
      <h1>Hello World</h1>
    </div>
  );
};

export default Hello;

ブラウザで確認するとトップページからリンクが貼られたaboutページに移動することが確認できます。 またページを移動する際にページのリロードは行われずスムーズにAboutページの画面が表示されることが確認できますね。

いかがでしたでしょうか？
本レッスンではページの作成と遷移について学んでいきました。 Next.jsでWEBアプリを開発していく上で必須の基礎知識となりますので是非覚えておいてください。