nextjs config_error ai_generated true

Error: Invalid rewrite destination. Rewrite destination must be a relative path or an absolute URL within the same application.

ID: nextjs/rewrite-invalid-destination

Also available as: JSON · Markdown · 中文
90%Fix Rate
85%Confidence
1Evidence
2023-07-12First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 13.0.0 active — — —
Next.js 14.0.0 active — — —
Next.js 14.2.0 active — — —

Root Cause

A rewrite rule in next.config.js has a `destination` that points to an external URL (e.g., https://other-site.com) or an invalid path, but rewrites in Next.js are only allowed to redirect to internal routes within the same application.

generic

中文

next.config.js 中的重写规则有一个指向外部 URL（例如 https://other-site.com）或无效路径的 `destination`，但 Next.js 中的重写只允许重定向到同一应用程序内的内部路由。

Official Documentation

https://nextjs.org/docs/app/api-reference/next-config-js/rewrites

Workarounds

  1. 95% success Change the destination to a relative path within the app. Example: `rewrites: async () => [{ source: '/old-path', destination: '/new-path' }]`. If you need to proxy an external API, use an API route instead. 
    Change the destination to a relative path within the app. Example: `rewrites: async () => [{ source: '/old-path', destination: '/new-path' }]`. If you need to proxy an external API, use an API route instead.
  2. 90% success If proxying an external API is required, create an API route that fetches from the external URL and returns the response. Example: In app/api/proxy/route.ts, use `fetch('https://other-site.com/api/data')` and return the result. 
    If proxying an external API is required, create an API route that fetches from the external URL and returns the response. Example: In app/api/proxy/route.ts, use `fetch('https://other-site.com/api/data')` and return the result.
  3. 80% success Use middleware to rewrite requests to external URLs by returning a Response object with the external content. Example: In middleware.ts, `return fetch('https://other-site.com' + request.nextUrl.pathname)`. 
    Use middleware to rewrite requests to external URLs by returning a Response object with the external content. Example: In middleware.ts, `return fetch('https://other-site.com' + request.nextUrl.pathname)`.

中文步骤

  1. 将目标更改为应用程序内的相对路径。示例：`rewrites: async () => [{ source: '/old-path', destination: '/new-path' }]`。如果需要代理外部 API，请改用 API 路由。
  2. 如果需要代理外部 API，请创建一个从外部 URL 获取数据并返回响应的 API 路由。示例：在 app/api/proxy/route.ts 中，使用 `fetch('https://other-site.com/api/data')` 并返回结果。
  3. 使用中间件通过返回包含外部内容的 Response 对象来重写请求到外部 URL。示例：在 middleware.ts 中，`return fetch('https://other-site.com' + request.nextUrl.pathname)`。

Dead Ends

Common approaches that don't work:

  1. 100% fail

    The destination is still external; Next.js does not allow rewrites to external URLs regardless of formatting.

  2. 50% fail

    Redirects to external URLs are allowed, but if the intent was to proxy content (rewrite), this changes the URL in the browser, which may not be desired.

  3. 95% fail

    The basePath option only affects the application's own URL prefix, not rewrite destinations; the error will persist.