Next.js动态路由/[username]访问不存在用户时NEXT_NOT_FOUND错误排查

我正在用Next.js开发类似Patreon的网站，用户可创建账户并接收粉丝付款。我给每个用户设置了/[username]动态路由用于收款，但访问数据库中不存在的用户名时，not-found.js页面无法显示，反而抛出Error: NEXT_NOT_FOUND错误。

当前代码 #

/[username]/page.js代码： #

"use client"

import PaymentPage from '@/components/PaymentPage'
import React from 'react'
import { useEffect } from 'react'
import { notFound } from 'next/navigation'
import connectDB from '@/db/connectDb'
import User from '@/models/User'
import { fetchuser } from '@/actions/useractions'

const page = ({ params }) => {

    //if username is not present in database, show a 404 error
    useEffect(() => {
        const checkUser = async () => {
            console.log(`in ${params.username}`)
            let u = await fetchuser(params.username)
            console.log(`value of u ${u}`)
            if (u === undefined) {
                try {
                    notFound();
                } catch (error) {
                    console.log("error", error)
                }
            }

        }
        checkUser()
    }, [])

    return (
        <>
            <PaymentPage username={params.username} />
        </>
    )

}

export default page

注：fetchuser是从数据库获取用户的服务端函数。

/[username]/not-found.js代码： #

import Link from 'next/link'
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
} 

已尝试的解决方法 #

• 将notFound()移至服务端文件，问题依旧
• 在/[username]文件夹中添加not-found.js，无效
• 查阅相关技术问题，未找到可行方案

我是Next.js新手，可能存在低级错误，恳请帮忙解决。

问题核心在于客户端校验的时机错误、错误捕获逻辑干扰，以及服务端校验的缺失。按以下步骤修复：

1. 优先使用服务端组件完成用户校验（推荐） #

Next.js中动态路由的合法性校验应该在服务端完成，既避免客户端渲染闪烁，又能正确触发404页面。修改page.js为服务端组件：

import PaymentPage from '@/components/PaymentPage'
import { notFound } from 'next/navigation'
import { fetchuser } from '@/actions/useractions'

// 去掉"use client"，转为服务端组件
export default async function Page({ params }) {
  const user = await fetchuser(params.username)
  
  // 用户不存在时直接调用notFound，自动触发同目录下的not-found.js
  if (!user) {
    notFound()
  }

  return <PaymentPage username={params.username} />
}

2. 修正客户端组件的错误逻辑（若必须用客户端组件） #

如果业务需求只能用客户端组件，不要用try/catch包裹notFound()——这个函数会抛出Next.js识别的特殊错误，手动捕获会中断404页面的渲染流程：

"use client"

import PaymentPage from '@/components/PaymentPage'
import { useEffect } from 'react'
import { notFound } from 'next/navigation'
import { fetchuser } from '@/actions/useractions'

const Page = ({ params }) => {
  useEffect(() => {
    const checkUser = async () => {
      const user = await fetchuser(params.username)
      if (!user) {
        notFound() // 移除try/catch包裹
      }
    }
    checkUser()
  }, [params.username])

  return <PaymentPage username={params.username} />
}

export default Page

3. 确认文件夹结构正确性 #

确保not-found.js放在[username]目录下，结构如下：

app/
├─ [username]/
│  ├─ page.js
│  └─ not-found.js
└─ layout.js

4. 验证fetchuser返回值 #

确认fetchuser在用户不存在时确实返回undefined或null，如果返回空对象等其他值，判断条件会失效。可以添加日志验证：

const user = await fetchuser(params.username)
console.log('用户查询结果:', user) // 检查输出是否符合预期

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