Next.jsを少しずつ理解していく5【ナビゲーション】

今回は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)について紹介します。

それでは!

 

コメントを残す

CAPTCHA