Next.jsとTypeScriptでLink・Routerの型を安全に扱う方法を徹底解説

TypeScriptでLinkやRouterを使う際の型の扱い方（Next.js）

先生と生徒の会話形式で理解しよう

生徒

「Next.jsで画面を移動するとき、リンク先を間違えてエラーになるのが怖いです。TypeScriptで防ぐ方法はありますか？」

先生

「ありますよ。TypeScriptを使えば、存在しないページへのリンクをプログラムが事前にチェックしてくれる設定があるんです。」

生徒

「それは便利ですね！どうやって設定して、どんな風にコードを書けばいいのでしょうか？」

先生

「LinkコンポーネントやuseRouterでの型の扱い方を、初心者の方にも分かりやすく順番に解説していきますね！」

1. Next.jsでの画面遷移とTypeScriptの役割

プログラミングにおいて、別のページに移動することを画面遷移（がめんせんい）と呼びます。Next.jsという道具を使ってWebサイトを作るとき、通常は「Link」という部品や「Router」という仕組みを使ってページを切り替えます。

しかし、手動でURLを入力していると、一文字打ち間違えただけで「ページが見つかりません」というエラーになってしまいます。ここで活躍するのがTypeScript（タイプスクリプト）です。TypeScriptは、プログラムの中の文字や数字が正しい種類（型）であるかを厳しくチェックしてくれる監督のような存在です。

最新のNext.jsでは、アプリ内にあるページを自動的に型として登録し、存在しないURLを指定しようとすると、実行する前に赤線で警告を出してくれる機能があります。これを活用することで、リンクミスによるバグを劇的に減らすことができるようになります。

2. 型安全なリンクを実現する設定（Typed Routes）

まず最初に、Next.jsでリンクの型チェックを有効にするための設定についてお話しします。この機能はTyped Routes（タイプリルート）と呼ばれます。パソコンを触ったことがない方にとって「設定ファイル」は難しく感じるかもしれませんが、魔法の呪文を一行書き足すだけなので安心してください。

プロジェクトのルート（一番上の階層）にある「next.config.js」という名前のファイルを探して、以下のように記述します。


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

module.exports = nextConfig;

この設定を有効にすると、Next.jsが自動的にアプリ内のファイルをスキャンして、「このURLは存在する」「このURLは存在しない」というリストを作成してくれます。これにより、プログラムを書いている最中にリアルタイムで間違いを指摘してくれるようになるのです。

3. Linkコンポーネントでの型の扱い方

Next.jsで最もよく使われるのが「Link」コンポーネントです。HTMLを知っている方なら「aタグ」のようなものだと考えてください。このLinkコンポーネントにTypeScriptを組み合わせることで、リンク先のURLを安全に管理できます。

例えば、トップページから「about（会社概要）」ページに移動するリンクを作ってみましょう。もし設定が正しければ、href属性（リンク先を指定する場所）に間違った名前を入れるとエラーが出ます。


import Link from 'next/link';

export default function Home() {
  return (
    <div>
      {/* 正しいリンク：/about というファイルが存在する場合 */}
      <Link href="/about">
        会社概要ページへ
      </Link>

      {/* 間違ったリンク：/aboutt と打ち間違えるとTypeScriptがエラーを出してくれます */}
      {/* <Link href="/aboutt">エラーになります</Link> */}
    </div>
  );
}

このように、Linkを使う際は特別な型定義を自分で書かなくても、Next.jsが背後で「Route型」というものを適用してくれます。初心者の方は、まず「Linkコンポーネントのhrefには、存在するファイル名を入れる」ということだけ意識すれば大丈夫です。

4. useRouterを使ったプログラムによる移動と型

ボタンをクリックしたときや、何かの処理が終わった後に自動でページを移動させたい場合は、「useRouter（ユーズルーター）」という仕組みを使います。これをフックと呼びます。プログラミング未経験の方には、「ページ移動を操るリモコン」のようなものだと想像してください。

useRouterを使う場合も、TypeScriptの恩恵を受けることができます。移動先の指定に型を当てることで、安全にジャンプさせることが可能です。


'use client';

import { useRouter } from 'next/navigation';

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

  const handleNavigate = () => {
    // router.push を使ってページを移動します
    // ここでも "/contact" が存在するかチェックされます
    router.push('/contact');
  };

  return (
    <button onClick={handleNavigate}>
      お問い合わせページへ移動
    </button>
  );
}

