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
i18n: { locales: ['en', 'hi'], defaultLocale: 'en',},
- So the next.config.js file will look like
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
-
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