[英]Next.js Internationalized Routing: Production build error: Error occurred prerendering page
I've the following next.config.js:我有以下 next.config.js:
module.exports = withBundleAnalyzer({
i18n: {
locales: ['en', 'es'],
defaultLocale: 'en',
localeDetection: false,
},
...
});
That enables routes for locales en and es being en the default locale.这使区域设置en和es的路由成为默认区域设置。
In the root of the project lives _posts/en
and _post/es
holding the .md
files for the dynamic post pages.在项目的根目录中存在
_posts/en
和_post/es
保存动态帖子页面的.md
文件。
I see everything working fine when I run the dev script "dev": "next dev"
being able to switch between both locales with no problem and navigate through pages.当我运行开发脚本
"dev": "next dev"
能够毫无问题地在两个语言环境之间切换并浏览页面。
But if I run the prod script "build-prod": "run-s clean build export"
being the scrips called within the following: "clean": "rimraf.next out"
, "build": "build": "next build"
, "export": "next export"
但是,如果我运行 prod 脚本
"build-prod": "run-s clean build export"
是在以下内容中调用的脚本: "clean": "rimraf.next out"
, "build": "build": "next build"
, "export": "next export"
then I get the following errors:然后我收到以下错误:
Error occurred prerendering page "/en/posts/[slug]"
TypeError: Cannot read properties of undefined (reading 'undefined')
Error occurred prerendering page "/en/posts/[slug]"
TypeError: Cannot read properties of undefined (reading 'undefined')
> Build error occurred
Error: Export encountered errors on following paths:
/posts/[slug]: /en/posts/[slug]
/posts/[slug]: /es/posts/[slug]
Does anyone know what could be different between dev and prod that could cause this issue?有谁知道 dev 和 prod 之间可能导致此问题的不同之处?
Thanks谢谢
Apparently i18n support is not compatible with static HTML export so I decided to drop it.显然 i18n 支持与 static HTML 导出不兼容所以我决定放弃它。
Instead, I decided to implement my own solution for internationalised routing.相反,我决定实施我自己的国际化路由解决方案。
I used next-language-detector
to handle language detection and redirect from the index page in my Next.js project to the content in the preferred language.我使用
next-language-detector
来处理语言检测,并从我的 Next.js 项目的索引页面重定向到首选语言的内容。
To manage the content I enabled a route for each language adding directories with the language code under pages/
.为了管理内容,我为每种语言启用了一条路径,在
pages/
下添加带有语言代码的目录。 In my case es
and en
.在我的例子中
es
和en
。 Each directory will read the translated data stored in markdown.每个目录都会读取存储在markdown中的翻译后的数据。
For a similar approach see this article: https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd对于类似的方法,请参阅本文: https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.