今回はNext.jsのナビゲーション機能について紹介します。”Next.jsの”といったものの、ナビゲーション機能の実現にはlinkパッケージを用いるので使い方はReactと同じです。
Next.jsのプロジェクトを作る
（環境構築が完了している人は次章「その①」に進んでください）
Next.jsの環境構築については以下の記事で解説しています。
また、本記事の内容は前回までの記事の内容を前提にしています。
コードやファイル構成について不明点があれば、前回までの記事を参考にしてください。
Next.jsのナビゲーション
まずは、ホームページ（/）からプロダクトページ（/product）へのナビゲーションを作成します。
ナビゲーションには「Link」というパッケージを利用します。LinkはReactやNext.jsに標準的に導入されているパッケージで、通常のHTMLではaタグ（<a></a>）にhrefを記述して他ページにナビゲートするのに対し、Linkパッケージを使う場合はLinkタグ（<Link></Link>）にhrefを記述します。
pages/index.jsファイルを開いてLinkパッケージを読み込み、Productページへのナビゲーションを記述します。href="/product"とした場合はlocalhost:3000/productへのリンクが出力されます。
pages/index.js
//Linkパッケージを読み込む
import Link from 'next/link'
function Home() {
return (
<div>
<h1>Home Page</h1>
<ul>
<li>
//ナビゲーションを記述
<Link href="/product">
<a>Product</a>
</Link>
</li>
</ul>
</div>
)
}
export default Home
これで、localhost:3000を開いて「product」という表示をクリックするとProductページ（/product）へ遷移できるようになります。
また、ProductページにHomeページ（/）へのリンクを用意することで簡単にトップページに戻れるようになります。
/pages/product/index.js
import Link from 'next/link'
function ProductList({productId = 100}) {
return(
<>
//トップページに戻るLinkを記述
<Link href="/">TOP</Link>
<h2>Product Page</h2>
</>
)
}
export default ProductList
useRouterを使ったナビゲーション
あるいは、useRouterを使ってナビゲーションを実装することでLinkでは対応しずらいシーンでページ遷移を実現できます。例えば、ECサイトなどで「注文ボタン（<button>タグ）を押したら注文確認ページに遷移する」などです。
まずはpages/index.jsファイルを開いてuseRouterモジュールを読み込みます。続いて、buttonタグとhandleClick関数を用意し、router.push()関数にパスを追加します。
import Link from 'next/link'
import {useRouter} from 'next/router'
function Home() {
const router = useRouter()
const handleClick = () => {
router.push('/product')
}
return (
<div>
<h1>Home Page</h1>
<ul>
<li>
<Link href="/product">
<a>Product</a>
</Link>
</li>
</ul>
//buttonタグを追加して、onClickにhandleClick関数を指定
<button onClick={handleClick} >Button to Product</button>
</div>
)
}
export default Home
localhost:3000を開いて「Button to Product」ボタンをクリックすると、productページに遷移します。
まとめ
以上でNext.jsのナビゲーション機能の紹介は終わりです。
今回登場したuseRouterやLinkパッケージの使い方については、別記事で詳しく解説予定ですので少々お待ちください。
次回はNex.jsの事前レンダリング（pre-rendering）について紹介します。
それでは！
