Vercel和Nextjs:动态重定向子域到路径

Question

我有一个nextjs项目，它有一个代表客户端的:client参数，如下所示：

domain.com/:client

我有多个客户。。。所以我需要重写：

:client.domain.com->domain.com/:client

例如客户端：

• 谷歌.domain.com->域名/谷歌
• netflix域名网->domain.com/netflix

。。。

在同一个项目中。

有什么办法吗？

Answer 1

如Maxime所述，您可以在vercel.json中使用redirects选项。

但是，它需要一个额外的密钥。

例如，如果您的应用程序在company.com:可用

{
...
redirects: [
{
"source": "/",
"has": [
{
"type": "host",
"value": "app.company.com"
}
],
"destination": "/app"
}
]
}

更多信息：

• 示例指南
• vercel.json文档

Answer 2

使用next.config.js 在项目根目录中创建配置

如果这个文件存在，请添加以下片段，请注意，我们使用example.com代替domain.com，因为Body不能包含"；http://domain.com"；堆叠式

//next.config.js

module.exports = {
async redirects() {
return [
{
source: "/:path*",
has: [
{
type: "host",
value: "client.example.com",
},
],
destination: "http://example.com/client/:path*",
permanent: false,
},
];
},
};

要确认它也在开发中，请尝试使用localhost

module.exports = {
reactStrictMode: true,
// async rewrites() {
async redirects() {
return [
{
source: "/:path*",
has: [
{
type: "host",
value: "client.localhost",
},
],
destination: "http://localhost:3000/client/:path*",
permanent: false,
},
];
},
};

动态重定向

为了使其动态，我们将创建一个子域阵列

const subdomains = ["google", "netflix"];
module.exports = {
async redirects() {
return [
...subdomains.map((subdomain) => ({
source: "/:path*",
has: [
{
type: "host",
value: `${subdomain}.example.com`,
},
],
destination: `https://example.com/${subdomain}/:path*`,
permanent: false,
})),
];
},
}

您可以从官方的next.js文档重定向或重写中阅读更多信息