React / Next.js

React / Next.js

FRONTEND

āļāļēāļĢāļžāļąāļ’āļ™āļēāļŸāļĢāļ­āļ™āļ—āđŒāđ€āļ­āļ™āļ”āđŒāļŠāļĄāļąāļĒāđƒāļŦāļĄāđˆāļ—āļĩāđˆāļĢāļ§āļĄ React āđ€āļ›āđ‡āļ™āđ„āļĨāļšāļĢāļēāļĢāļĩ UI āļāļąāļš Next.js āđ€āļ›āđ‡āļ™āđ€āļŸāļĢāļĄāđ€āļ§āļīāļĢāđŒāļ full-stack āļŠāļ–āļēāļ›āļąāļ•āļĒāļāļĢāļĢāļĄāļ—āļĩāđˆāļ­āļīāļ‡āļˆāļēāļ Server Component, App Router, Server Action āđāļĨāļ°āļāļēāļĢāđ€āļĢāļ™āđ€āļ”āļ­āļĢāđŒāđāļšāļšāđ„āļŪāļšāļĢāļīāļ” (SSR, SSG, ISR) āļŠāļģāļŦāļĢāļąāļšāđāļ­āļ›āļžāļĨāļīāđ€āļ„āļŠāļąāļ™āļžāļĢāđ‰āļ­āļĄāđƒāļŠāđ‰āļ‡āļēāļ™ production

āļŠāļīāđˆāļ‡āļ—āļĩāđˆāļ„āļļāļ“āļˆāļ°āđ„āļ”āđ‰āđ€āļĢāļĩāļĒāļ™āļĢāļđāđ‰

React āļŠāļĄāļąāļĒāđƒāļŦāļĄāđˆ āļžāļĢāđ‰āļ­āļĄ Server Component, Suspense āđāļĨāļ° hook āļ‚āļąāđ‰āļ™āļŠāļđāļ‡ (useActionState, use)

Next.js App Router āļžāļĢāđ‰āļ­āļĄ layout, streaming SSR āđāļĨāļ° partial prerendering

Server Action āļŠāļģāļŦāļĢāļąāļš mutation āļāļąāđˆāļ‡āđ€āļ‹āļīāļĢāđŒāļŸāđ€āļ§āļ­āļĢāđŒāđ‚āļ”āļĒāđ„āļĄāđˆāļ•āđ‰āļ­āļ‡āļĄāļĩ API route

TypeScript āđ€āļ‚āđ‰āļĄāļ‡āļ§āļ”āļžāļĢāđ‰āļ­āļĄāļāļēāļĢāļ­āļ™āļļāļĄāļēāļ™āđāļĨāļ°āļ„āļ§āļēāļĄāļ›āļĨāļ­āļ”āļ āļąāļĒāļ‚āļ­āļ‡āļ›āļĢāļ°āđ€āļ āļ—

āļāļēāļĢāļāļģāļŦāļ™āļ”āđ€āļŠāđ‰āļ™āļ—āļēāļ‡āđāļšāļš file-based āļžāļĢāđ‰āļ­āļĄ dynamic route āđāļĨāļ° route group

āļāļēāļĢāļ”āļķāļ‡āļ‚āđ‰āļ­āļĄāļđāļĨāļŠāļĄāļąāļĒāđƒāļŦāļĄāđˆ (fetch āļžāļĢāđ‰āļ­āļĄ cache, Server Component, āļ‚āđ‰āļ­āļĄāļđāļĨāđāļšāļšāļ‚āļ™āļēāļ™)

āļāļēāļĢāļˆāļąāļ”āļāļēāļĢāļŠāļ–āļēāļ™āļ° (Context API, Zustand, TanStack Query āļŠāļģāļŦāļĢāļąāļš server cache)

āļāļēāļĢāļˆāļąāļ”āļŠāđ„āļ•āļĨāđŒāļ”āđ‰āļ§āļĒ TailwindCSS, CSS Modules, styled-components āļŦāļĢāļ·āļ­ Sass

āļāļēāļĢāļ—āļ”āļŠāļ­āļšāļ­āļĒāđˆāļēāļ‡āļ„āļĢāļ­āļšāļ„āļĨāļļāļĄ (Vitest/Jest, React Testing Library, Playwright/Cypress)

