【Next.js】ページ遷移リンク

2022.10.02

Next.jsでのページ遷移リンクの方法についてまとめました。

結論、非常に簡単に作ることができます。

環境

  • Next.js @12.3.1
  • React @18.2.0
目次
  1. リンクの種類
  2. Linkコンポーネントを使用する方法
  3. useRouterを使い、routerオブジェクトのpushメソッドを呼ぶ方法
  4. Link(next/link)とrouter.push(next/router)の違い
  5. ReactのuseNavigateとの違い
  6. まとめ

リンクの種類

Next.jsでのリンクの作り方は2つの方法があります。

  1. Linkコンポーネントを使用する方法
  2. useRouterを使い、routerオブジェクトのpushメソッドを呼ぶ方法

この2通りの方法について紹介します。

Linkコンポーネントを使用する方法

ページ遷移のリンクを作成する際に使用するコンポーネントです。

公式のドキュメントはこちら

Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and mor...
nextjs.org

使い方は簡単

LinkコンポーネントをimportしてJSX内で使用するだけです。

import Link from "next/link";

〜省略〜

  <Link href="/">Back to home</Link>

何が特別なのか？他との違い

Linkコンポーネントはhtmlでは aタグに相当する機能になります。

相当の機能なら別に<a>使えばいいんじゃない？

aタグとLinkコンポーネントの違い

処理の違い

aタグの場合： 遷移先ページのhtmlファイルを取得して描画する。

Linkコンポーネントの場合： クライアントサイドで新しいページを描画する。この新しいページを描画するために必要なデータは予め非同期で取得しているため、ページ遷移が高速となる。

記述の違い

aタグの場合

<a href="/">Back to home</a>

Linkコンポーネントの場合

<Link href="/">Back to home</Link>

aをLinkに置き換えるだけなので超簡単ですね！

もともとは、<a>を<Link>でラップする必要がありましたが、Next.jsのバージョン12.2よりこの記述が不要となりました。

ボタンにスタイルを当てる場合

Linkコンポーネントにはスタイルを当てることができないのでスタイルを当てる場合は、<a>をラップしてそれにスタイルを当てる必要があります。

<a>でなく<button>を使用しても問題なく機能しますが、htmlのルールに倣うのであれば、クリック時にページが遷移するため、<a>を使用するのが望ましいです。SEOの影響も考えられるため<a>とするのが無難でしょう。

※以下はtailwindCSSのスタイルを当てている例です。

<Link href="/">
  <a className="bg-orange-500">
    Back to home
  </a>
</Link>

useRouterを使い、routerオブジェクトのpushメソッドを呼ぶ方法

公式のドキュメントはこちら

Functions: useRouter | Next.js
Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.
nextjs.org
 

import { useRouter } from "next/router";

export const Page = () => {

  const router = useRouter();
  const linkToHome = () => {
    router.push("/");
  };

  return (
    <button onClick={linkToHome} className="bg-orange-500">
      Back to home
    </button>
  )
}

Linkコンポーネントに比べると少し複雑ですね。

ですが、useRouterを使うとページ遷移だけでないありがたい機能を利用することができます。

以下のuseRouterのいろんなメソッドが記載されています。

next/router | Next.js
Next.js の Router API について学び、useRouter フックを利用してページ内のルーターインスタンスにアクセスしてみましょう。
nextjs-ja-translation-docs.vercel.app

例えば、Loading中にLoading中であることを画面表示したい場合に、isFallbackメソッドを使うことで表現できます。

  if (router.isFallback) {
    return <div>Loading...</div>
  }

Link(next/link)とrouter.push(next/router)の違い

前述の通りLinkもrouter.pushもページ遷移ができるということがわかりました。

では同じ機能のこの2つ、どう使い分けるのでしょう？

Next.js公式ドキュメントのrouter.pushのところにはこう書かれています。

クライアント側のページ遷移を処理します。このメソッドは next/link では不十分な場合に役立ちます。

不十分な場合な場合ってどんなときだよ！不親切ですね。。

クライアントサイドでのページ遷移というのはLinkもrouter.pushも同じです。ですのでここに違いは無いです。

不十分は場合というのは、関数内でルーティングを設定する場合です。

具体例を挙げるとすると、ボタンクリックでデータを取得し、取得後にページ遷移させる場合でなどです。ここでLinkは使用できません。

ReactのuseNavigateとの違い

これまで見てきた通り、Next.jsでのリンクはめちゃくちゃ簡単につくれることがわかります。

どれくらい簡単になっているか、ReactのuseNavigateを例に比べてみます。

以下は、useNavigateを使ってルートパスに遷移する実装です。

react-router-domをinstallする。

% yarn add react-router-dom

import { useNavigate } from "react-router-dom";

export const Page = () => {
  let navigate = useNavigate();

  const linkToHome = () => {
    navigate("/");
  };

  return (
    <button onClick={linkToHome} className="">
      Back to home
    </button>
  );
};


import { BrowserRouter } from "react-router-dom";
import { Router } from "./Router";

function App() {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
}

export default App;


import { Routes, Route } from "react-router-dom";

import { Home } from "./Home";
import { Page } from "./Page";

export const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/page" element={<Page />} />
    </Routes>
  );
};


import React from "react";

export const Home = () => {
  return <div>Home</div>;
};

リンクをuseNavigateを使って指定しないといけない上に、pathのコンポーネント定義をしないといけないので、Next.jsのLinkに比べるとかなり手間がかかることが分かりますね！

まとめ

Next.jsでのリンク機能作成方法には2通りの方法がありました。

好みの方を使いましょう！

以上、お読みいただきありがとうございました。

コメント