Server component translations in NextJS - Step-by-Step Execution

Concept Flow - Server component translations

Start Server Component

↓

Load translation files

↓

Select locale based on request

↓

Fetch translations for locale

↓

Render component with translations

↓

Send rendered HTML to client

↓

Client receives translated content

This flow shows how a Next.js server component loads translations based on the user's locale, renders the content with those translations, and sends the HTML to the client.

Execution Sample

NextJS

import { cookies } from 'next/headers';
import { getTranslations } from './i18n';

export default async function Page() {
  const locale = cookies().get('locale')?.value || 'en';
  const t = await getTranslations(locale);
  return <h1>{t('welcome')}</h1>;
}

This server component reads the locale from cookies, loads translations, and renders a heading with the translated 'welcome' text.

Execution Table

Step	Action	Evaluation	Result
1	Read cookies for 'locale'	cookies().get('locale')?.value	'fr'
2	Locale found?	Is 'fr' defined?	Yes
3	Load translations for 'fr'	await getTranslations('fr')	{ welcome: 'Bienvenue' }
4	Render <h1> with t('welcome')	t('welcome')	Bienvenue
5	Send rendered HTML to client	<h1>Bienvenue</h1>	Client receives translated content

💡 Translations loaded and component rendered with locale 'fr', then sent to client.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
locale	undefined	'fr'	'fr'	'fr'
t	undefined	undefined	{ welcome: 'Bienvenue' }	{ welcome: 'Bienvenue' }

Key Moments - 2 Insights

Why do we use 'await' when loading translations?

Because loading translations is asynchronous (it may read files or fetch data), 'await' pauses rendering until translations are ready, as shown in step 3 of the execution_table.

What happens if the 'locale' cookie is missing?

The code defaults to 'en' locale (English), so translations for 'en' are loaded instead, ensuring the component still renders, as seen in step 2 where it checks if locale exists.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'locale' after step 1?

A 'en'

B 'fr'

C undefined

D null

💡 Hint

Check the 'Evaluation' column in step 1 where cookies().get('locale')?.value is read.

At which step does the component get rendered with the translated text?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step where

is rendered with t('welcome') in the 'Action' column.

If the locale cookie was missing, what would be the default locale used?

A 'en'

B 'fr'

C undefined

D 'es'

💡 Hint

Refer to the code line where locale is assigned with fallback 'en' if cookie is missing.

Concept Snapshot

Server component translations in Next.js:
- Read user locale from cookies or default to 'en'
- Load translations asynchronously with await
- Render component with translated strings
- Send fully rendered HTML to client
- Ensures fast, localized content without client JS

Full Transcript

This example shows how a Next.js server component handles translations. First, it reads the user's locale from cookies. If no locale is found, it defaults to English. Then it loads the translation data asynchronously for that locale. After translations are ready, the component renders the content using the translated strings. Finally, the server sends the fully rendered HTML to the client. This approach delivers localized content quickly without needing client-side JavaScript to translate.