Next.js 13（App目录）动态路由下自定义404页面无法显示问题

算力阿峰

2026-7-23

Next.js 13 App目录模式下动态路由导致自定义404页面失效的解决方法

问题核心原因

从你的路由结构和代码来看，404页面无法正常显示主要有两个关键问题：

1. 404页面代码存在语法错误

你的404代码有两处明显错误：

函数名使用了JavaScript关键字undefined，属于非法命名
export default后直接写404，没有关联正确的组件

2. App目录下404页面的路由规则不符合要求

在Next.js 13 App目录模式中，自定义404页面必须遵循：

文件名固定为not-found.js（或.tsx）
全局404页面需放在app根目录下；如果是动态路由（如你的[id]目录）内的局部404，要放在对应动态路由文件夹里

修复步骤

步骤1：修正404页面代码

将404页面代码改为合法的组件格式，保存为app/not-found.js（全局生效）或app/movies/[id]/not-found.js（仅动态路由内生效）：

export default function NotFound() {
  return (
    <>
      <div className="flex justify-center items-center w-full h-full">
        <h1 className="text-5xl">404 页面未找到</h1>
      </div>
    </>
  )
}

步骤2：调整路由结构匹配规则

若要处理全站未匹配的路由，把not-found.js放在app根目录下
若仅针对/movies/[id]路径设置404，就把文件放在app/movies/[id]文件夹内

步骤3：给动态路由添加404触发逻辑

动态路由[id]会匹配/movies/后的任意路径，若要在电影ID不存在时触发404，需要在动态路由页面里添加判断：

import { notFound } from 'next/navigation'

export default async function MoviePage({ params }) {
  const res = await fetch(`https://api.themoviedb.org/3/movie/${params.id}?api_key=${process.env.API_KEY}`)
  
  if (!res.ok) {
    // API返回错误时，触发404页面
    notFound()
  }

  const movie = await res.json()
  
  return <div>{movie.title}</div>
}