Next.js：如何将 getStaticProps/getStaticPaths 用于具有多个 domains/hostnames 的站点？

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 站点 上托管 多个域的示例（同时维护 多种语言 和静态站点 generation/SSG), 使用 Next.js' i18n 系统:

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

概念：

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

2。在 Next.js 10.2

中使用重写

见this conversation and this code repository。