Next-intl library integration in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the NextIntlProvider component from the next-intl library.

NextJS

import { [1] } from 'next-intl';

Drag options to blanks, or click blank then click option'

AIntlProvider

BNextIntlProvider

CNextProvider

DIntlNextProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'IntlProvider' instead of 'NextIntlProvider'.

Misspelling the component name.

The NextIntlProvider component is imported from 'next-intl' to provide internationalization support in Next.js apps.

2fill in blank

medium

Complete the code to load locale messages asynchronously in a Next.js page.

NextJS

export async function getStaticProps({ params }) {
  const messages = await import(`../messages/$[1].json`);
  return { props: { messages: messages.default } };
}

Drag options to blanks, or click blank then click option'

Aregion

Blang

Clanguage

Dlocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lang' or 'language' which are not the parameter names in Next.js routing.

Forgetting to access the default export of the JSON.

The 'locale' parameter contains the current locale string, used to load the correct messages file.

3fill in blank

hard

Fix the error in the NextIntlProvider usage by completing the missing prop.

NextJS

<NextIntlProvider locale={locale} messages={messages} [1]>
  <Component {...pageProps} />
</NextIntlProvider>

Drag options to blanks, or click blank then click option'

AfallbackLocale

BdefaultLocale

CdefaultMessages

DfallbackMessages

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'defaultLocale' which is not a prop for NextIntlProvider.

Confusing fallback messages with fallback locale.

The 'fallbackLocale' prop specifies which locale to use if the current locale messages are missing.

4fill in blank

hard

Fill both blanks to create a translation hook and use it to translate a key.

NextJS

import { useTranslations } from 'next-intl';

export default function Greeting() {
  const t = [1]();
  return <p>{t([2])}</p>;
}

Drag options to blanks, or click blank then click option'

AuseTranslations

B'greeting.hello'

C'hello'

DuseTranslation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useTranslation' which is not from next-intl.

Passing incorrect or incomplete keys to the translation function.

The hook 'useTranslations' returns a function 't' to translate keys like 'greeting.hello'.

5fill in blank

hard

Fill all three blanks to define a messages object, load it, and pass it to NextIntlProvider.

NextJS

const messages = [1];

export async function getStaticProps() {
  return { props: { messages: [2] } };
}

export default function App({ Component, pageProps }) {
  return (
    <NextIntlProvider locale="en" messages=[3]>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}

Drag options to blanks, or click blank then click option'

A{ greeting: 'Hello' }

Bmessages

CpageProps.messages

DpageProps

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole pageProps instead of pageProps.messages to NextIntlProvider.

Not defining messages as an object.

We define a messages object, return it in getStaticProps, and pass pageProps.messages to NextIntlProvider.