NextJS 按子域路由

Question

我正在使用 NextJS 构建一个网站。在构建时，通过不经常更改的 JSON 数据生成了 150 个静态网页 (SSG)。

目前网页位于 https://mywebsite.com/slug（和 www.mywebsite.com），其中“slug”是唯一的 5 个字母值。

我被要求将“slug”作为子域，因此“slug.mywebsite.com/”将解析为之前位于 www.mywebsite.com/slug 的 SSG 页面。

我最初和主要关心的是弄清楚这在 NextJS 中是否可行以及路由如何工作。有没有人有指点或建议？

我认为添加/删除子域将涉及对构建配置的更改，并且添加/删除页面的频率应该足够低，因此如果该位不是从 JSON 文件自动执行，则可能没问题。

我通过 AWS Amplify 部署该网站，并且更愿意保留在 AWS 上；但可能会迁移到 Vercel 或其他托管环境，因为我们尚未启动。 AWS 有 50 个子域限制；所以我要求增加配额。我看到 Vercel 有 50 个域名限制，但不确定子域名。

谢谢！

Answer 1

您可以将其添加到您的中间件中

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

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/_next')) {
    const subdomains = request.headers
      .get('host')
      ?.split('.')
      .slice(0, -+(process.env.DOMAIN_PARTS ?? 0))
      .map((subdomain) => `/${subdomain}`)
      .join('');

    return NextResponse.rewrite(
      new URL(
        (subdomains?.length ? subdomains : '/index') + request.nextUrl.pathname,
        request.url
      )
    );
  }
}

在

.env

中

DOMAIN_PARTS

变量中，您的基域包含的部分数量。每个部分都用点分隔。例如，如果您在

localhost:3000

上托管，那么

DOMAIN_PARTS

就是其中之一。如果您在

mydomain.com

上托管，则必须为 2。

pages

文件夹内的文件夹结构应如下所示

├── index
│   ├── index.tsx
│   └── page1.tsx
├── subdomain1
│   ├── index.tsx
│   └── page2.tsx
├── subdomain2
│   ├── index.tsx
│   └── page3.tsx

index

文件夹中是没有任何子域的页面。如果我在本地托管它，它就可以工作。使用自定义域部署时我没有尝试过。