Content translation management in NextJS - Performance & Optimization

Performance: Content translation management

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by managing how translated content is loaded and rendered.

Loading translations for a multilingual Next.js site

NextJS

import { useRouter } from 'next/router';
import en from '../locales/en.json';
import fr from '../locales/fr.json';

const translations = { en, fr };

export default function Page() {
  const { locale } = useRouter();
  const t = translations[locale] || translations.en;
  return <div>{t.welcome}</div>;
}

Loads only the current locale translations, reducing bundle size and enabling faster rendering.

📈 Performance GainSaves 80-150kb in bundle size, reduces LCP by 200-400ms

Loading translations for a multilingual Next.js site

NextJS

import translations from '../locales/all-translations.json';

export default function Page() {
  const t = translations['en'];
  return <div>{t.welcome}</div>;
}

Imports all translations for all languages at once, increasing bundle size and blocking initial render.

📉 Performance CostAdds 100-200kb to bundle, blocking rendering and increasing LCP by 300-500ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Import all translations at once	Minimal DOM changes	Multiple reflows due to delayed render	High paint cost due to large bundle	[X] Bad
Load only current locale translations	Minimal DOM changes	Single reflow on initial render	Low paint cost with smaller bundle	[OK] Good
Fetch translations on client after render	DOM updates after fetch	Reflow and layout shift on update	Medium paint cost with delayed content	[!] OK
Preload translations with static props	DOM ready with translations	Single reflow	Low paint cost, stable layout	[OK] Good

Rendering Pipeline

Translation management affects the loading and rendering stages by controlling when and how translated text is available for the browser to paint.

→HTML Parsing

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout due to large translation data or delayed translation availability

Core Web Vital Affected

LCP

This affects page load speed and interaction responsiveness by managing how translated content is loaded and rendered.

Optimization Tips

1Load only the current locale's translations to reduce bundle size.

2Use static generation or server-side rendering to preload translations.

3Avoid client-side fetching of translations after initial render to prevent layout shifts.

Performance Quiz - 3 Questions

What is a performance downside of importing all translations for every language in a Next.js app?

A It improves caching and reduces network requests.

B It reduces JavaScript execution time.

C It increases bundle size and delays initial page render.

D It eliminates layout shifts completely.

DevTools: Performance

How to check: Record a page load in DevTools Performance panel, then analyze the Main thread for long JavaScript tasks and check the Timing section for LCP timing.

What to look for: Look for long JS execution blocking rendering and delayed LCP events indicating translation loading delays.

Practice

1. What is the main purpose of using useTranslations in a Next.js app?

easy

A. To load and display text in different languages based on user preference

B. To manage user authentication and sessions

C. To optimize images for faster loading

D. To handle API requests and responses

Solution

1. Step 1: Understand the role of useTranslations

   This hook is designed to fetch the correct text strings from translation files depending on the user's language.

2. Step 2: Identify the purpose in context

   Since it loads text in different languages, it helps show the site content in the user's preferred language.

3. Final Answer:

   To load and display text in different languages based on user preference -> Option A

4. Quick Check:

   useTranslations = load text by language [OK]

Hint: Remember: useTranslations is for language text, not other features [OK]

Common Mistakes:

• Confusing translation hook with authentication
• Thinking it manages images or APIs
• Assuming it changes site layout

2. Which of the following is the correct way to import the useTranslations hook in a Next.js component?

easy

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

B. import useTranslations from 'react';

C. import { useTranslations } from 'next-intl';

D. import useTranslations from 'next/head';

Solution

1. Step 1: Identify the correct package for translations

   The useTranslations hook comes from the next-intl package, which handles internationalization in Next.js.

2. Step 2: Check the import syntax

   The correct syntax uses named import from 'next-intl', so import { useTranslations } from 'next-intl'; is correct.

3. Final Answer:

   import { useTranslations } from 'next-intl'; -> Option C

