# Основи Next.js (React / Next.js)

> App Router, Server Components, Client Components, маршрутизація на основі файлів, layouts, сторінки

- 25 питань зі співбесід
- Mid-Level
- [Питання зі співбесід: React / Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy.md)

## 1. Що таке App Router у Next.js?

**Відповідь**

App Router — це нова система маршрутизації в Next.js 13+, заснована на директорії app/. Вона замінює Pages Router та вводить Server Components за замовчуванням, спільні layouts та більш гнучку модель маршрутизації з файловими угодами, такими як page.tsx, layout.tsx та loading.tsx.

## 2. Як створити маршрут /about в App Router?

**Відповідь**

В App Router кожна папка представляє сегмент маршруту. Щоб створити /about, потрібно створити app/about/page.tsx. Файл page.tsx необхідний для публічного доступу до маршруту. Без цього файлу папка буде лише сегментом шляху без відображуваної сторінки.

## 3. Яка поведінка компонентів за замовчуванням в App Router?

**Відповідь**

В App Router всі компоненти за замовчуванням є Server Components. Вони виконуються лише на сервері і не надсилають JavaScript клієнту, покращуючи продуктивність. Щоб використовувати клієнтські функції (hooks, події), потрібно додати директиву 'use client' на початку файлу.

## Ще 22 доступних питань

- Як створити динамічний маршрут /posts/[id] в App Router?
- Для чого призначений файл layout.tsx в App Router?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід React / Next.js

- [Основи JavaScript](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/javascript-essentials.md): 25 запитань, Junior
- [Основи React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-fundamentals.md): 20 запитань, Junior
- [React Hooks](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-hooks.md): 22 запитань, Junior
- [Життєвий цикл компонента](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/component-lifecycle.md): 18 запитань, Junior
- [React Router](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-router.md): 20 запитань, Junior
- [Управління станом з Context](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/state-management-context.md): 18 запитань, Junior
- [Форми та Controlled Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/forms-controlled-components.md): 20 запитань, Mid-Level
- [Отримання даних та API](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/fetching-data-api.md): 20 запитань, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-query-tanstack.md): 20 запитань, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/styling-css-in-js.md): 18 запитань, Mid-Level
- [TypeScript з React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/typescript-react.md): 20 запитань, Mid-Level
- [Data Fetching у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-data-fetching.md): 24 запитань, Mid-Level
- [Server Actions у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-server-actions.md): 20 запитань, Mid-Level
- [Маршрутизація та Навігація в Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-routing-navigation.md): 22 запитань, Mid-Level
- [API Routes у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-api-routes.md): 20 запитань, Mid-Level
- [Metadata & SEO у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-metadata-seo.md): 18 запитань, Mid-Level
- [Middleware та Auth у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-middleware-auth.md): 22 запитань, Mid-Level
- [Тестування React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-testing.md): 20 запитань, Mid-Level
- [Zustand State Management](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/zustand-state-management.md): 18 запитань, Mid-Level
- [Оптимізація продуктивності React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-performance-optimization.md): 22 запитань, Senior
- [Error Boundaries & обробка помилок](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-error-boundaries.md): 18 запитань, Senior
- [Advanced React Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/advanced-react-patterns.md): 20 запитань, Senior
- [Розширені можливості Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-advanced-features.md): 24 запитань, Senior
- [Розгортання та Продакшн Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-deployment-production.md): 20 запитань, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-architecture-patterns.md): 22 запитань, Senior
- [React Server Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-server-components.md): 26 запитань, Senior
- [Інтернаціоналізація Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-internationalization.md): 20 запитань, Senior
- [React Безпека & Найкращі Практики](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-security-best-practices.md): 22 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-fundamentals