Next.js ページ遷移Linkを使ってみよう
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に切り替わることができたと思います!
関連記事
React チュートリアル 手を動かして学習 入門
私がReactを初めて学習した際に、学習した内容についてまとめました。 Reac ...
Next.js APIを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Ne ...
Next.js チュートリアルから始める
こんにちは、Yuuichi(@WestHillWorker)です。 今回はRea ...
Next.js 動的なページを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Li ...
Next.js getInitialPropsでページの非同期処理を学ぶ
こんにちは、Yuuichi(@WestHillWorker)です。 今回は前回作 ...