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 āļĨāđˆāļēāļŠāļļāļ”

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

āđāļœāļ™āļ āļēāļž workflow āļāļēāļĢāļ—āļ”āļŠāļ­āļš React āđƒāļ™āļ›āļĩ 2026 āļ”āđ‰āļ§āļĒ Vitest āđāļĨāļ° React Testing Library

āļāļēāļĢāļ—āļ”āļŠāļ­āļš React āđƒāļ™āļ›āļĩ 2026: Vitest, React Testing Library āđāļĨāļ° Best Practices

āđ€āļŠāļĩāđˆāļĒāļ§āļŠāļēāļāļāļēāļĢāļ—āļ”āļŠāļ­āļš React āļ”āđ‰āļ§āļĒ Vitest āđāļĨāļ° React Testing Library āđ€āļĢāļĩāļĒāļ™āļĢāļđāđ‰āļĢāļđāļ›āđāļšāļšāļāļēāļĢāļ—āļ”āļŠāļ­āļš component āļāļēāļĢāļˆāļąāļ”āļāļēāļĢ async āļāļĨāļĒāļļāļ—āļ˜āđŒ mocking āđāļĨāļ° best practices āļŠāļģāļŦāļĢāļąāļšāļāļēāļĢāļŠāļąāļĄāļ āļēāļĐāļ“āđŒ 2026

āļāļēāļĢāđ€āļ›āļĢāļĩāļĒāļšāđ€āļ—āļĩāļĒāļš Zustand āļāļąāļš Redux Toolkit āļŠāļģāļŦāļĢāļąāļšāļāļēāļĢāļˆāļąāļ”āļāļēāļĢ state āļ‚āļ­āļ‡ React āđƒāļ™āļ›āļĩ 2026

Zustand āļāļąāļš Redux Toolkit āđƒāļ™āļ›āļĩ 2026: āđ€āļĨāļ·āļ­āļāļ•āļąāļ§āļˆāļąāļ”āļāļēāļĢ state āļ‚āļ­āļ‡ React āļ•āļąāļ§āđ„āļŦāļ™āļ”āļĩ?

āđ€āļ›āļĢāļĩāļĒāļšāđ€āļ—āļĩāļĒāļšāđ€āļŠāļīāļ‡āļ›āļāļīāļšāļąāļ•āļīāļ›āļĩ 2026 āļĢāļ°āļŦāļ§āđˆāļēāļ‡ Zustand 5 āļāļąāļš Redux Toolkit 2.x āļŠāļģāļŦāļĢāļąāļšāļāļēāļĢāļˆāļąāļ”āļāļēāļĢ state āļ‚āļ­āļ‡ React āļ—āļąāđ‰āļ‡āļāļēāļĢāļ•āļīāļ”āļ•āļąāđ‰āļ‡ āļāļēāļĢāļ”āļķāļ‡āļ‚āđ‰āļ­āļĄāļđāļĨ async āļ”āđ‰āļ§āļĒ RTK Query āļ›āļĢāļ°āļŠāļīāļ—āļ˜āļīāļ āļēāļž āđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒ

āđāļœāļ™āļ āļēāļžāļāļēāļĢāđ„āļŦāļĨāļ‚āļ­āļ‡ mutation āđāļĨāļ° revalidation āđƒāļ™ Next.js Server Actions

Next.js 16 Server Actions āļ›āļĩ 2026: Mutation, Revalidation āđāļĨāļ°āļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒ

Next.js 16 Server Actions āļˆāļąāļ”āļāļēāļĢ mutation, revalidation, āļŠāļ–āļēāļ™āļ° pending, optimistic UI āđāļĨāļ°āļ„āļ§āļēāļĄāļ›āļĨāļ­āļ”āļ āļąāļĒāļ­āļĒāđˆāļēāļ‡āđ„āļĢ āļžāļĢāđ‰āļ­āļĄāļ„āļģāļ–āļēāļĄāļŠāļąāļĄāļ āļēāļĐāļ“āđŒāļ—āļĩāđˆāļ—āļ”āļŠāļ­āļšāđāļ•āđˆāļĨāļ°āđāļ™āļ§āļ„āļīāļ”

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