Server component translations in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the translation function in a Next.js server component.

NextJS

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

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

AuseLocale

BuseTranslations

CuseRouter

DgetTranslations

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'next-intl/client' instead of 'next-intl/server'.

Using 'useRouter' instead of the translation function.

The getTranslations function is imported from next-intl/server to fetch translations in server components.

2fill in blank

medium

Complete the code to get the locale from the Next.js params in a server component.

NextJS

export default async function Page({ params }: { params: { locale: string } }) {
  const locale = params.[1];
}

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

Alocale

Blang

Clanguage

Dregion

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lang' or 'language' instead of 'locale'.

Trying to get locale from query instead of params.

The locale is accessed from params.locale as defined in the route parameters.

3fill in blank

hard

Fix the error in the code to load translations for the current locale.

NextJS

const t = await [1]();

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

AloadTranslations

BuseTranslations

CgetTranslations

DfetchTranslations

Attempts:

3 left

💡 Hint

Common Mistakes

Using useTranslations which is a hook and cannot be awaited.

Using non-existent functions like fetchTranslations.

The getTranslations function is used to load translations asynchronously in server components.

4fill in blank

hard

Fill both blanks to create a translated heading and paragraph in a server component.

NextJS

return (
  <>
    <h1>[1]('home.title')</h1>
    <p>[2]('home.description')</p>
  </>
);

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

At

Btranslate

CuseTranslations

DgetTranslations

Attempts:

3 left

💡 Hint

Common Mistakes

Using useTranslations directly in JSX without calling it.

Using different variables for each translation call.

The translation function t is called with keys to render translated text.

5fill in blank

hard

Fill all three blanks to correctly import, load, and use translations in a Next.js server component.

NextJS

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

export default async function Page({ params }) {
  const t = await [2]();
  return <h1>[3]('welcome.message')</h1>;
}

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

AuseTranslations

BgetTranslations

Ct

DuseRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up import and loading functions.

Using useRouter instead of translation functions.

Not awaiting the translation loading function.

First, import getTranslations. Then, load translations with getTranslations. Finally, use the translation function t to render text.