ここで重要なのは、Next.jsのバージョンによってインポート元が異なる点です。最新のApp Routerを使っている場合は、必ず「next/navigation」からインポートするようにしましょう。これも一つの「型」や「決まり事」の一部です。

5. 動的ルート（ID指定など）での型の注意点

Webサイトを作っていると、「/user/1」や「/user/2」のように、後ろの数字だけが変わるページを作ることがあります。これを動的ルートと呼びます。この場合、URLの型はどうなるのでしょうか。

TypeScriptでは、文字列の中に変数を埋め込む「テンプレートリテラル」という書き方を使います。これを使うときも、Next.jsの型チェック機能は強力にサポートしてくれます。


import Link from 'next/link';

type UserProps = {
  id: string;
};

export default function UserLink({ id }: UserProps) {
  // ` (バッククォート) を使ってURLを組み立てます
  // idが文字列であれば、URLとして正しく認識されます
  const userPath = `/user/${id}` as const;

  return (
    <Link href={userPath}>
      ユーザー詳細を見る
    </Link>
  );
}

「as const（アズ・コンスト）」という言葉が出てきましたが、これはTypeScriptに対して「この文字は変更されない決まったものですよ」と教えるための合図です。これをつけることで、より厳格にリンク先のチェックが行われるようになります。

6. URLパラメータとクエリ文字列の型定義

URLの末尾に「?search=word」といった情報を付け加えることがあります。これをクエリ文字列と呼びます。検索結果ページなどでよく見かけますね。TypeScriptでこれらを扱うときは、オブジェクトという形式で情報を整理することが推奨されます。

Next.jsのLinkコンポーネントでは、hrefの中に直接文字を書く方法以外に、バラバラにした情報を組み合わせて指定する方法もあります。しかし、最近のTypeScript環境では、単純な文字列としてURLを生成し、それを型チェックにかけるのが一般的で初心者にも分かりやすい方法です。


import Link from 'next/link';

export default function SearchLink() {
  const query = "typescript";
  // 検索ワードを含んだURLを作成
  const searchUrl = `/search?q=${query}`;

  return (
    <Link href={searchUrl}>
      「{query}」を検索する
    </Link>
  );
}

複雑なURLになればなるほど、打ち間違いの可能性が高まります。TypeScriptを使っていれば、そもそも「URLの形がプログラムとして正しいか」を常に監視してくれるので、安心して開発を進めることができますね。

7. 型エラーが出た時の対処法と読み解き方

TypeScriptを使っていると、画面に英語の難しいメッセージが表示されることがあります。これは「エラー」ではなく、プログラムがあなたを助けようとしている「アドバイス」だと捉えましょう。リンク関連でよく出るのは「Argument of type string is not assignable...」といったメッセージです。

これは簡単に言うと、「指定されたURLは、登録されているページのリストの中にありませんよ！」と教えてくれているのです。対処法は以下の3つです。

ファイル名の確認： appフォルダの中に、正しい名前でフォルダやファイルが作られているか確認しましょう。
スペルチェック： /about を /abaut と書いていないか、一文字ずつ見てみましょう。
保存と再起動： 新しくファイルを作った直後は、TypeScriptがまだ気づいていないことがあります。ファイルを保存したり、開発サーバーを再起動したりしてみましょう。

プログラム未経験の方は、エラーが出ると「壊してしまった！」と驚くかもしれませんが、TypeScriptが赤線を出してくれている間は、まだ公開前の安全な状態です。一つずつヒントを読み解いていけば、必ず解決できます。

8. 検索エンジンに好まれるリンクの作り方

最後に、SEO（検索エンジン最適化）の視点についても触れておきます。TypeScriptで型をしっかり定義して壊れないリンクを作ることは、実はGoogleなどの検索エンジンにとっても嬉しいことです。なぜなら、リンク切れのないサイトは「信頼できる質の高いサイト」と評価されやすいからです。

また、Linkコンポーネントを使うことで、Next.jsはページを表示する前に移動先のデータを読み込んでくれる「プリフェッチ」という機能が働きます。これにより、ユーザーは一瞬でページが切り替わる快適な体験ができます。快適なサイトは滞在時間が長くなり、結果として検索順位にも良い影響を与えます。

技術的な「型」の知識を身につけることは、単にエラーを防ぐだけでなく、世界中の人にあなたのブログやサイトを見てもらうための第一歩なのです。最初は難しく感じるかもしれませんが、毎日少しずつコードを書いて、型のある開発に慣れていきましょう。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。