Server component translations in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this server component using next-intl?

Given this Next.js server component using next-intl for translations, what will be rendered when the locale is set to en?

NextJS

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

export default function Greeting() {
  const t = useTranslations('Greeting');
  return <h1>{t('hello')}</h1>;
}

// Assume messages for 'en': { "Greeting": { "hello": "Hello, friend!" } }

A <h1>Hello, friend!</h1>

B <h1>Greeting.hello</h1>

C <h1>hello</h1>

D <h1>undefined</h1>

💡 Hint

Remember that useTranslations returns a function to get the translated string by key.

The useTranslations('Greeting') hook returns a function t that looks up keys inside the Greeting namespace. Calling t('hello') returns the translated string Hello, friend! for the en locale.

📝 Syntax

intermediate

Which option correctly loads translations in a Next.js server component?

In Next.js 14 server components, which code snippet correctly loads locale messages for translations?

A

import {readFileSync} from 'fs';

export default function Page({params}) {
  const messages = JSON.parse(readFileSync(`./locales/${params.locale}.json`, 'utf-8'));
  return <div>{messages.title}</div>;
}

B

import {readFile} from 'fs/promises';

export default function Page({params}) {
  const messages = JSON.parse(readFile(`./locales/${params.locale}.json`));
  return <div>{messages.title}</div>;
}

C

import {readFileSync} from 'fs';

export default async function Page({params}) {
  const messages = JSON.parse(readFileSync(`./locales/${params.locale}.json`, 'utf-8'));
  return <div>{messages.title}</div>;
}

D

import {readFileSync} from 'fs';

export default async function Page({params}) {
  const messages = await JSON.parse(readFileSync(`./locales/${params.locale}.json`, 'utf-8'));
  return <div>{messages.title}</div>;
}

💡 Hint

Consider synchronous vs asynchronous file reading in server components.

Server components can use synchronous APIs like readFileSync to load files. Option C correctly uses readFileSync inside an async function and parses JSON synchronously. Option C uses readFile without awaiting, causing an error. Option C is not async but uses synchronous read, which is allowed but less recommended. Option C incorrectly awaits a synchronous function.

❓ state_output

advanced

What is the output when switching locales in a server component with next-intl?

Consider this server component that switches locale based on params. What will be the output if params.locale is fr?

NextJS

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

export default function Page({params}) {
  const t = useTranslations('Home');
  return <p>{t('welcome')}</p>;
}

// Messages:
// en: { Home: { welcome: 'Welcome!' } }
// fr: { Home: { welcome: 'Bienvenue!' } }

A <p>Bienvenue!</p>

B <p>Welcome!</p>

C <p>Home.welcome</p>

D <p>undefined</p>

💡 Hint

The locale is passed via params and affects which messages are loaded.

The useTranslations hook uses the current locale from the server context, which is set by params.locale. For fr, it loads French messages, so t('welcome') returns Bienvenue!.

🔧 Debug

advanced

Why does this server component throw an error when using useTranslations?

Given this server component code, why does it throw an error?

NextJS

import {useTranslations} from 'next-intl';

export default async function Page() {
  const t = useTranslations('Common');
  return <p>{t('hello')}</p>;
}

A useTranslations cannot be used in async server components because it relies on React hooks.

B The component must import 'useTranslations' from 'next-intl/server' in server components.

C The component is missing a 'use client' directive, so hooks cannot run.

D The 'Common' namespace is missing from the messages, causing a runtime error.

💡 Hint

Check the import source for useTranslations in server components.

In Next.js server components, you must import useTranslations from next-intl/server instead of next-intl. Importing from next-intl is for client components and causes errors in server components.

🧠 Conceptual

expert

How does Next.js server component translations improve performance compared to client-side translations?

Which statement best explains the performance benefit of using server component translations in Next.js?

A Server components cache translations in the browser, improving client-side rendering speed.

B Translations are fetched on the client after page load, allowing faster initial server response.

C Using server component translations disables React hydration, making the page static.

D Translations are loaded and rendered on the server, reducing client bundle size and avoiding runtime translation loading on the client.

💡 Hint

Think about where translation data is loaded and how it affects client code size.

Server component translations load and render translated text on the server. This reduces the JavaScript sent to the client because translation logic and data do not need to be included in client bundles. It also avoids client runtime translation loading, improving performance and reducing flicker.

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