Intermediate 6 topic areas 102+ exercises

React / Next.js Developer

React and Next.js Developers build the majority of modern web frontends — composing components, managing state and effects, and choosing between server and client rendering on every route. Their daily English covers explaining a hooks dependency bug in a code review, writing a migration plan from the Pages Router to the App Router, and presenting a bundle-size or hydration fix in a sprint demo. This path builds the vocabulary for the most widely used frontend stack in the industry.

Topics covered

  • React core vocabulary
  • Next.js rendering strategies
  • State management ecosystem
  • Performance & concurrent features
  • Testing vocabulary
  • Migration & architecture

Vocabulary spotlight

4 terms every React / Next.js Developer should know in English:

Server Component n.

A React component that renders on the server and sends no JavaScript to the client, reducing bundle size for non-interactive UI

"We converted the product listing page to a Server Component and cut the client bundle by 60%."
hydration n.

The process of attaching event handlers to server-rendered HTML on the client so it becomes interactive

"A hydration mismatch warning usually means the server and client rendered different content for the same component."
stale closure n.

A bug where a function inside a hook captures an outdated value from a previous render because it was missing from the dependency array

"The click handler kept logging the old count — a classic stale closure from an empty useEffect dependency array."
ISR n.

Incremental Static Regeneration — a Next.js rendering mode that serves a cached static page and regenerates it in the background after a set interval

"We used ISR with a 60-second revalidation window so the pricing page stays fast but never more than a minute stale."
Open full glossary →

📚 Vocabulary Reference

Key terms organised by category for React / Next.js Developers:

React Core

componenthookstateeffectcontextrefrender cyclereconciliationkey propcontrolled component

Next.js

App RouterServer ComponentClient ComponentSSRSSGISRRoute Handlermiddlewarelayoutserver action

Ecosystem

ReduxZustandReact QuerySWRTanstackReact Hook FormStorybookReact Testing LibraryVitestSuspense

Performance

memoizationvirtualizationcode splittingconcurrent renderinghydrationlazy loadingbundle analysisstale closurewaterfall requeststreaming SSR
Study full vocabulary modules →

Recommended exercises

Real-world scenarios you'll practise

  • Explaining a stale closure bug in a code review comment and suggesting the missing dependency
  • Writing a migration plan from the Pages Router to the App Router for a team unfamiliar with Server Components
  • Presenting an ISR caching strategy to a product manager who wants "instant" content updates
  • Justifying a choice between SWR and Redux for a specific data-fetching scenario in a design review

Recommended reading

Explore another role

🐍 Python Developer

Open path →

Frequently Asked Questions

What English skills do React / Next.js Developers most need to improve?+

React / Next.js Developers most commonly need to improve: technical vocabulary (the correct English terms for domain concepts), collocation accuracy (using the right verb for each action), written communication (bug reports, PR descriptions, technical docs), and spoken communication for standups, code reviews, and stakeholder meetings.

How long does the React / Next.js Developer learning path take?+

The React / Next.js Developer learning path contains 20–40 hours of material studied comprehensively. Most learners focus on the highest-priority modules first and return to the rest over time. Spending 30 minutes per day for 4–6 weeks produces noticeable improvement in workplace English.

What vocabulary should a React / Next.js Developer prioritise first?+

Start with the vocabulary that appears most in your daily work — terms you read in documentation, use in commit messages, and hear in meetings. The React / Next.js Developer path begins with the most frequent vocabulary clusters before moving to advanced communication patterns.

Are there interview exercises for React / Next.js Developer roles?+

Yes. The React / Next.js Developer path includes role-specific interview question modules with model answers and key phrases — the actual questions interviewers ask and the vocabulary needed to answer them fluently. There is also a dedicated Interview Practice hub for general interview skills.

Does this path include pronunciation help?+

Yes. The path links to pronunciation exercises for the technical terms most commonly mispronounced in this domain. The Pronunciation hub includes drills for acronyms, silent letters, word stress, and minimal pairs — all in IT context.

What are the most common English mistakes React / Next.js Developers make?+

The most common mistakes: incorrect collocations (using the wrong verb with a technical noun), false friends from L1, tense errors when narrating past incidents or walkthroughs, and using overly formal or overly casual register in written communication.

How do I improve my English for code reviews?+

Learn the standard code review collocations: approve a PR, request changes, leave a nit, address feedback, block a merge, resolve a conversation. Use hedging language for suggestions: "This might be cleaner as…", "Have you considered…?". The Collocations section includes a dedicated Code Review set.

Can I use this path alongside my daily work?+

Yes — the path is designed for working professionals. Each exercise set takes 10–15 minutes. The most effective approach is to study a vocabulary module before a meeting or task where you'll use that vocabulary, then practise immediately after. Context-linked practice produces much faster retention.

Is the content free?+

Yes, completely free. No registration required, no payment, no time limit. All vocabulary modules, exercises, glossary entries, and learning path guides are open access.

How do I track my progress through this path?+

Progress is tracked in your browser's local storage — completed exercise sets are marked with a checkmark when you return. No account is needed. You can bookmark specific modules and use the exercises overview to see which sets you've completed.