Acquia Developer Portal Logo

Handle multilingual content with Acquia next-acms and ACMS headless starter kit

  • Last updated
  • 1 minute read

Goal

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

Prerequisites

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

    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

Similar Tutorials