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.

Practice

1. What is the main benefit of using server component translations in Next.js?

easy

A. They send translated HTML directly from the server, improving performance and SEO.

B. They allow translations to be updated on the client without reloading the page.

C. They automatically translate user input in forms.

D. They enable real-time chat translations between users.

Solution

1. Step 1: Understand server component translations purpose

   Server component translations generate translated HTML on the server before sending it to the browser.

2. Step 2: Identify benefits of server-side translation

   This approach improves performance by reducing client work and boosts SEO by sending ready-to-read translated content.

3. Final Answer:

   They send translated HTML directly from the server, improving performance and SEO. -> Option A

4. Quick Check:

   Server translations = better performance and SEO [OK]

Hint: Server translations improve SEO by sending ready HTML [OK]

Common Mistakes:

• Thinking translations happen on the client side
• Confusing server translations with real-time chat features
• Assuming translations update without page reload

2. Which is the correct way to import the translation function in a Next.js server component?

easy

A. import useTranslations from 'react-intl';

B. import { getTranslations } from 'next-intl/server';

C. import { useTranslation } from 'next-i18next';

D. import { useTranslations } from 'next/router';

Solution

1. Step 1: Identify the correct package for server translations

   Next.js server component translations use the 'next-intl' package.

2. Step 2: Check the correct import syntax

   The function is named 'getTranslations' and imported with curly braces from 'next-intl/server'.

3. Final Answer:

   import { getTranslations } from 'next-intl/server'; -> Option B

4. Quick Check:

   Correct import = getTranslations from next-intl/server [OK]

Hint: Use curly braces to import getTranslations from next-intl/server [OK]

Common Mistakes:

• Using 'useTranslations' instead of 'getTranslations'
• Importing from 'react-intl' or 'next-i18next' by mistake
• Importing from 'next/router' which is unrelated

3. Given this server component code, what will be rendered if the locale is 'en' and translations contain { greeting: 'Hello' }?

import { getTranslations } from 'next-intl/server';

export default async function Greeting() {
  const t = await getTranslations();
  return <h1>{t('greeting')}</h1>;
}

medium

A. Hello

B. greeting

C. Error: Missing translation key

D. undefined

Solution

1. Step 1: Understand getTranslations usage

   The function, when awaited, returns a function 't' that looks up translation keys for the current locale.

2. Step 2: Check the translation key and locale

   For locale 'en', 'greeting' key maps to 'Hello', so t('greeting') returns 'Hello'.

3. Final Answer:

   <h1>Hello</h1> -> Option A

4. Quick Check:

   t('greeting') = 'Hello' [OK]

Hint: t('key') returns translated string for current locale [OK]

Common Mistakes:

• Expecting the key name to render instead of the value
• Assuming an error if key exists
• Thinking undefined is returned for existing keys

4. What is wrong with this server component code for translations?

import { getTranslations } from 'next-intl/server';

export default async function Welcome() {
  const t = await getTranslations('common');
  return <div>{t('welcome')}</div>;
}

Assuming translations for 'common' namespace are not loaded.

medium

A. It will throw an error because the 'common' namespace translations are missing.

B. It will silently render nothing for missing keys.

C. It will render the namespaced key 'common.welcome' as fallback text.

D. It will fallback to English translations automatically.

Solution

1. Step 1: Understand namespace usage in getTranslations

   Passing 'common' scopes the lookup to keys prefixed with 'common.'.

2. Step 2: Check behavior when namespace translations are missing

   If 'common.welcome' is missing, it falls back to rendering 'common.welcome'.

3. Final Answer:

   It will render the namespaced key 'common.welcome' as fallback text. -> Option C

4. Quick Check:

   Missing translation = fallback to namespaced id [OK]

Hint: Missing namespace translation falls back to 'common.welcome' [OK]

Common Mistakes:

• Expecting an error instead of fallback text
• Assuming silent failure with empty output
• Thinking automatic fallback to English happens

5. You want to create a server component that shows a greeting in the user's locale and falls back to English if the translation is missing. Which approach correctly handles this?

hard

A. Wrap getTranslations() with a try-catch and return English string on error.

B. Load all locales on the server and use getTranslations() without fallback logic.

C. Use client-side translation hooks to handle fallback automatically.

D. Use getTranslations() and call t('greeting', {defaultMessage: 'Hello'}).

Solution

1. Step 1: Understand fallback behavior in server translations

   Server translations fallback to the message id if key is missing.

2. Step 2: Implement fallback with defaultMessage

   Use the defaultMessage option in t() to provide a custom English fallback string.

3. Final Answer:

   Use getTranslations() and call t('greeting', {defaultMessage: 'Hello'}) -> Option D

4. Quick Check:

   t(key, {defaultMessage}) = custom fallback [OK]

Hint: t('key', {defaultMessage: 'Hello'}) handles fallback [OK]

Common Mistakes:

• Assuming automatic fallback without code
• Loading all locales unnecessarily on server
• Using client hooks in server components incorrectly