āļ›āļĢāļ°āļŠāļīāļ—āļ˜āļīāļ āļēāļž (āđ€āļžāļīāđˆāļĄāļ›āļĢāļ°āļŠāļīāļ—āļ˜āļīāļ āļēāļž Image/Font, code splitting, lazy loading, analytics)

āļŦāļąāļ§āļ‚āđ‰āļ­āļŠāļģāļ„āļąāļāļ—āļĩāđˆāļ•āđ‰āļ­āļ‡āđ€āļŠāļĩāđˆāļĒāļ§āļŠāļēāļ

āđāļ™āļ§āļ„āļīāļ”āļ—āļĩāđˆāļŠāļģāļ„āļąāļāļ—āļĩāđˆāļŠāļļāļ”āđ€āļžāļ·āđˆāļ­āđ€āļ‚āđ‰āļēāđƒāļˆāđ€āļ—āļ„āđ‚āļ™āđ‚āļĨāļĒāļĩāļ™āļĩāđ‰āđāļĨāļ°āļ›āļĢāļ°āļŠāļšāļ„āļ§āļēāļĄāļŠāļģāđ€āļĢāđ‡āļˆāđƒāļ™āļāļēāļĢāļŠāļąāļĄāļ āļēāļĐāļ“āđŒ

1

React: JSX, Virtual DOM, reconciliation, āļŠāļ–āļēāļ›āļąāļ•āļĒāļāļĢāļĢāļĄ fiber

2

Hook āļŠāļĄāļąāļĒāđƒāļŦāļĄāđˆ: useState, useEffect, useContext, useMemo, useCallback, useActionState

3

Server Component vs Client Component ("use client"), āļĢāļđāļ›āđāļšāļšāļāļēāļĢāļ›āļĢāļ°āļāļ­āļš

4

Props, State, āļāļēāļĢāļĒāļāļŠāļ–āļēāļ™āļ°āļ‚āļķāđ‰āļ™, prop drilling āđāļĨāļ°āļ§āļīāļ˜āļĩāđāļāđ‰āđ„āļ‚

5

āļ§āļ‡āļˆāļĢāļŠāļĩāļ§āļīāļ• React, āļāļēāļĢāļ—āļģāļ„āļ§āļēāļĄāļŠāļ°āļ­āļēāļ” useEffect, āļ­āļēāļĢāđŒāđ€āļĢāļĒāđŒ dependency, strict mode

6

Next.js App Router: āļāļēāļĢāļāļģāļŦāļ™āļ”āđ€āļŠāđ‰āļ™āļ—āļēāļ‡, layout, template, āļŠāļ–āļēāļ™āļ° loading/error

7

āļāļēāļĢāļ”āļķāļ‡āļ‚āđ‰āļ­āļĄāļđāļĨ: async Server Component, fetch caching, āļāļĨāļĒāļļāļ—āļ˜āđŒāļāļēāļĢ revalidation

8

Server Action: progressive enhancement, useActionState, āļāļēāļĢāļˆāļąāļ”āļāļēāļĢāļŸāļ­āļĢāđŒāļĄ

9

āļāļĨāļĒāļļāļ—āļ˜āđŒāļāļēāļĢāđ€āļĢāļ™āđ€āļ”āļ­āļĢāđŒ: SSR, SSG, ISR, client-side, streaming

10

āļāļēāļĢāļˆāļąāļ”āļāļēāļĢāļŠāļ–āļēāļ™āļ°: Context API, Zustand, Redux Toolkit, server state (TanStack Query)

11

āļ›āļĢāļ°āļŠāļīāļ—āļ˜āļīāļ āļēāļž: React.memo, useMemo, useCallback, lazy loading, āļ‚āļ­āļšāđ€āļ‚āļ• Suspense

12

āļāļēāļĢāļāļģāļŦāļ™āļ”āđ€āļŠāđ‰āļ™āļ—āļēāļ‡: dynamic route, parallel route, intercepting route, middleware

13

Metadata āđāļĨāļ° SEO: generateMetadata, sitemap, robots.txt, Open Graph

14

āļāļēāļĢāļ—āļ”āļŠāļ­āļš: āļ—āļ”āļŠāļ­āļš component, āļ—āļ”āļŠāļ­āļšāļāļēāļĢāļĢāļ§āļĄ, E2E, mock, āļĢāļđāļ›āđāļšāļšāļāļēāļĢāļ—āļ”āļŠāļ­āļš

15

