NextJS执行npm run build报错：NextRouter未挂载问题求助

问题场景 #

在NextJS项目的RootLayout组件中引入了带有"use client"指令的Header2组件，该组件原本通过useRouter判断当前路由，为对应导航链接添加CSS类，但执行npm run build时触发「NextRouter was not mounted」错误。

报错信息 #

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types
- info Collecting page data
[==  ] - info Generating static pages (15/16)Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (C:\test\frontend\.next\server\chunks\43.js:6026:15)
    at Header2 (C:\test\frontend\.next\server\app\page.js:544:74)
    at jg (C:\test\frontend\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.edge.production.min.js:117:273)
    at jg (C:\test\frontend\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.edge.production.min.js:123:11)
    at Z (C:\test\frontend\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.edge.production.min.js:124:91)
- info Generating static pages (16/16)

> Export encountered errors on following paths:
        /page: /

解决思路 #

NextJS 13+的App Router体系下，next/router是Pages Router的专属API，在App Router中需使用next/navigation提供的usePathname钩子获取当前路由路径。即使组件添加了"use client"，静态构建阶段服务器仍会预渲染该组件，useRouter在此环境下无法正常初始化，替换为usePathname即可解决问题。

修改后的Header2代码 #

"use client";
import React, { useState } from 'react';
import Link from 'next/link';
// 替换useRouter为App Router的usePathname
import { usePathname } from 'next/navigation';

const navLinks = [
    { href: '/home', label: 'home' },
    { href: '/test', label: 'test' },
];

const Header2 = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const pathname = usePathname();

    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };

    const isLinkActive = (href) => {
        // 用pathname替代router.pathname
        return pathname === href ? 'text-gray-300' : 'text-white';
    };

    return (
        <header className="bg-gray-800 text-white py-4 px-10 md:px-0">
            <nav className="container mx-auto flex items-center justify-between">
                <Link href="/" className="text-2xl font-bold">
                    Site test
                </Link>

                <div className="md:flex md:space-x-4 hidden">
                    {navLinks.map((link) => (
                        <Link key={link.href} href={link.href} className={`p-2 ${isLinkActive(link.href)} hover:text-gray-300`}>
                            {link.label}
                        </Link>
                    ))}
                </div>

            </nav>

        </header>
    );
};

export default Header2;

内容的提问来源于stack exchange，提问作者ilernet