NextJS博客应用中/@[username]动态路由异常问题求助

你的问题出在/pages/[username]/index.tsx的动态路由会匹配所有非根路径（比如/abc），导致不存在的用户名路径也会进入该页面进而报错。核心解决思路是在页面逻辑中校验用户名的存在性，不存在则主动返回404。

Pages Router（你当前使用的路由系统） #

方案1：服务端渲染时校验（getServerSideProps） #

在/pages/[username]/index.tsx中添加服务端校验逻辑，判断用户名是否合法：

// 替换为你实际的数据库/API查询逻辑，校验用户名是否存在
async function checkUserExists(username: string) {
  const res = await fetch(`你的用户查询接口/${username}`);
  return res.ok;
}

export async function getServerSideProps(context) {
  const { username } = context.params;

  const isUserValid = await checkUserExists(username);
  if (!isUserValid) {
    return {
      notFound: true, // 触发Next.js默认404页面
    };
  }

  // 用户名合法，获取用户数据传递给页面组件
  const user = await fetch(`你的用户查询接口/${username}`).then(res => res.json());
  return {
    props: { user },
  };
}

export default function UserProfile({ user }) {
  return (
    <div>
      <h1>@{user.username} 的主页</h1>
      {/* 页面内容 */}
    </div>
  );
}

方案2：静态生成时校验（getStaticProps + getStaticPaths） #

如果用户数据相对稳定，适合静态生成，可结合预生成合法路径+动态校验：

// 获取所有合法用户名列表
async function getAllValidUsernames() {
  const res = await fetch('你的全量用户接口');
  const users = await res.json();
  return users.map(user => user.username);
}

export async function getStaticPaths() {
  const usernames = await getAllValidUsernames();
  const paths = usernames.map(name => ({
    params: { username: name },
  }));

  // fallback: 'blocking' 会为未预生成的路径实时生成静态页，同时触发校验
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps(context) {
  const { username } = context.params;
  const res = await fetch(`你的用户查询接口/${username}`);
  
  if (!res.ok) {
    return { notFound: true };
  }

  const user = await res.json();
  return {
    props: { user },
    revalidate: 3600, // 可选：每小时重新生成静态页
  };
}

export default function UserProfile({ user }) {
  return <h1>@{user.username} 的主页</h1>;
}

额外：Next.js 13+ App Router 方案 #

如果后续迁移到App Router，可在app/[username]/page.tsx中直接校验并触发404：

import { notFound } from 'next/navigation';

async function getUser(username: string) {
  const res = await fetch(`你的用户查询接口/${username}`);
  if (!res.ok) return null;
  return res.json();
}

export default async function UserPage({ params }: { params: { username: string } }) {
  const user = await getUser(params.username);
  
  if (!user) {
    notFound(); // 触发404页面
  }

  return <h1>@{user.username} 的主页</h1>;
}

核心逻辑：无论哪种路由系统，都需要在页面渲染前校验用户名的合法性，不合法则主动返回404，避免动态路由匹配所有非根路径导致的错误。

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