Next.js 14点击链接加载页面时短暂显示404错误求助

在Next.js 14项目中使用Link组件跳转页面时，每次点击都会短暂显示404错误，之后才加载目标页面，旧版本Next.js无此问题。结合你的导航代码，可从以下几个方向排查解决：

1. 核对App Router模式下的路由文件结构 #

Next.js 14默认启用App Router，所有页面路由必须对应app目录下的page.js/page.tsx文件，正确的结构应为：

• 首页：app/page.js
• About页：app/about/page.js
• Contact页：app/contact/page.js
  如果你的页面文件仍放在旧的pages目录下，或路由层级不匹配，会导致跳转时先触发404，后续才 fallback 到正确路由。

2. 修正当前路径的获取逻辑 #

你的导航代码中用path变量判断当前路由状态，在App Router模式下需使用usePathname()钩子（从next/navigation导入）来获取正确路径，避免路径判断错误影响Link的预加载逻辑：

'use client';
import { usePathname } from 'next/navigation';
import Link from 'next/link';

export default function Nav() {
  const pathname = usePathname();
  return (
    <nav
      className="hidden md:flex md:justify-center lg:justify-end lg:mr-8 grow py-2"
      aria-label="main-nav"
    >
      <ul className="mx-2 flex justify-center items-center gap-6 lg:gap-12 leading-normal text-md text-gray-700">
        <li>
          <Link
            href="/"
            className={`hover:font-normal hover:text-col-pry ${pathname === '/' ? 'font-normal bg-contact p-3' : ''}`}
          >
            Home
          </Link>
        </li>
        <li>
          <Link
            href="/about"
            className={`hover:font-normal hover:text-col-pry ${pathname === '/about' ? 'font-normal bg-contact p-3' : ''}`}
          >
            About
          </Link>
        </li>
        <li>
          <Link
            href="/contact"
            className={`hover:font-normal hover:text-col-pry ${pathname === '/contact' ? 'font-normal bg-contact p-3' : ''}`}
          >
            Contact
          </Link>
        </li>
      </ul>
    </nav>
  );
}

3. 排查404页面与路由中间件 #

• 检查app/not-found.js/not-found.tsx的代码，确保没有添加不必要的延迟或错误逻辑；
• 查看项目根目录的middleware.js，确认没有误拦截正常路由请求，导致先返回404再放行。

4. 临时禁用预加载排查问题 #

Next.js 14的Link默认会预加载目标页面，若预加载逻辑异常可能触发短暂404。可尝试禁用预加载验证：

<Link href="/about" prefetch={false}>About</Link>

如果禁用后问题消失，说明目标页面组件存在异步逻辑错误或资源加载问题，导致预加载时返回404。

5. 清理缓存并重新构建 #

缓存异常可能导致路由解析出错，执行以下命令清理缓存并重新构建项目：

npm run build && npm run start
# 或使用yarn
yarn build && yarn start

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