Netlify SSR环境下Next.js中间件配置规范URL问题排查

云原生阿岚

2026-7-7

问题

我尝试在根布局layout.js文件中使用Next.js元数据为页面生成规范URL（canonical url）。

以下是我的middleware.js代码：

import { NextResponse } from 'next/server'
export function middleware(request) {
  const requestHeaders = new Headers(request.headers)
  const { pathname } = request.nextUrl

  requestHeaders.set('x-url', request.url || '')
  requestHeaders.set('x-invoke-path', pathname || '')

  return NextResponse.next({
    request: {
      headers: requestHeaders
    }
  })
}

在layout.js文件中，我尝试通过以下方式获取规范URL：

...
import { headers } from 'next/headers'
...

export const metadata = () => {
  const headersList = headers()
  const pathName =
     headersList.get('x-url') || headersList.get('x-invoke-path') || ''
  return {
    ...
     alternates: {
      canonical: `https://example.com ${pathName}`
    }
    ....
  }

本地环境中我能正常获取完整路径，但Netlify SSR环境存在问题，请问我遗漏了什么配置？

解决方案

修复URL拼接错误：你代码里https://example.com和pathName之间有空格，会生成无效URL，修正为：
```
canonical: `https://example.com${pathName}`
```
添加Netlify环境变量：在Netlify控制台添加环境变量TRUST_HOST=true，让Next.js信任Netlify转发的请求头，确保request.url能正确获取完整外部URL。

改用requestUrl直接构建（更可靠）：不需要依赖中间件传递自定义头，直接在metadata中使用Next.js的requestUrl方法：

import { requestUrl } from 'next/headers'
...

export const metadata = () => {
  const url = requestUrl()
  url.protocol = 'https'
  url.host = 'example.com' // 替换为你的实际域名
  return {
    alternates: {
      canonical: url.toString()
    }
  }
}