如何在Next.js中实现路由约束，避免/newsletter/latest路由冲突？

针对 Pages Router（旧路由系统） #

1. 先创建独立的latest路由文件
   在pages/newsletter/目录下新建latest.js，这个文件会优先于动态路由[number].js被匹配，确保/newsletter/latest直接走这个页面的逻辑。

2. 在[number].js中添加整数校验
   在页面的getServerSideProps（服务端渲染）或getStaticProps（静态生成）里，判断number是否为整数：

   export async function getServerSideProps(context) {
     const { number } = context.params;
     // 验证是否为纯整数格式
     if (!/^\d+$/.test(number)) {
       return {
         notFound: true, // 返回404，让Next.js尝试匹配其他路由
       };
     }
     // 正常获取通讯稿数据的逻辑
     const newsletter = await fetchNewsletterByNumber(parseInt(number));
     return {
       props: { newsletter },
     };
   }
   

   这样访问/newsletter/latest会优先匹配latest.js；如果访问非整数路径（比如/newsletter/abc），[number].js会返回404。

针对 App Router（新路由系统） #

方法1：页面内参数校验 #

1. 同样先在app/newsletter/目录下创建latest/page.js，确保优先匹配。
2. 在app/newsletter/[number]/page.js中校验number是否为整数：

   import { notFound } from 'next/navigation';
   
   export default async function NewsletterPage({ params }) {
     const { number } = params;
     if (!/^\d+$/.test(number)) {
       notFound(); // 触发404，不会匹配这个页面
     }
     // 获取并渲染对应编号的通讯稿
     const newsletter = await fetchNewsletterByNumber(parseInt(number));
     return <div>{newsletter.content}</div>;
   }
   

方法2：使用 Middleware 全局拦截 #

如果需要更全局的路由约束，可在项目根目录创建middleware.js：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  // 匹配/newsletter/后的路径段
  const match = pathname.match(/^\/newsletter\/([^/]+)$/);
  if (match) {
    const segment = match[1];
    // 既不是latest也不是整数的情况，直接返回404
    if (segment !== 'latest' && !/^\d+$/.test(segment)) {
      return new NextResponse('Not Found', { status: 404 });
    }
  }
  return NextResponse.next();
}

// 指定中间件生效的路径范围
export const config = {
  matcher: '/newsletter/:path*',
};

这种方式能提前拦截不符合规则的请求，避免进入页面逻辑。

核心思路总结：让具体路由latest优先于动态路由，同时给动态路由的参数加上整数校验，确保只有整数编号才会被匹配。

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