Internationalization I18n Support
Introduction
In this post we will discuss the i18n implementation, Also, I am currently redesigning my own website, migrate to the app router of latest next.js
My own blog website based on this new template hyperse.net
Core features
- New
TOCInlinecomponent, automatically extract article headings and generate Anchor links from headings in articles - Integration of
herouitheme - Using
next-intlas internationalization engine - Using
next.jslatest appRouter 15.3+ - Using
contentlayerto manage the content of the blog - Using
CMD+Kinterface our blog content search.
Project Structures
./messages ├── en.json └── zh.json ./src ├── /middleware.ts ├── /components ├── /config ├── /hooks ├── /i18n ├── /layouts ├── /utils ├── /styles ├── /data └── /app ├──api/ ├──layout.tsx ├──robots.ts ├──sitemap.ts └──[locale]
The folder structures of /app
/src/app ├──api/ ├──layout.tsx ├──robots.ts ├──sitemap.ts └──[locale] ├── [..rest]/ ├── about/ ├── article/ ├── projects/ ├── tags/ ├── error.tsx ├── layout.tsx ├── not-found.tsx ├── page.tsx └── ...
The i18n json files
The messages folder contains the .json files where you will define your translations, the convention being to define one file per page of your site, with the name of the page concerned for the name of the json file.
In English in the messages/en.json file:
messages/en.json
{ "Error": { "title": "Something went wrong!", "description": "<p>We've unfortunately encountered an error.</p><p>You can try to <retry>reload the page</retry> you were visiting.</p>" }, "NotFoundPage": { "title": "Page not found", "description": "Please double-check the browser address bar or use the navigation to go to a known page." } }
In Chinese in the messages/zh.json file:
messages/zh.json
{ "Error": { "title": "出错了！", "description": "<p>我们不幸遇到了一个错误。</p><p>您可以尝试<retry>重新加载</retry>您正在访问的页面。</p>" }, "NotFoundPage": { "title": "页面未找到", "description": "请再次检查浏览器地址栏或使用导航前往已知页面。" }, }
Interesting implementations
Community
We're excited to see the community adopt Hyperse-io, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
