如何处理Next.js Router的Queries与Params，非法参数场景下实现路由重定向

核心逻辑围绕「合法请求才渲染页面，所有非法场景无闪烁重定向到合规路径」设计，覆盖提到的所有非法场景：路径错误（比如/p）、参数非法（比如/page?p=*、空id的/page?id=）、携带多余参数的请求。

核心原则 #

优先把校验逻辑放在服务端执行，不要依赖客户端组件做首屏参数校验——后者会出现不合法页面先渲染、再跳转的明显闪烁，体验远差于服务端直接拦截。

App Router 模式（Next.js 13+） #

1. 查询参数与页面内容的统一校验 #

直接在页面对应的服务端组件里接收searchParams做规则判断，不满足就直接调用内置的redirect方法拦截。
对应文件：app/page/page.tsx

import { redirect } from 'next/navigation'
// 校验规则配置
const ALLOWED_QUERY_KEYS = ['id']
export default async function Page({
  searchParams
}: {
  searchParams: Record<string, string | string[] | undefined>
}) {
  // 判定合法请求的两个核心条件
  const hasNonEmptyId = 
    typeof searchParams.id === 'string' && 
    searchParams.id.trim() !== '' // 拦截 /page?id= 这类空值场景
  const hasExtraIllegalParams = Object.keys(searchParams)
    .some(key => !ALLOWED_QUERY_KEYS.includes(key)) // 拦截 /page?p=xxx 这类带多余参数的场景
  const isRequestValid = hasNonEmptyId && !hasExtraIllegalParams
  // 非法请求直接重定向
  if (!isRequestValid) {
    // 自动从原请求中提取有效非空id，拼接到合规路径
    const validId = hasNonEmptyId ? searchParams.id : ''
    redirect(`/page${validId ? `?id=${encodeURIComponent(validId)}` : ''}`)
  }
  // 校验通过才渲染页面
  return <div>合规的页面内容</div>
}

这段逻辑的覆盖范围：

• 拦截/page?p=123：检测到非法的p参数，直接重定向到合规路径
• 拦截/page?id=：检测到id为空值，重定向
• 拦截/page?id=123&extra=xxx：自动清洗多余非法参数，重定向到纯合规路径

2. 路径错误的统一重定向 #

对于/p这类不是/page的非法路径，直接在next.config.js中配置路由级重定向，请求到达服务端时直接拦截，不需要走页面渲染流程：

// next.config.js
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/p', // 匹配所有需要处理的非法路径
        destination: '/page',
        permanent: false, // 用临时重定向，避免浏览器缓存301规则
      }
    ]
  }
}

Pages Router 模式（Next.js 12及更早版本） #

这类版本的最合适校验位置是getServerSideProps服务端方法，拿到请求query后直接判断，不满足就返回重定向对象，同样可以实现零闪烁拦截。
对应文件：pages/page.tsx

import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
type PageProps = {
  id: string
}
const ALLOWED_QUERY_KEYS = ['id']
export async function getServerSideProps(
  context: GetServerSidePropsContext
): Promise<GetServerSidePropsResult<PageProps>> {
  const { query } = context
  const hasNonEmptyId = 
    typeof query.id === 'string' && 
    query.id.trim() !== ''
  const hasExtraIllegalParams = Object.keys(query)
    .some(key => !ALLOWED_QUERY_KEYS.includes(key))
  const isRequestValid = hasNonEmptyId && !hasExtraIllegalParams
  if (!isRequestValid) {
    const validId = hasNonEmptyId ? query.id : ''
    return {
      redirect: {
        destination: `/page${validId ? `?id=${encodeURIComponent(validId)}` : ''}`,
        permanent: false
      }
    }
  }
  return {
    props: {
      id: query.id as string
    }
  }
}
export default function Page({ id }: PageProps) {
  return <div>合规页面内容，当前id：{id}</div>
}

路径级的错误重定向配置和App Router一致，都是在next.config.js的redirects字段中配置。

常见踩坑点 #

• 参数拼接时必须用encodeURIComponent对id值做编码，避免id中携带特殊字符（比如&、?）导致路由解析错误
• 重定向的permanent参数在规则未完全稳定时一律设为false，301永久重定向会被浏览器长期缓存，后续调整规则时会出现用户端缓存不更新的问题
• 不要在客户端组件里重复做全量参数校验：服务端已经拦截了非法请求，能走到客户端的请求本身就是合规的，重复判断只会增加冗余代码
• 如果业务需要保留埋点类参数（比如utm_*、gclid这类广告参数），不要把规则写死成仅允许id，可以在参数判断时把带白名单前缀的参数排除，避免把用户携带的有效跟踪参数直接清洗掉

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