Next.js：如何为具有多个主机名的站点使用getStaticProps / getStaticPaths？

Question

我正在建立一个结构为https://[sub.domain.ext]/[language]/articles/[slug]的网站，但是该网站在不同的域（不同的主机名）上会有不同的内容。

典型的用例是针对相同内容的不同语言翻译使用不同的子域：en.mysite.com，fr.mysite.com等。

我不想诉诸使用getServerSideProps的服务器端渲染（性能降低，如果内容很少更改，则不需要）。我可以以某种方式使用getStaticProps / getStaticPaths生成静态网站吗？

这是我目前的实现方式，其中siteId = 1硬编码：

import React from 'react'
import { useRouter } from 'next/router'

import Page from 'components/page/Page'
import Error from 'components/page/Error'
import ArticleList from 'components/articles/ArticleList'

const { runDatabaseFunction } = require('lib/database')
const { getArticlesForSiteAndLanguage } = require('lib/data/articles')

function ArticleListPage ({ site, articles, error }) {
  const { asPath } = useRouter()
  const title = 'News'
  return (
    <Page
      title={title}
      site={site}
      path={asPath}
    >
      <h1>{title}</h1>

      {error && <Error error={error} />}

      <ArticleList
        articles={articles}
      />
    </Page>
  )
}
export default ArticleListPage

export async function getStaticProps ({ params: { siteId = 1, languageCode = 'en' } }) {
  return {
    revalidate: 10,
    props: await runDatabaseFunction(async (pool) => getArticlesForSiteAndLanguage(pool, { siteId, languageCode }))
  }
}

export async function getStaticPaths () {
  return {
    paths: [
      { params: { languageCode: 'en' } } //  '[siteId]' is not part of folder structure
    ],
    fallback: true
  }
}

更新

另请参阅：

• https://github.com/vercel/next.js/discussions/17060
• https://github.com/vercel/next.js/discussions/12848

Answer 1

几种方法：

1.使用 Next.js 语言环境系统

以下是使用 Next.js 的 i18n 在同一 Next.js 站点上托管多个域的示例（同时保持多种语言和静态站点生成/SSG）系统：

• 演示：https://multi-domain-locale1.vercel.app/
• 来源：https://github.com/tomsoderlund/nextjs-multi-domain-locale

概念：

• Next.js 的 i18n locale 用于确定站点。
• 选择语言是通过 pseudoLocale 属性（/[pseudoLocale] 文件夹中的页面）处理的。
• 从 / 到 /en 的 重定向。

2.在 Next.js 10.2 中使用重写

参见 this conversation 和 this code repository。