はじめに
前回は、Next.jsの公式のチュートリアルの環境構築を行い、実行できるところまで行いました。
今回は、Next.jsのページ遷移のチュートリアルを進めたいと思います。
まとめ
- Next.jsでは、ルーティング設定を設定する必要がない
- Next.jsでは、ページ遷移にLinkコンポーネントを使うことでClient-Side Navigationを実現
- URLを切り替えてもページ再読み込みが発生しないので高速
- クライアントの状態を保って、ページ遷移させることができる
どのチュートリアル？
Next.jsの公式チュートリアルのNavigate Between Pagesを学習します。
- Create a new page using the integrated file system routing.
- Learn how to use the Link component to enable client-side navigation between pages.
- Learn about built-in support for code splitting and prefetching.
このチュートリアルでは、下記について学ぶことができます。
- 統合ファイルシステムルーティングを使用して新しいページを作成方法
- Linkコンポーネントを使用してページ間のクライアント側ナビゲーションを有効にする方法
- コード分割とプリフェッチの組み込みサポートについて
ファイルシステムルーティングとは?
ファイルシステムルーティングは、Next.js独自のルーティング方法です。
ページは、ファイル名に基づいてルートに関連付けられます。
たとえば、
pages/index.jsにページがあるとすると/ にルーティングされます。
pages/posts/first-post.js にページがあるとすると/posts/first-postにルーティングされます。
React Routerを使っているときは、ルーティング設定を記載する必要があったので、設定を書かなくても自動的にルーティングしてくれるのは便利ですね！
早速やってみよう！
新しいページの作成
pagesフォルダの配下にfirst-post.jsを作成し、<h1>First Post</h1>を返すコードを書きます。
Create the posts directory under pages.
Create a file called first-post.js inside the posts directory with the following content:
export default function FirstPost() {
return <h1>First Post</h1>;
}
$ npm run devで実行し、http://localhost:3000/posts/first-post にアクセスします。
First Postと表示されました。ページ作成簡単ですね！
ページ遷移してみよう
Next.jsでは、ページ遷移のLinkコンポーネントを使います。
Linkコンポーネントを使うことで、ページの再読み込みをせずに画面遷移することができます。
↑ Client-Side Navigationという
ページ遷移をしたいページにLinkコンポーネントimportします。
import Link from 'next/link';
下記のような感じに、aタグをLinkコンポーネントで囲ってあげます。
// before
<h1 className="title">
Learn <a href="https://nextjs.org">Next.js!</a>
</h1>
// after
<h1 className="title">
Learn
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>
Client-Side Navigationってなあに？
Client-Side Navigationとは、 JavaScriptを使用してページ遷移が発生すること。
URLを切り替えてもページ再読み込みが発生しないので、Client-Side Navigationは、ブラウザによって実行されるデフォルトのナビゲーションよりも高速です。
Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browse
また、クライアントの状態を保って、ページ遷移させることができることができます。
チュートリアルでは、developer toolsでTOPページの背景を黄色にして、ページ遷移させても背景黄色の状態であることを確かめるチュートリアルがあります。
TOPページの背景をdeveloper toolsで黄色にする
ページ遷移しても、背景は黄色のまま
