Multilingual Content: Next ACMS

Goal

Show the content in different languages to the user with Acquia next-acms and Acquia CMS headless starter kit

Prerequisites

• An existing installation of Acquia CMS Headless Starterkit with demo content and Next.js.See tutorial on settings up ACMS and Next.js.

1. Add a new language

   • Visit /admin/config/regional/language/add
   • Add a new language (say - 'Hindi')
   
   • So now Acquia CMS system has 2 languages English (langcode=en) and Hindi (langcode=hi)

2. Configure locales in NextJS app

   • Edit next.config.js file of the NextJS app
   • Add en and hi locales in this config file
   copy

    i18n: { locales: ['en', 'hi'], defaultLocale: 'en',},

   • So the next.config.js file will look like
   copy

    module.exports = { images: { domains: [process.env.NEXT_IMAGE_DOMAIN ?? ''], }, i18n: { locales: ['en', 'hi'], defaultLocale: 'en', },};

   • en and hi are the codes of the language English and Hindi respectively which added to the backend system in previous step
   Note

   Locales configured in "next.config.js" should be same as languages added in Acquia CMS

3. Add the content

   • Add new content or Edit existing content
   • Add content for both the languages (English and Hindi)
   • Once content creation / update is done in Acquia CMS, visit "/hi" url of the NextJS app and you will see the content added for the language Hindi.
   • If no language code is passed in url and visit the NextJS app url "/", it will show the English version of the content
   • So now just add the content and enjoy the multi-lingual power of the Acquia CMS and NextJS

See https://nextjs.org/docs/advanced-features/i18n-routing for more info on Next.JS internationalization