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 站點上托管多個域的示例（同時維護多種語言和靜態站點生成/SSG），使用 Next.js 的 i18n 系統：

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

這個概念：

• Next.js 的 i18n locale用於確定站點。
• 選擇語言是通過一個pseudoLocale prop（ /[pseudoLocale]文件夾中的頁面）來處理的。
• 從/重定向到/en 。

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

請參閱此對話和此代碼存儲庫。