Next.js 14 next/link路由404页面错误问题求助

我在Windows系统的管理员Shell中执行npx create-next-app@latest全新安装了Next.js。

Header.tsx 代码（路径：/src/app/components/Header.tsx） #

import React from 'react';
import styles from '../page.module.css'
import Link from 'next/link'

export default function Header() {
  return (    
    <header className={styles.header}>
        <nav className='navbar navbar-expand-lg bg-success navbar-dark p-4'>
            
            <ul className="navbar-nav nav-pills mr-auto">
              <li className='nav-item home'>
                <Link 
                  className='nav-link active'
                  href="/"
                  >Home
                </Link>
              </li>

                <li className='nav-item'>
                  <Link 
                    className='nav-link'
                    href="/react-page"
                    >ReactJS
                  </Link>
                </li>
            </ul>
        </nav>
    </header>
  )
}

ReactPage 代码（当前路径：/src/app/pages/react-page.tsx） #

import Image from 'next/image'

export default function ReactPage() {
  return (
    <>
      <div className="jumbotron jumbotron-fluid">
        <div className="container">
          <div className='row d-flex justify-content-start align-items-center' id="hp_logo_container">
            <div className='col-sm p-5'>
              <Image
                className=""
                id="react_logo"
                src="/react-logo.svg"
                alt="React Logo"
                width={300}
                height={300}
                priority
              />
            </div>
            
            <div className='col-sm p-5'>
                <h1 className="display-6">React!</h1>
                <p className="lead">
                  some text
                </p>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

问题详情 #

点击Header.tsx中的"ReactJS"链接时，出现404页面未找到错误。

已尝试操作 #

我尝试将/pages文件夹移动到多个位置，知道Next.js会自动为/pages文件夹中的页面创建路由，但不清楚该文件夹应放在/src、/src/app还是项目根目录下。移动文件夹后问题仍未解决，怀疑问题出在其他地方。

预期结果 #

链接能正常工作，成功跳转到对应的页面。

你用的是Next.js 13+的App Router（项目结构是/src/app），这套路由体系和传统的/pages目录路由逻辑完全不同，所以之前移动pages文件夹的操作没用。按以下步骤调整即可：

1. 调整页面文件结构
   在/src/app目录下创建一个名为react-page的文件夹，把原来的react-page.tsx改名为page.tsx，放到这个新文件夹里。最终路径应为：/src/app/react-page/page.tsx。
   App Router的规则是：每个路由对应一个文件夹，文件夹下的page.tsx就是该路由的页面组件，比如/src/app/react-page/page.tsx会自动映射到/react-page路由，和你Link里的href="/react-page"完全匹配。

2. 确认Header组件已全局引用
   确保根页面（/src/app/page.tsx）已经正确引入Header组件，这样导航栏才能在所有页面显示：

   // /src/app/page.tsx
   import Header from './components/Header';
   import styles from './page.module.css';
   
   export default function Home() {
     return (
       <main className={styles.main}>
         <Header />
         {/* 其他首页内容 */}
       </main>
     );
   }
   

3. 重启开发服务器
   修改完文件结构后，按Ctrl+C停止当前服务器，再执行npm run dev重启，确保新的路由配置生效。

做完以上三步，点击"ReactJS"链接就能正常跳转了。

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