【Next.js】バージョン13のAppRouterでサイト内ページ遷移をする方法

Next.jsでポートフォリオサイトを作成している際に、AppRouterでサイト内ページ遷移を実装したので、そのやり方をまとめました。

開発環境

Next.jsバージョン：14.0.3
エディター：Vs Code

Next.jsのアプリを作成する

まずはNext.jsのアプリを作成します。オプションでApp Routerを選択してください。

npx create-next-app@latest

Next.jsアプリを起動する

作成したNext.jsのプロジェクトにcdで移動し、npm run devで起動します。

cd 作成したアプリ名
npm run dev

ブラウザでhttp://localhost:3000/にアクセスし、Next.jsのロゴマークが表示されれば起動完了です。

samplePageディレクトリにpage.jsxを作成

次にsrc/appディレクトリ配下にsamplePageディレクトリを作成し、samplePageディレクトリにpage.jsxを作成します。page.jsxがページ遷移後の画面です。ファイル名はpageにすることで、AppRouterのルーティング機能が使えるようになり、画面表示ができます。

my-test-app
∟src
 ∟app
  ∟samplePage
   ∟page.jsx

samplePageディレクトリのpage.jsxを編集

page.jsxの中身を下記の通り編集します。今回はページ遷移をしたいだけなので、Hello Worldのテキストのみの簡単な実装にしています。

import React from 'react'

const page = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  )
}

export default page

appディレクトリのpage.jsxを編集

appディレクトリ配下のpage.jsxを下記の通り編集します。

import Image from 'next/image'
import styles from './page.module.css'
import NextLink from 'next/link'

export default function Home() {
  return (
    <main>
      <NextLink href="/samplePage">ページ遷移</NextLink>
    </main>
  )
}

上記を解説すると、まずページ遷移するためのnext/linkコンポーネントをimportします。
次にimportしたnext/linkを使って、ページ遷移用のテキストリンクを囲みます。

<NextLink href="/samplePage">ページ遷移</NextLink>

NextLinkのhrefに指定するパスは、ページ遷移先のディレクトリ名を指定します。

my-test-app
∟src
 ∟app
  ∟samplePage
   ∟page.jsx

ページ遷移元の画面を確認します。「ページ遷移」という文字だけが表示されていればOKです。

「ページ遷移」のテキストリンクをクリックし、Hello Worldと表示されたら、ページ遷移が完了です。