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

Posted 2023-02-22

【中文标题】Next.js：如何将 getStaticProps/getStaticPaths 用于具有多个域/主机名的站点？

【英文标题】：Next.js: How can I use getStaticProps/getStaticPaths for sites with multiple domains/hostnames?

【发布时间】：2021-01-05 03:36:53

【问题描述】：

我正在构建一个结构为 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

【参考方案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。