NextJS Pages Router下如何实现@[username]格式的动态路由？

直接创建@[username].tsx文件不符合Pages Router的路由规则，因此会出现404错误。正确的实现方式是利用带前缀的动态路由结构，具体步骤如下：

步骤1：调整文件结构 #

在pages目录下创建名为@的文件夹，然后在该文件夹内创建[username].tsx文件。最终目录结构如下：

pages/
└── @/
    └── [username].tsx

Next.js会自动将/@xxx格式的请求映射到这个动态路由组件。

步骤2：获取路由参数 #

在[username].tsx组件中，可通过客户端钩子或服务端渲染方法获取username参数：

客户端渲染示例 #

import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { username } = router.query;

  if (!username) {
    return <div>加载中...</div>;
  }

  return (
    <div className="user-profile">
      <h1>@{username} 的个人主页</h1>
      {/* 此处添加用户主页内容，如个人信息、发布动态等 */}
    </div>
  );
}

服务端渲染（getServerSideProps）示例 #

如果需要从服务端获取用户数据，可使用getServerSideProps：

import { GetServerSideProps } from 'next';

export default function UserProfile({ user }) {
  return (
    <div className="user-profile">
      <h1>@{user.username} 的个人主页</h1>
      <p>昵称：{user.nickname}</p>
      <p>简介：{user.bio}</p>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { username } = context.params as { username: string };
  // 调用API获取用户数据
  const res = await fetch(`https://your-api-domain.com/users/${username}`);
  const user = await res.json();

  return {
    props: { user },
  };
};

注意事项 #

• 若需静态生成部分用户页面，可使用getStaticPaths + getStaticProps组合，并设置fallback: true以支持未预生成的用户路径。
• 确保没有其他路由规则与/@username冲突，比如避免在pages目录下创建同名静态文件或文件夹。

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