Next.jsで、たった3行で型安全なルーティングを行う

はじめに

主に、routerやLinkコンポーネントなどでパスを指定するとき、以下のような問題に悩まされていませんか？

• パス指定を手動で書くのがめんどくさい
• パス指定をするとき、タイピングミスで間違ったパスを指定してしまった
• 開発途中でページのパス変更が必要になったが、パスの変更漏れが起きてしまった

こんな問題が、たった3行の記述で解決されます。

※app routerのみで使える機能です。

どんな機能？

パスに型補完が効く

こんな感じでパスに補完が効くので、めちゃ楽にパスの指定ができます。

型エラーで怒られる

存在しないパスを設定すると、型エラーで怒ってくれます。

設定方法

next.config.ts

以下を追記します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { // 追記
    typedRoutes: true, // 追記
  }, // 追記
};
 
module.exports = nextConfig;

next build or next devをする

next build or next devをすると、アプリケーション内のディレクトリ構造を見て、nextが自動でルーティングの型を生成してくれます。

npm run devで、ターミナルで以下が出たら、正しく設定されています。

使ってみる

使ってみたください。存在しないパスを設定すると、ちゃんと怒られますし、補完が効いてます。

終わり

まだexperimentalではありますが、こんだけ楽に設定できてかつ、パス指定で悩んでいたことが解決されるめちゃ良いものだと思います〜！

型安全にできると気持ちいいですね！

皆さんも使ってみてくださいね。

Twitter(X)も見ていただけると嬉しいです。
https://twitter.com/yuu_a_prog