如何在Next.js中创建含@符号的动态路由？

嘿，这个需求其实在Next.js里实现起来非常直观，不管你用的是传统的Pages Router还是新版的App Router，都有直接的方式搞定！下面分两种路由系统给你详细说明：

如果你用的是Pages Router（基于pages目录） #

这应该是你提到的用pages文件夹的场景，步骤超简单：

1. 在pages目录下新建一个文件，命名为@[username].js（如果你用TypeScript就叫@[username].tsx）。

   • 这里的@是路径里的固定前缀，[username]是动态参数，会自动匹配@后面的所有内容（比如访问/@jane时，username参数就是jane）。

2. 在这个文件里，用useRouter钩子就能拿到动态参数，比如：

import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>欢迎来到 @{username} 的个人主页！</h1>
      <p>当前访问路径: /@{username}</p>
    </div>
  );
}

启动项目后，访问localhost:3000/@john，就能看到对应的页面内容了，完全符合你要的路径格式。

如果你用的是App Router（Next.js 13+，基于app目录） #

新版路由系统的实现逻辑类似，只是文件结构稍有不同：

1. 在app目录下新建一个文件夹，命名为@[username]，然后在这个文件夹里创建page.js（或page.tsx）。

   • 文件夹名@[username]直接对应路由路径/@username，其中username就是动态匹配的用户名。

2. 在page.js里，直接通过props接收params就能拿到用户名：

export default function UserProfile({ params }) {
  const { username } = params;

  return (
    <div>
      <h1>欢迎来到 @{username} 的个人主页！</h1>
      <p>当前访问路径: /@{username}</p>
    </div>
  );
}

访问localhost:3000/@bob，同样能正确渲染页面。

可选：限制路由格式，避免非法访问 #

如果你想确保只有/@xxx这种格式的路径才能访问这个页面，可以加个中间件做校验：

比如在Pages Router中，创建pages/_middleware.js：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  // 用正则检查路径是否符合/@加用户名的格式（用户名允许字母、数字、下划线）
  if (!pathname.match(/^\/@[a-zA-Z0-9_]+$/)) {
    // 不符合的话重定向到404页面或者首页
    return NextResponse.redirect(new URL('/404', request.url));
  }
  return NextResponse.next();
}

// 指定中间件只作用于/@开头的路径
export const config = {
  matcher: '/@:username*',
};

如果是App Router，中间件文件放在项目根目录（middleware.js），逻辑完全一样，这样就能过滤掉不符合格式的请求啦。

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