4. Quick Check:

   Correct import = import { useTranslations } from 'next-intl'; [OK]

Hint: useTranslations always imports from 'next-intl' with curly braces [OK]

Common Mistakes:

• Importing from 'react' or 'next/router' by mistake
• Using default import instead of named import
• Importing from unrelated Next.js modules

3. Given this Next.js component snippet using useTranslations:

import { useTranslations } from 'next-intl';

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

If the translation JSON for English is {"hello": "Hello!"} and for Spanish is {"hello": "¡Hola!"}, what will be rendered when the user language is Spanish?

medium

A. ¡Hola!

B. Hello!

C. {t('hello')}

D. Greeting.hello

Solution

1. Step 1: Understand how useTranslations works with keys

   The hook returns a function t that looks up the key 'hello' in the 'Greeting' namespace for the current language.

2. Step 2: Apply the Spanish translation

   Since the user language is Spanish, the key 'hello' maps to '¡Hola!'. So the component renders <h1>¡Hola!</h1>.

3. Final Answer:

   <h1>¡Hola!</h1> -> Option A

4. Quick Check:

   Spanish 'hello' = '¡Hola!' [OK]

Hint: Match key to language JSON to find displayed text [OK]

Common Mistakes:

• Thinking it renders the key name instead of translation
• Confusing English and Spanish outputs
• Expecting raw function output instead of string

4. You have this code snippet in a Next.js page:

import { useTranslations } from 'next-intl';

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

But when running, you get an error: TypeError: t is not a function. What is the most likely cause?

medium

A. The useTranslations hook is imported incorrectly

B. The translation JSON file for 'Home' is missing or not loaded

C. The component is missing a return statement

D. The key 'welcome' is misspelled in the code

Solution

1. Step 1: Analyze the error message

   The error says t is not a function, meaning useTranslations did not return a function.

2. Step 2: Check common causes

   This usually happens if the translation data for the 'Home' namespace is missing or not loaded, so the hook cannot create the translation function.

3. Final Answer:

   The translation JSON file for 'Home' is missing or not loaded -> Option B

4. Quick Check:

   Missing translation data causes t not a function error [OK]

Hint: Check translation files exist and load before using hook [OK]

Common Mistakes:

• Assuming import error without checking translation files
• Thinking it's a syntax error
• Ignoring missing translation JSON

5. You want to show a greeting message that changes based on user language and also includes the user's name dynamically. Which approach correctly uses useTranslations with interpolation in Next.js?

hard

A. const t = useTranslations('Greeting'); return {t('welcome', userName)}; // JSON: { "welcome": "Hello, {name}!" }

B. const t = useTranslations('Greeting'); return {t('welcome') + userName}; // JSON: { "welcome": "Hello," }

C. const t = useTranslations('Greeting'); return {t('welcome')}; // JSON: { "welcome": "Hello, userName!" }

D. const t = useTranslations('Greeting'); return {t('welcome', { name: userName })}; // JSON: { "welcome": "Hello, {name}!" }

Solution

1. Step 1: Understand interpolation syntax in useTranslations

   The hook supports passing an object with variables to replace placeholders like {name} in the translation string.

2. Step 2: Match code and JSON for correct interpolation

   const t = useTranslations('Greeting'); return <p>{t('welcome', { name: userName })}</p>; // JSON: { "welcome": "Hello, {name}!" } passes an object { name: userName } matching the placeholder {name} in JSON, so it correctly inserts the user's name.

3. Final Answer:

   const t = useTranslations('Greeting'); return <p>{t('welcome', { name: userName })}</p>; // JSON: { "welcome": "Hello, {name}!" } -> Option D

4. Quick Check:

   Interpolation needs object with keys matching placeholders [OK]

Hint: Pass an object with keys matching placeholders for interpolation [OK]

Common Mistakes:

• Concatenating strings instead of using interpolation
• Passing variable directly instead of an object
• Hardcoding variable names inside translation strings