Internationalization with Multi-Language Support

Published on
Authors
Series: Blog Starter
Episodes: (2/2)

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

New features

  • New sidetoc component : display automatically the table of contents of your posts in a dedicated sidebar.
  • Integration of email, theme, as well as a button to quickly copy the URL of the page you are on, with the kbar palette command. The motivation for this is having explored other command palette libraries, with some offering nested elements for 'Actions'. Unfortunately this is not possible with kbar, but it gave me new ideas!
  • Multi-authors feature for about section: each author can have it's own about page available inside a dropdown menu on large screens, or displayed directly on small screens. If you want to turn it off and only use the "normal", classical about section, go to sitemetadata.ts and set multiauthors to false. In any case, your main author now needs to have the field default set to true.
  • Featured section on home page for posts you want to pin to top : set featured to true (max two posts by default, can be modified in FeaturedLayout.tsx file, in component folder) The program will pick the latest two posts with featured : true. If no featured posts are available, this section will simply not be displayed!
  • Each tag now has its own pagination! If the number of posts is greater than the one you have defined (by default, set to 5) then a new page is automatically created for subsequent posts including the same tag.
  • Series for your posts is now supported, see the deployed demo!

Example of including this new feature :

---
title: Internationalization with Multi-Language Support
series:
  order: 4
  title: 'Blog Starter'
date: '2024-08-04'
lastmod: '2024-08-10'
language: en
tags: ['guides', 'next-i18n', 'next-intl', 'series', 'app-router']
authors: ['default']
images: ['/blog/static/images/twitter-card.png']
draft: false
featured: true
summary: Discover how to add multi-language support to your blog using the Hyperse Tailwind Next.js Blog template. This post introduces the features and setup process for creating an internationalized blog.
---
  • next-intl : Next.js Pages Router internationalization (i18n)
  • Share component : you or your users can share your blog posts on Facebook, Twitter, Linkedin, WhatsApp, Threads or Telegram with ease! What's a 2024 modern blog without this possibility?
  • Smooth page transitions: thanks to Framer Motion (see the template.tsx file in the app folder and take a look at the following next.js documentation for file functionality template) Note: This is a basic but effective implementation. I strongly encourage you to experiment with framer-motion and its use within the new router. I also added some Framer Motion flavor to the formspree contact modal, and to the ListLayoutWithTags.tsx component
  • Formspree support for the mail icon, with a beautiful modal dialog. Formspree allows your users to contact you and send you messages directly from your site, with anti-spam protection. Simply create a free basic account, read the docs and get the key from your formspree account and then replace the key with your own here, in components/formspree/index.tsx :

Libraries

For translations, the chosen library is not next-intl as backend it's amazing:

With Next.js 13, the App Router along with support for React Server Components was introduced and announced as stable with version 13.4. Following the lead of Next.js, next-intl also recommends this paradigm since it increases both simplicity as well as flexibility when it comes to i18n.

Configuration

Within the app folder, all content has been moved to a new folder [locale]: this is the official way recommended by next.js. An i18n folder has also been added:

./i18n
  ├── en.json
  └── zh.json
./src
   ├── /middleware.ts
   ├── /components
   ├── /config
   ├── /hooks
   ├── /layouts
   ├── /utils
   ├── /data
   ├── /css
   └── /app
        ├──api/
        ├──layout.tsx
        ├──robots.ts
        ├──sitemap.ts
        └──[locale]

folder structures of /app

 /app
  ├──api/
  ├──layout.tsx
  ├──robots.ts
  ├──sitemap.ts
  └──[locale]
      ├── [..rest]/
      ├── about/
      ├── projects/
      ├── tags/
      ├── error.tsx
      ├── layout.tsx
      ├── not-found.tsx
      ├── page.tsx
      └── ...

It is therefore in this i18n folder that the main logic for the internationalization of the application is located.

  • Json files:

The i18n subfolder 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.

Example :

In English in the "en" folder:

i18n/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 "zh" folder:

i18n/zh.json
{
  "Error": {
    "title": "出错了！",
    "description": "<p>我们不幸遇到了一个错误。</p><p>您可以尝试<retry>重新加载</retry>您正在访问的页面。</p>"
  },
  "NotFoundPage": {
    "title": "页面未找到",
    "description": "请再次检查浏览器地址栏或使用导航前往已知页面。"
  },
}

Conclusion

Everything else is currently working as expected.

Any help for improvements and/or bug reports is welcome, just give comments or open an issue. Open Blog Issue

Discuss on Twitter • View on GitHub