Next.js 13.2 で Link に型が付いたので pathpida と比較してみる

こんにちは、上條（mk-0A0） です。

前回書いた入社エントリーでスタバとミスドの新作が食べたいと書いていましたが、無事どちらも達成しました！

現在はローソンの桔梗信玄餅ロールが気になっています。

初っ端から脱線しましたが、 2023年2月24日に Next.js 13.2 がリリースされましたね！

なかでも、Statically Typed Links は話題になっていた印象です。

これは Link に指定する href に型が付くというものなのですが、それによってどう変わるのか、似た役割を提供するライブラリ pathpida とはどう違うのかをこの記事で書いていけたらと思います。

Statically Typed Links とは？

先程も少し触れましたが、Statically Typed Links とは Link に指定する href に string | UrlObject 型が付くというものです。

具体的には href に入る値は存在するディレクトリへのパスのみとなり、それ以外はエラーが起きるようになります。

なぜ href に型が付くと嬉しいの？

従来の Link の href は存在しない URL を指定してもエラーが起こらず、ちゃんと存在するページに遷移するのかが分からない状態でした。

型が付くということは開発中にコード上でエラーに気づけるという恩恵があるので、チェックのためにすべてのリンクを片っ端から確認したり、リリース後にリンクが効いてない！と慌てて修正することも無くなりそうです。

使い方

ひとつ注意点ですが、2023年3月3日時点でこの機能はベータ版となっているため、プロジェクトへの導入は様子を見た方が良さそうです。

next.config.js に typedRoutes: true を追加します。

const nextConfig = {
  experimental: {
    appDir: true,
    typedRoutes:true
  },
}

appDir が有効になっていないと使えない機能なので、プロジェクト作成時に聞かれるタイミングで有効にするのをお忘れなく。

設定はこれだけなので、実際に Link を使ってみます。

import Link from 'next/link'

export default function Home() {
  return <Link href='/about'>link</Link>
}

about ページを作成していないため TS2322: Type ‘string’ is not assignable to type ‘never’. と怒られてしまいますが、実際に app 配下に about ディレクトリを作成するとエラーが消えます。

pathpida を使って型安全な URL を指定する

「使い方」の冒頭でも書いた通り、型の付いた Link はまだベータ版の機能のため実務には向きません。

なので代替として、v13.2 以前のプロジェクトでよく使われている pathpida というライブラリを紹介したいと思います。

pathpida とは、Link や Image で使用するパスの型を生成してくれるライブラリです。

導入は簡単で、公式ドキュメントに沿ってライブラリをインストールし、 package.json の script に pathpida を動かすコマンドを追記します。

コマンドを叩くと型定義された $path.ts が生成されるので、あとはサンプルコードのように使うだけです。

import { pagesPath } from '@src/lib/pathpida/$path'

export default function Home() {
  return (
    <>
      // localhost:3000/ に遷移
      <Link href={pagesPath.$url()}>
        home
      </Link>

      // localhost:3000/blog/ に遷移      
      <Link href={pagesPath.blog.$url()}>
        blog
      </Link>

      // localhost:3000/blog/1/ に遷移
      <Link href={pagesPath.blog._id(1).$url()}>
        blog detail
      </Link>
    </>
  )
}

手軽に導入でき型安全で大変使いやすいのですが、href 自体に型が付く訳ではないため href='/about' のように静的に存在しないページを指定してもエラーは起きません。

そのため、プロジェクト内で実装方針を擦り合わせておく必要があります。

まとめ

v13.2 でアップデートされた Link は魅力的ですが、やはりベータ版の機能なので実務でガシガシ使えるものではないところが惜しく感じました。

一方 pathpida は Link だけでなく Image の型定義もできるため、個人的にはもうしばらく pathpida のお世話になりそうです。