Next.js 14 App Router用src目录时，组件中Link跳转报错如何解决

核心原因 #

你用的应该是Next.js的App Router模式，这个模式下路由页面必须放在app目录中，而你的项目目前缺少app目录，导致Link找不到对应路由的文件。

修复步骤 #

• 在src目录下创建app文件夹，这是App Router的强制路由根目录。
• 在app目录内新建signup文件夹，然后在该文件夹下创建page.tsx文件（这是路由页面的入口文件），示例代码：

// src/app/signup/page.tsx
export default function SignUpPage() {
  return <div>注册页面内容</div>;
}

• 确认Navbar.tsx中正确导入Next.js的Link组件：

// src/components/Navbar.tsx
import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/signup">Sign Up</Link>
    </nav>
  );
}

结构说明 #

你的现有src/components结构没问题，组件目录用来存放公共组件是合理的，只是缺少App Router要求的路由页面目录（app）。如果是用Pages Router模式，那路由文件应该放在pages目录下，但当前报错提示找不到文件，更符合App Router的规则，所以优先按上述步骤调整。

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