Пошук уроків, статей та іншого контенту
Порівняєте Next.js і React за можливостями, архітектурою, маршрутизацією, рендерингом та типовими сценаріями використання.
React — це JavaScript-бібліотека для створення користувацьких інтерфейсів. Вона допомагає описувати сторінки за допомогою компонентів і оновлювати інтерфейс у відповідь на дії користувача.
Next.js — це фреймворк на основі React. Він використовує React-компоненти, але додає готові рішення для побудови повноцінних вебзастосунків:
маршрутизацію;
різні способи рендерингу;
серверні компоненти;
оптимізацію зображень і шрифтів;
роботу з метаданими;
серверну частину застосунку;
зручну структуру проєкту.
Отже, React і Next.js не є прямими конкурентами:
React відповідає переважно за інтерфейс, а Next.js — за архітектуру всього вебзастосунку.
| React | Next.js | |---|---| | Бібліотека для UI | Фреймворк на основі React | | Маршрутизацію потрібно додати окремо | Маршрутизація вбудована | | Немає єдиного способу організації проєкту | Є рекомендована структура | | Рендеринг залежить від інструментів проєкту | Підтримує кілька стратегій рендерингу | | Потрібно самостійно вибирати додаткові бібліотеки | Багато можливостей надаються з коробки | | Часто використовується для SPA | Підходить для сайтів, SPA та повноцінних вебзастосунків |
У типовому React-застосунку є кореневий компонент, наприклад App, від якого будується дерево інтерфейсу:
function App() {
return (
<main>
<h1>Мій застосунок</h1>
<button>Натисніть мене</button>
</main>
);
}React не визначає, де мають зберігатися сторінки, як називати файли або як організувати маршрути. Розробник сам обирає:
бібліотеку маршрутизації;
спосіб отримання даних;
структуру папок;
підхід до стилів;
спосіб розгортання.
Це дає свободу, але початківцю потрібно прийняти більше архітектурних рішень.
Next.js має домовленості щодо структури проєкту. У сучасному Next.js з App Router маршрути створюються за допомогою папок і файлів у каталозі app.
Наприклад:
app/
├── layout.jsx
├── page.jsx
└── about/
└── page.jsxТака структура створює маршрути:
app/page.jsx — /;
app/about/page.jsx — /about.
Приклад сторінки Next.js:
export default function HomePage() {
return (
<main>
<h1>Головна сторінка</h1>
<p>Цю сторінку відображає Next.js.</p>
</main>
);
}Кожен файл page.jsx експортує компонент, який відповідає за конкретний маршрут.
React сам по собі не має маршрутизації. Якщо потрібно створити кілька сторінок без повного перезавантаження браузера, зазвичай використовують окрему бібліотеку, наприклад React Router.
У такому разі маршрути описуються в коді:
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function Home() {
return <h1>Головна</h1>;
}
function About() {
return <h1>Про нас</h1>;
}
export default function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Головна</Link>
<Link to="/about">Про нас</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}У цьому прикладі маршрутизація працює завдяки React Router, а не завдяки React.
У Next.js маршрут визначається розташуванням файлу.
app/
├── page.jsx
├── about/
│ └── page.jsx
└── products/
└── page.jsxВідповідні адреси:
/;
/about;
/products.
Для переходів між сторінками використовується компонент Link:
import Link from "next/link";
export default function Navigation() {
return (
<nav>
<Link href="/">Головна</Link>
<Link href="/about">Про нас</Link>
</nav>
);
}Link дозволяє переходити між сторінками без зайвого повного перезавантаження документа.
Рендеринг — це процес створення HTML, який бачить користувач у браузері.
У типовому React SPA браузер завантажує JavaScript, після чого React створює інтерфейс на клієнті.
Послідовність приблизно така:
Браузер отримує HTML-контейнер.
Завантажує JavaScript.
React запускається в браузері.
React створює компоненти та відображає інтерфейс.
Цей підхід називають Client-Side Rendering, або CSR.
CSR добре підходить для:
особистих кабінетів;
адміністративних панелей;
застосунків, де пошукова оптимізація не є головною;
інтерактивних інтерфейсів, що працюють після входу користувача.
React також можна використовувати для серверного рендерингу, але для цього потрібні додаткові інструменти й відповідна конфігурація.
Next.js підтримує кілька способів рендерингу.
Сторінка може бути сформована на сервері під час запиту користувача. Це корисно, коли дані повинні бути актуальними на момент відкриття сторінки.
Приклад:
async function getProducts() {
const response = await fetch("https://dummyjson.com/products");
if (!response.ok) {
throw new Error("Не вдалося завантажити товари");
}
return response.json();
}
export default async function ProductsPage() {
const data = await getProducts();
return (
<main>
<h1>Товари</h1>
<ul>
{data.products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
</main>
);
}У Next.js App Router такий компонент може виконуватися на сервері. Дані завантажуються до формування сторінки.
Сторінка може бути сформована під час збирання проєкту. Готовий HTML потім можна швидко віддавати користувачам.
Це зручно для:
документації;
блогів;
сторінок із незмінним або рідко змінюваним вмістом;
маркетингових сторінок.
Next.js також підтримує компоненти, які працюють у браузері. Для цього компонент позначають директивою "use client":
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Натиснуто: {count}
</button>
);
}Такий компонент може використовувати:
useState;
useEffect;
обробники подій;
API браузера.
У Next.js компоненти без "use client" в App Router за замовчуванням є серверними компонентами. Це одна з важливих відмінностей сучасного Next.js від звичайного React SPA.
У Next.js компоненти можуть мати різне призначення.
Серверний компонент:
виконується на сервері;
може безпосередньо отримувати дані під час формування сторінки;
не може використовувати браузерні API;
не може використовувати обробники подій на кшталт onClick;
не використовує клієнтські хуки, наприклад useState.
Приклад серверного компонента:
export default async function ProfilePage() {
const user = await getUser();
return <h1>Вітаємо, {user.name}!</h1>;
}
async function getUser() {
return { name: "Олена" };
}Клієнтський компонент потрібен для інтерактивності:
"use client";
import { useState } from "react";
export default function LikeButton() {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? "Подобається" : "Вподобати"}
</button>
);
}У цьому компоненті є стан і обробник натискання, тому він має працювати в браузері.
Важливо: "use client" не означає, що весь Next.js-застосунок стає клієнтським. Директива впливає на конкретний файл і його залежності.
React може бути хорошим вибором, якщо:
потрібно створити інтерактивний SPA;
пошукова оптимізація не є пріоритетом;
застосунок переважно працює після авторизації;
команда хоче самостійно вибирати маршрутизацію та інші інструменти;
потрібен UI для вже наявної системи.
Приклади:
панель керування;
CRM-система;
внутрішній корпоративний інтерфейс;
складний клієнтський редактор;
застосунок для роботи з даними після входу користувача.
Next.js краще підходить, якщо:
потрібні SEO-дружні сторінки;
сторінки мають швидко відображатися для користувача;
потрібна вбудована маршрутизація;
потрібне завантаження даних на сервері;
застосунок містить і публічні, і захищені сторінки;
потрібна єдина структура для frontend і частини backend-логіки;
команда хоче використовувати рекомендовану React-архітектуру.
Приклади:
інтернет-магазин;
блог;
новинний сайт;
сайт компанії;
каталог товарів;
сервіс із публічними сторінками та особистим кабінетом.
Так, базове знання React дуже допомагає під час роботи з Next.js.
Перед вивченням Next.js бажано розуміти:
компоненти;
JSX;
props;
стан;
обробку подій;
умовний рендеринг;
списки та ключі;
базові хуки, зокрема useState.
Next.js не замінює React. Компоненти в Next.js все одно пишуться за правилами React. Next.js додає до них маршрутизацію, серверний рендеринг та інші можливості фреймворку.
У React потрібно окремо налаштувати маршрутизацію та вибрати спосіб отримання даних:
React
├── UI-компоненти
├── окрема бібліотека маршрутизації
├── окремий підхід до отримання даних
├── окрема конфігурація збірки
└── самостійна структура проєктуУ Next.js частина цих рішень уже інтегрована:
Next.js
├── React-компоненти
├── маршрутизація на основі файлів
├── серверні та клієнтські компоненти
├── різні способи рендерингу
├── оптимізація
└── рекомендована структура проєктуЦе не означає, що Next.js завжди кращий. Він просто вирішує більше завдань і тому має більше правил, ніж базовий React.
Не варто порівнювати React і Next.js так, ніби це дві незалежні бібліотеки для однакової задачі.
Правильніше думати так:
React — основа для створення компонентів інтерфейсу;
Next.js — повноцінне середовище для застосунку, у якому React використовується як основа UI.
Тому запитання зазвичай звучить не як «React чи React без React», а як:
Чи потрібен мені фреймворк із готовою архітектурою поверх React?
Next.js використовує React усередині. Знання React потрібне для написання компонентів Next.js.
React сам по собі не задає повну архітектуру застосунку, але його можна використовувати із серверним рендерингом через відповідні інструменти. Next.js просто надає таку можливість у межах фреймворку.
Next.js може використовувати серверні компоненти, клієнтські компоненти, статичний рендеринг і клієнтську інтерактивність. У реальному застосунку ці підходи можуть поєднуватися.
"use client" до кожного компонентаДиректива потрібна для компонентів, які використовують стан, ефекти, обробники подій або браузерні API. Неінтерактивні компоненти краще залишати серверними.
React не створює маршрути самостійно. У чистому React для цього потрібен окремий інструмент.
Вибір залежить від задачі. Для невеликого клієнтського інтерфейсу React може бути достатнім. Для сайту з SEO, серверним отриманням даних і кількома типами сторінок Next.js часто буде зручнішим.
React — бібліотека для створення користувацьких інтерфейсів.
Next.js — фреймворк, побудований на React.
React не має вбудованої маршрутизації, а Next.js використовує маршрутизацію на основі файлової структури.
React-застосунок часто використовує клієнтський рендеринг, але серверний рендеринг також можливий із додатковими інструментами.
Next.js підтримує серверний, статичний і клієнтський рендеринг.
У Next.js App Router компоненти за замовчуванням є серверними.
Для інтерактивності в Next.js використовують клієнтські компоненти з "use client".
React підходить для клієнтських інтерфейсів і SPA.
Next.js зручний для повноцінних вебзастосунків, сайтів із SEO та сторінок, що потребують серверного рендерингу.
Щоб ефективно вивчати Next.js, спочатку потрібно розуміти основи React.