āļāļēāļĢāđ€āļžāļīāđˆāļĄāļ›āļĢāļ°āļŠāļīāļ—āļ˜āļīāļ āļēāļž build, āļ§āļīāđ€āļ„āļĢāļēāļ°āļŦāđŒ bundle, āļāļēāļĢ deploy (Vercel, Docker), āļāļēāļĢāļ•āļīāļ”āļ•āļēāļĄ

āļšāļ—āļ„āļ§āļēāļĄ React / Next.js āļĨāđˆāļēāļŠāļļāļ”

āļ„āđ‰āļ™āļžāļšāļšāļ—āļ„āļ§āļēāļĄāđāļĨāļ°āļ„āļđāđˆāļĄāļ·āļ­āļĨāđˆāļēāļŠāļļāļ”āđ€āļāļĩāđˆāļĒāļ§āļāļąāļš React / Next.js

Cache Components āđƒāļ™ Next.js 16: use cache, PPR āđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ‡āļēāļ™

Cache Components āđƒāļ™ Next.js 16 āļ›āļĩ 2026: āļ„āļđāđˆāļĄāļ·āļ­āļ„āļĢāļšāļ–āđ‰āļ§āļ™ use cache, PPR āđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ‡āļēāļ™

āļ„āļđāđˆāļĄāļ·āļ­āđ€āļŠāļīāļ‡āļĨāļķāļāđ€āļāļĩāđˆāļĒāļ§āļāļąāļš Cache Components āđƒāļ™ Next.js 16: directive use cache āļ—āļąāđ‰āļ‡āļŠāļēāļĄāļĢāļ°āļ”āļąāļš, Partial Pre-Rendering, cacheLife profiles, cacheTag, āļ„āļ§āļēāļĄāļ›āļĨāļ­āļ”āļ āļąāļĒāļ‚āļ­āļ‡ cache āđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ‡āļēāļ™āļŠāļģāļŦāļĢāļąāļš developer āđƒāļ™āļ›āļĩ 2026

React Compiler 2026 memoization āļ­āļąāļ•āđ‚āļ™āļĄāļąāļ•āļīāđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ‡āļēāļ™

React Compiler āđƒāļ™āļ›āļĩ 2026: Automatic Memoization āđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ‡āļēāļ™

āđ€āļĢāļĩāļĒāļ™āļĢāļđāđ‰ React Compiler āļ—āļĩāđˆāļ—āļģ memoization āļ­āļąāļ•āđ‚āļ™āļĄāļąāļ•āļī āļžāļĢāđ‰āļ­āļĄāļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ‡āļēāļ™āļĒāļ­āļ”āļ™āļīāļĒāļĄāļŠāļģāļŦāļĢāļąāļšāļ™āļąāļāļžāļąāļ’āļ™āļē React āđƒāļ™āļ›āļĩ 2026

āļĢāļđāļ›āđāļšāļšāđāļĨāļ°āļāļąāļšāļ”āļąāļāļ‚āļ­āļ‡ React Server Components āđƒāļ™āđ‚āļ›āļĢāļ”āļąāļāļŠāļąāļ™

React Server Components āđƒāļ™āđ‚āļ›āļĢāļ”āļąāļāļŠāļąāļ™: āļĢāļđāļ›āđāļšāļšāđāļĨāļ°āļāļąāļšāļ”āļąāļ

React Server Components āđƒāļ™āđ‚āļ›āļĢāļ”āļąāļāļŠāļąāļ™: āļĢāļđāļ›āđāļšāļšāļ—āļĩāđˆāļœāđˆāļēāļ™āļāļēāļĢāļžāļīāļŠāļđāļˆāļ™āđŒ āđāļ­āļ™āļ•āļĩāđ‰āđāļžāļ—āđ€āļ—āļīāļĢāđŒāļ™āļ—āļĩāđˆāļžāļšāļšāđˆāļ­āļĒ āđāļĨāļ°āļāļĨāļĒāļļāļ—āļ˜āđŒāļāļēāļĢāļ”āļĩāļšāļąāļāļŠāļģāļŦāļĢāļąāļšāđāļ­āļ› Next.js 15 āļ—āļĩāđˆāļĄāļąāđˆāļ™āļ„āļ‡

āļ”āļđāļšāļ—āļ„āļ§āļēāļĄ React / Next.js āļ—āļąāđ‰āļ‡āļŦāļĄāļ”