Next.js中如何为嵌套动态路由设置回退重定向？

你提到的三种实现路径都可落地，但适用场景、维护成本和性能表现差异较大，按需选择即可：

方案1：next.config.js 配置重定向（优先推荐） #

你对配置重定向的认知有偏差：next.config.js 并非仅支持301永久重定向，可通过permanent字段自定义状态码，完全适配当前需求，且是编译层生效，性能最优，不需要额外新增冗余文件。

配置示例：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/articles',
        destination: '/articles/page/1',
        permanent: false, // false返回302临时重定向，true返回301永久重定向
      },
      {
        source: '/articles/page',
        destination: '/articles/page/1',
        permanent: false,
      },
    ]
  },
}

module.exports = nextConfig

该方案优势：

• 无运行时开销，重定向在页面渲染逻辑触发前完成，不会出现页面闪烁
• 不需要额外新建回退页面，维护成本低
• 规则清晰，后续调整路径直接修改配置即可
• 可灵活配置重定向状态码，覆盖临时/永久跳转全场景

方案2：Middleware 中间件实现 #

你写的中间件逻辑是可行的，更适合/articles路径下后续需要叠加鉴权、地域分流、用户标识判断等复杂逻辑的场景。
注意Next.js 12.2+版本已调整中间件规范，不再使用pages目录下的_middleware.js旧写法，修正后的兼容代码如下：

// middleware.js 放置在项目根目录，与pages文件夹同级
import { NextResponse } from 'next/server'

export function middleware(request) {
  const { pathname } = request.nextUrl
  if (pathname === '/articles' || pathname === '/articles/page') {
    return NextResponse.redirect(new URL('/articles/page/1', request.url))
  }
  return NextResponse.next()
}

// 配置匹配范围，避免中间件在全站路由触发，减少不必要的性能损耗
export const config = {
  matcher: ['/articles', '/articles/page'],
}

如果只是做固定路径跳转，该方案相比配置重定向更繁琐，没有特殊需求不优先选。

方案3：新建回退页面调用客户端路由跳转（不推荐） #

你最初设想的新建articles.js、/articles/page.js两个文件，在客户端调用router.push实现跳转的方式存在明显缺陷：

• 页面会先加载空状态/默认内容，再触发跳转，存在肉眼可见的闪烁，用户体验差
• 搜索引擎爬虫可能无法正确识别客户端跳转，影响页面SEO表现
• 需要维护额外的冗余文件，后续路径调整要修改多处代码

只有当你需要在跳转前做客户端侧的个性化判断（比如根据用户本地存储的阅读记录跳转到上次浏览的页码）时，才考虑用这种方式。

如果只是实现固定路径跳转到文章列表第一页的需求，直接选next.config.js配置重定向的方案即可，成本最低效果最好。

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