#i18n with next export

1 messages · Page 1 of 1 (latest)

plush lava
#

I want to have i18n while using next export, is this possible with the app folder structure?

ionic gobletBOT
#

Hi @plush lava. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Next.js documentation on i18n-routing (https://nextjs.org/docs/advanced-features/i18n-routing) and internationalization (https://beta.nextjs.org/docs/guides/internationalization) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Advanced Features: Internationalized Routing | Next.js

Next.js has built-in support for internationalized routing and language detection. Learn more here.

Internationalization | Next.js

Add support for multiple languages with internationalized routing and localized content.

#

@plush lava kapa.ai is still learning and improving, please let us how it did by reacting below

plush lava
#

@ionic goblet I want to have i18n on my website.

I have two locales, UK and Canada.

The UK page should have the url: www.mywebsite.com

The canada page should have the url: www.mywebsite.com/ca

How can I do this with whilst using the new app folder.

ionic gobletBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To achieve i18n with the desired URL structure using the new app folder, you can follow these steps:

  1. Configure your next.config.js file to include the locales and the default locale:
// next.config.js
module.exports = {
  i18n: {
    locales: ['en-UK', 'en-CA'],
    defaultLocale: 'en-UK',
  },
};
  1. Create an app folder with a [lang] subfolder to handle different locales:
app/
  [lang]/
    _layout.js
    index.js
    ...
  1. Use the generateStaticParams function in your _layout.js file to generate static routes for the supported locales:
// app/[lang]/_layout.js
export async function generateStaticParams() {
  return [{ lang: 'en-UK' }, { lang: 'en-CA' }];
}

export default function Root({ children, params }) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

  1. For localization, create dictionaries for each locale and a getDictionary function to load the translations for the requested locale. You can refer to the Localization example (https://beta.nextjs.org/docs/guides/internationalization#localization) in the Next.js documentation.

  2. Use the getDictionary function in your pages to fetch the dictionary based on the currently selected language.

With this setup, your UK page will be available at www.mywebsite.com, and the Canada page will be available at www.mywebsite.com/ca.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Internationalization | Next.js

Add support for multiple languages with internationalized routing and localized content.

#

@plush lava kapa.ai is still learning and improving, please let us how it did by reacting below