● 1. Link を使用する

import Link from 'next/link'

Next.js version 13以降

<Link href="/about">About Us</Link>

Next.js version 12以前

<Link href="/about"><a>About Us</a></Link>

● 2. onClick など、メソッドで画面遷移したい場合は 「useRouter」または「Router」を使用する

useRouter を使用する（こちらがおすすめです）

import { useRouter } from 'next/router';

const router = useRouter();

if (router.isReady) {
  router.push({
    pathname: '/login',
    query: { returnUrl: router.asPath }
  })
}

Router

import Router from 'next/router';

Router.push('/home');  // '/home'へ遷移

・useRouter と Router の違い

useRouter は hooks なので、 実際にルーターのインスタンス を取得したときにre-render されるので以下のコードが正しく実行できます。 Routerの場合は まだインスタンスがないので実行できません。

○ OK

import { useRouter } from "next/router";

  const router = useRouter();
  if (router.isReady) {
    router.push("/login");
  }

× NG

import Router from "next/router";

  if (Router.isReady) {
    Router.push("/login");
  }

● Next.js で 1つ前の履歴に戻る

      <button onClick={() => router.back()}>
        戻る
      </button>