【Next.js/TailwindCSS】<Link>コンポーネントを用いることで得られる利点を理解する | Next.js Tutorial #5 - Navigating Between Pages

<Link>コンポーネントを用いよう

• アプリケーションの中でページ間をリンクする際に<Link>コンポーネントを用いることが出来る。
• LinkはJavaScriptを用いてクライアントサイドナビゲーションを使った画面遷移をユーザーに許可することが出来る。

実際にコードを書いてみよう

• /app/ui/dashboard/nav-links.tsxを開く
• next/linkコンポーネントからLinkコンポーネントをインポートする
• 最後に<a>タグから<Link>タグに置き換える

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
+ import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
+         <Link
+          key={link.name}
+            href={link.href}
+            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
+          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
+          </Link>
        );
      })}
    </>
  );
}

• 自分の環境は（コード移植前と比較して）あまり効果を実感できなかったが、このLinkコンポーネントを採用することには次のような利点がある:
  • 画面遷移をする際に画面の更新を挟むことなくレンダリングを完了することができる。

コード分割化とプリフェッチ

• Next.jsは画面遷移の速度を高速化させるために以下のことを実現している:

  • ナビゲーション体験を向上させるために、Next.jsはルート部品ごとにアプリケーションのコードを自動で分割する特徴があり、従来のReact SPAとは異なり、最初のページがロードされた際にブラウザは全てのアプリケーションコードを読む。

  • ルーティングごとにコードを分割することは、ページが疎になることを意味している。これは、もし特定のページがエラーを返したとしても、残りのページはそのまま動作を続けるということである。これもまた、アプリケーションの動作速度を早くするために、ブラウザにパースするためのコードを減らすからである。

  • そのうえ、production段階では、<Link>コンポーネントはブラウザのビューポートの中で表示された時にいつでも、Next.jsはバックグラウンド処理の中でリンクされたルーティングについて、自動的にプリフェッチすることが出来る。

  • ユーザーがリンクをクリックするまでに、目的地のページのコードはバックグラウンド処理の中で既にロードされている。

所感

• 従来の<a>タグでは無し遂げられなかったことをやってるNext.jsは普通にすごいなと思ってしまいました。私はエンタメ領域のプロダクト開発をする機会が多く、画像を盛り込みがちなサービスを実装する機会が多いのですが、画面遷移する際にロード時間を爆速で減らせるのであれば非常に助かるなと思いました。

参考