Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які основні можливості надає Next.js із коробки?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Next.js** - це не просто React-фреймворк, а набір готових продакшн-можливостей, які зазвичай доводиться збирати вручну. **Ключове:** Next.js надає серверний рендеринг, файловий роутинг, backend-можливості, оптимізацію продуктивності та SEO із коробки, дозволяючи будувати масштабовані fullstack-застосунки на базі React.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Next.js** - це не просто React-фреймворк, а **набір готових продакшн-можливостей**, які зазвичай доводиться збирати вручну. Ось ключові речі, які він дає **із коробки**. --- ## 1. Рендеринг на вибір (SSR / SSG / ISR) Ти можеш обрати стратегію **для кожної сторінки**: - **SSR** - рендер на сервері при кожному запиті - **SSG** - генерація HTML на етапі білда - **ISR** - оновлення статичних сторінок без повного ребілда Це вирішує проблеми SEO, швидкості завантаження та масштабованості. --- ## 2. App Router і файловий роутинг - URL формується **структурою папок** - layout'и, вкладені роути, стани loading/error - менше коду -> менше помилок ```txt app/ └─ blog/ └─ [slug]/ └─ page.tsx ``` --- ## 3. Server Components і Client Components - **Server Components** - виконуються на сервері - **Client Components** - інтерактивність у браузері Плюси: - менше JS у браузері - швидше завантаження - прямий доступ до БД і секретів на сервері --- ## 4. Backend всередині Next.js Без окремого backend: - API routes - Server Actions - cookies / headers - робота з БД - авторизація Чудово підходить для fullstack-застосунків і MVP. --- ## 5. Оптимізація продуктивності Next.js автоматично робить: - code splitting - lazy loading - prefetch роутів - streaming HTML - часткову гідратацію Без ручних налаштувань Webpack/Vite. --- ## 6. Оптимізація зображень і шрифтів - `<Image />` - ресайз, lazy loading, WebP/AVIF - `<Font />` - локальні шрифти без CLS Менше ваги -> вищі Core Web Vitals. --- ## 7. SEO і метадані - генерація `<meta>`, Open Graph, Twitter cards - динамічні title/description - sitemap, robots.txt І все це **на рівні сторінки чи layout'а**. --- ## 8. Гнучкий деплой - Node.js - Edge runtime - serverless - CDN Можна деплоїти куди завгодно, а не лише у Vercel. --- ## 9. Dev Experience - Hot Reload - сувора інтеграція з TypeScript - ESLint + build-перевірки - зрозумілі помилки і трасування --- ## Коротко для співбесіди > **Next.js надає серверний рендеринг, файловий роутинг, backend-можливості, оптимізацію продуктивності та SEO із коробки, дозволяючи будувати масштабовані fullstack-застосунки на базі React.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.