如何解决Next.js:如何为具有多个主机名的站点使用getStaticProps / getStaticPaths?
我正在建立一个结构为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.使用 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 中使用重写
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。