2ステップで実装！Next.js初心者のための画面遷移

#1.はじめに
Next.jsを使い始めると「画面遷移処理ってどうするん？」って思って手が止まる人が多いのではないでしょうか？
なのでこの記事はNextの画面遷移がしっかり扱えるようにまとめておきました。

#2.なぜNext.jsで画面遷移を設定するのか？
まず初めにNextでなぜ画面遷移を設定するのでしょうか？
別に「aタグで記述しておけば、画面遷移するでしょう！」って考える人もいると思いますが実は違いがあるのです。

aタグはHTMLファイルを取得して全画面を表示していますが、Nextは前の画面と比較して異なる部分だけを入れ替えています。
そのため、Nextの画面遷移のほうが軽く、動きが滑らかに感じます。

#3.Next.jsで画面遷移する方法
それでは具体的にNextで画面遷移する方法を見ていきましょう！
Nextで画面遷移する方法は2種類あります。

1. Linkコンポーネントを使う
2. Router.pushを使う

LinkコンポーネントはJSXでHTMLのように記述する方法でRouter.pushはイベントハンドラーなどの処理の中で設定する方法です。
JSXを使うかどうかで使い分けることができ、JSXを使う場合はLinkコンポーネント、イベントハンドラの場合はRouter.pushを使います。

• JSXの場合：Linkコンポーネント
• イベントハンドラの場合：Router.push

##3-1.Linkコンポーネント
Linkコンポーネントはaタグをラップすることで使うことができ、特徴はJSXでタグとして扱えることです。
Linkコンポーネントは2ステップで実装できます。

1. Linkコンポーネントのインポート
2. Linkコンポーネントでaタグを包む

次のソースは、/から/NextPageに遷移する方法です

Linkコンポーネントでの画面遷移

//①Linkコンポーネントのインポート
import Link from "next/link";

export default function Index() (
  <div style={{textAlign: "center"}}>
    <h1>遷移元</h1>
    {/* ②Linkコンポーネントでaタグを包む */}
    <Link href="/NextPage">
      <a>次のページへ進む</a>
    </Link>
  </div>
);

①でLinkコンポーネントを使うために必要なモジュールを取り込み、②でaタグをLinkコンポーネントでラップして遷移先を設定するだけの処理です。
この2ステップでNextでの画面遷移を実装できます。

ちなみにリンクにCSSクラスなどのオプションを設定する場合はaタグに設定します。
例えば、別のタブで画面を開きたいときはtaget属性をaタグに設定します。

aタグにオプションを設定

<Link href="/NextPage">
  <a target="_blank">新しいページを開く</a>
</Link>

##3-2.Router.push
次はRouter.pushで遷移する方法です。
Router.pushは処理の中に埋め込めるので柔軟なページ遷移が可能です。
イベントハンドラなどに実装できるのが特徴で、Router.pushでの実装も2ステップで設定できます。

1. Routerオブジェクトのインポート
2. 遷移先の設定

次のソースは/NextPageから/に遷移するプログラムです。

Router.pushでの画面遷移

//①Routerオブジェクトのインポート
import Router from 'next/router'

export default function NextPage() {
  function clickHandler() {
    //②遷移先の設定
    Router.push('/')
    return
  }

  return (
    <div style={{textAlign: "center"}}>
      <h1>遷移先</h1>
      <button onClick={clickHandler}>前のページへ戻る</button>
    </div>
  );
}

①でRouterオブジェクトをインポートして、②のpushメソッドで遷移するパスを設定しています。
Next.jsのindex.jsは特殊なページで/indexでなくて/でも遷移できます。
また、Pagesフォルダーを基準にパスを設定するので今回の場合だとpagesフォルダーの直下にあるindex.jsファイルのコンポーネントに遷移しています。

#4.まとめ
この記事ではNextで画面遷移する方法を2種類解説しました

・JSXでの画面遷移はLinkコンポーネント
・イベントハンドラーでの画面遷移はRouter.push

画面遷移はNext.jsでもよく使う機能なので覚えていて損はないです。

#5.参考文献
Next.js公式サイト