Next.js服务端实现各路由初始加载按请求域名跳转的方案咨询

解决方案：使用Next.js Middleware #

Middleware运行在请求到达你的页面或静态资源之前的边缘节点，你可以直接获取完整的请求对象做域名判断和跳转，完全不会影响原有页面的渲染模式，纯静态页面依旧可以保留SSG/ISR的构建时优化能力，也不需要修改自定义_app的逻辑。

实现步骤 #

1. 在项目根目录（和pages目录同级）新建middleware.ts（如果用JavaScript就建middleware.js）文件
2. 写入以下逻辑：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 获取请求的host
  const host = request.headers.get('host')
  if (host === '你要匹配的域名') {
    // 执行跳转，和getServerSideProps的跳转逻辑效果完全一致
    return NextResponse.redirect(new URL('/', request.url))
  }
  // 不匹配条件的请求直接放行
  return NextResponse.next()
}

// 可选配置：指定中间件生效的路径，过滤不需要处理的请求（比如静态资源、api接口等），减少不必要的执行消耗
export const config = {
  matcher: [
    /*
     * 匹配所有除了静态资源和_next内部路径的请求，按需调整即可
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

备选方案（仅适用于不支持Middleware的Next.js 12以下版本） #

如果你的项目版本过低无法使用Middleware，可以选择自定义Node.js服务器，在请求进入Next.js的处理逻辑之前先完成域名判断和跳转，该方案需要你自行维护服务端逻辑，会失去部分平台托管的自动优化能力，仅作为兜底选择。

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