ひよっこはnext/routerに枕を濡らす

はじめに

今回は Next.js を始めた直後にぶつかった話です。

公式の解説ページにすぐに飛べたので、解決はすぐにしましたがちょっとわなですよね、というお話です。

なにがどうした？

🐤「まずは試しにボタンを押したらページ遷移するようにするぞ！」

🐤「なるほど、useRouter()ってやつでpush()したらいいんだな！」

"use client";

import { useRouter } from "next/router";

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

    return (
        <button type="button" onClick={() => router.push("/")}>
            画面遷移
        </button>
    );
}

🐤「さあ、確認するぞ、ぽちー」

invariant expected app router to be mounted

🐤「……？？？」

おわかりいただけたでしょうか……。

公式のuseRouterのサンプルコードを改めてみて見ましょう。

useRouter

"use client";

import { useRouter } from "next/navigation";

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

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

概ね流れは同じだと思います。
が、import をよく見てみてください。

next/routerではなく、next/navigationを使うのが正しかったのです……！！

エラー文で検索をかけるとすぐに Next.js 公式のページを見つけられました。

NextRouter was not mounted

おわりに

next/routerとnext/navigationが候補にあったので、next/routerを選んでしまったことによるエラーでした。

🐤「2 個出てきたな……。next/routerとnext/navigation……useRouterだしnext/routerかな？違ったら分かるし、ぽちー」

🐤「お！ エラー出ないしこっちであってたみたい！ やったー！」

という流れで完全に術中に陥りました。

VSCode の候補でnext/routerが並ぶと名前が近いのでそっちを選んじゃう、あるあるだと思います！

参考

• useRouter
• NextRouter was not mounted