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.

• 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)

• 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

• 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