使用Next.js Link跳转至buy页面返回404问题求助

问题出在Next.js App Router的路由规则上：13+版本的App Router要求每个路由页面必须放在对应名称的文件夹下的page.js文件中，而非直接在app目录下创建buy.js。

修复步骤 #

1. 在app目录下创建buy文件夹

mkdir app/buy

2. 将原buy.js移动至buy文件夹并改名为page.js

mv app/buy.js app/buy/page.js

3. 调整相关代码细节
   • 移除page.js中多余的import Buy from "./buy";（Link跳转无需导入目标页面组件）
   • 修正buy/page.js中globals.css的引用路径（因为当前文件在buy子目录，需用../回退一级）

修改后的代码示例 #

app/page.js（跳转部分）

import Link from 'next/link';

<Link href="/buy" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
  跳转到购买页面
</Link>

app/buy/page.js

import { Inter } from "next/font/google";
import "../globals.css";

export default function Buy() {
    return (
        <main>
            <h1>TEST</h1>
        </main>
    );
}

关键提示 #

• 确保项目使用Next.js 13+版本且启用App Router（项目根目录存在app文件夹）
• App Router完全基于文件系统路由：文件夹名称对应路由路径，文件夹内的page.js是该路由的入口页面组件

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