【Everyday Next.js】7. Linking and Navigating

nextjs

Linking and Navigating

画面遷移の方法

nextjs.org

Next.js には、<a>タグを拡張した組み込みコンポーネントの<Link>がある。

基本的には<a>タグと同じように使ってあげれば良い。

import Link from 'next/link';

export default function Page() {
  return <Link href='/dashboard'>Dashboard</Link>;
}
useRouter()

また、useRouter()フックを使って、ルートを変更することもできる。こちらはクライアントコンポーネントでしか使えない。基本的には<Link>コンポーネントの使用を推奨。

'use client';

import {useRouter} from 'next/navigation';

export default function Page() {
  const router = useRouter();

  return (
    <button type='button' onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  );
}

<Link>やuseRouter()を使うメリット

nextjs.org

<Link>などを使うことで、プリフェッチやキャッシュや部分レンダリングあたりをよしなにしてくれるらしい。

まだ experimental の機能ではあるが、ルーティングに対して型をつけてくれるStatically Typed Linksという機能がある。

next.config.jsに設定を追加することで有効になる。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
};

module.exports = nextConfig;

例えば、/ と/parent と/parent/child ページが存在するとき、Link の href に["/", "/parent", "/parent/child"]以外のパスを与えようとすると、エラーが出る。

なんなら入力補完が効く。

experimental ではあるが、便利な機能なのでぜひ使っていきたい。

おわりに

今回は、Next.js の画面遷移について見ていった。

次回は、ダイナミックルーティングなど。