NextJS - 构建“npm run build”时出错

Question

我有这个 Header2 组件，我将其包含在我的 NextJS 项目的 RootLayout 组件中

// Header2.js
"use client";
import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

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

const Header2 = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const router = useRouter();

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

    const isLinkActive = (href) => {
        return router.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;

尝试使用“npm run build”构建下一个js时收到的错误如下。

我不太明白我应该做什么，我有一个 RootLayout 组件，其中包含 Header2 组件，它必须是“使用客户端”类型，因为我希望此组件根据活动 URI 添加该 CSS类到相应的按钮。

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: /
PS C:\test\frontend>

我一直在查阅nextjs、google、stackoverflow的文档，但我没有看到解决它的方法。

根布局代码

import React from 'react';
import Footer from "@/app/components/template/Footer";
import './globals.css';
import Header2 from "@/app/components/template/Header2";

export default function RootLayout({ children }: {
    children: React.ReactNode;
}) {
    return (
        <>

            <Header2 />
            <main className="mx-auto">
                {children}
            </main>

            <Footer />
        </>
    );
}

Answer 1

当您在问题中使用标签“nextjs13”时，我想您正在使用新的应用程序目录创建 web 应用程序。在这种情况下，您应该从

useRouter

而不是

next/navigation

导入

next/router

钩子。 这个答案

中的区别更清楚