Next.js ページ遷移Linkを使ってみよう

2020年3月17日2020年9月13日

こんにちは、Yuuichi(@WestHillWorker)です。

前回に引き続きNext.jsについて、今回はページにメニューを追加して、Linkを使った遷移をやっていこうと思います。

前回の続きでやっていきますので、手を動かしたい方は以下よりお試しください。

メニューの作成

メニューはどこでも使いそうなので、componentsフォルダを作ってその配下にファイル作成します。

ファイル作成

$ mkdir components
$ cd components
$ touch Menu.js

Menu.js

import Link from 'next/link';
const linkStyle = {
  margin: 15,
};
const Menu = () => (
  <>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </>
);
export default Menu;

Linkを使って、ページ間のクライアント側のルート遷移を行うことができます。

/にあたるのが、pages/index.js

/aboutにあたるのが、pages/about.jsになります。

各pagesに作成したメニューを読み込む

pages/index.jsにmenu.jsを読み込む。

index.js

import Menu from '../components/Menu';
export default function Index() {
  return (
    <>
      <Menu />
      <p>こちらがHomeページ</p>
    </>
  );
}

<></>はフラグメントと呼ばれる記法の短縮版です。

コンポーネントが複数の要素を返す際に利用します。

about.js追加

遷移先に新しくpages/about.jsを作成します。

about.js

import Menu from '../components/Menu';
export default function About() {
  return (
    <>
      <Menu />
      <p>こちらがAboutページ</p>
    </>
  );
}

ここまででメニューの作成と遷移先ページ作成が完了です。

ブラウザ確認

$ npm run dev

リンクを押すと/aboutに切り替わることができたと思います！