Next.js客户端导航遇404：仅能访问根路径求助

问题描述 #

刚创建了一个新的Next.js项目，实现客户端导航功能时，仅能访问根路径（/）。点击导航栏的Portfolio（/portfolio）和CV（/cv）按钮时，均出现404页面未找到错误。

相关代码文件 #

Layout.js #

import "../styles/globals.css";

export const metadata = {
  title: "Julien Claerhout",
  description: "Julien Claerhout portfolio",
  favicon: "../public/favicon.ico",
};

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  );
}

page.js（根路径） #

import Home from './home';

export default function Page() {
  return <Home />;
}

home.js #

import Image from "next/image";
import Nav from './nav';

function Home() {
  return (
    <div className="flex flex-col bg-white overflow-auto">
      <div className="h-screen flex flex-col">
        <div className="h-1/5 flex items-center justify-center">
          <Nav />
        </div>
        <div className="h-4/5 flex flex-row">
          <div className="w-2/3 flex items-center justify-center">
            <Image className="rounded-full" src="/images/me.jpg" alt="Julien Claerhout" width={400} height={400} />
          </div>
          <div className="w-2/3 flex items-center">
            <div className="text-center">
              <h1 className="text-8xl font-zen-bold text-darkgreen">Julien Claerhout</h1>
              <p className="text-4xl font-zen-black text-darkgreen">IT student</p>
            </div>
          </div>
        </div>
      </div>
      <div className="px-8 py-4">
        <h2 className="text-4xl font-zen-bold text-darkgreen mb-4">About Me</h2>
        <p className="text-lg text-darkgreen">
          // Ajoutez ici le texte de votre choix
        </p>
      </div>
    </div>
  );
}

export default Home;

nav.js #

import Link from "next/link";

function Nav() {
    return (
        <nav>
            <Button href="/">Acceuil</Button>
            <Button href="/portfolio">Portfolio</Button>
            <Button href="/cv">CV</Button>
        </nav>
    );
}

function Button({ href, children }) {
    return (
      <Link href={href}>
        <button className="m-2 w-24 h-12 rounded-3xl text-lg font-zen-bold bg-lightgreen transform transition-transform duration-500 hover:scale-110">
          {children}
        </button>
      </Link>
    );
}

export default Nav;

当前目录结构 #

问题原因与解决方案 #

你使用的是Next.js App Router路由模式，该模式下路由完全基于文件系统：每个可访问的路径必须对应app目录下的子文件夹，且子文件夹中必须包含page.js文件，否则会返回404。

当前你的目录中仅根路径/有对应的页面文件，/portfolio和/cv缺少对应的路由目录与页面文件，导致访问失败。

具体修复步骤 #

1. 在app目录下创建portfolio子文件夹，内部新建page.js文件，示例代码：

// app/portfolio/page.js
export default function PortfolioPage() {
  return (
    <div>
      <h1>我的作品集</h1>
      {/* 这里添加Portfolio页面的内容 */}
    </div>
  );
}

2. 同理，在app目录下创建cv子文件夹，内部新建page.js文件，示例代码：

// app/cv/page.js
export default function CVPage() {
  return (
    <div>
      <h1>我的简历</h1>
      {/* 这里添加CV页面的内容 */}
    </div>
  );
}

3. 重启开发服务器（如果已启动），现在点击导航栏的Portfolio和CV按钮即可正常访问对应页面。

额外优化点 #

Layout.js中的favicon路径配置有误，App Router中需使用绝对路径（public目录下的资源直接用根路径开头），修正后：

export const metadata = {
  title: "Julien Claerhout",
  description: "Julien Claerhout portfolio",
  favicon: "/favicon.ico", // 修正为绝对路径
};

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