Що таке Next.js?
Next.js — це прогресивний фреймворк для розробки веб-застосунків на основі React. Він розширює можливості React, додаючи готову інфраструктуру для Server-Side Rendering (SSR), генерації статичних сторінок, маршрутизації через файлову систему, а також можливість створювати backend-ендпоінти прямо в проєкті.
Чому він став популярним?
Next.js швидко здобув популярність завдяки тому, що пропонує:
- SEO-дружні сторінки завдяки SSR / SSG;
- швидкий перший рендер (First Page Load);
- просту маршрутизацію без налаштування;
- розгортання в один клік через Vercel;
- вбудовану оптимізацію зображень та продуктивності.
Чим відрізняється від класичного React
У класичному React ми отримуємо лише клієнтську бібліотеку для побудови UI-компонентів. Усе інше (SSR, маршрути, API) треба налаштовувати вручну або через сторонні бібліотеки (наприклад, React Router, Redux, Express, etc.).
Next.js — це уже повноцінний фреймворк. Він одразу має:
- серверний рендеринг (SSR);
- static generation (SSG);
- маршрутизацію через папку
pagesабоapp; - можливість створювати backend-функції в папці
pages/api.
Наприклад, класичний React без SSR:
// App.jsx
function App() {
return (
<div>
<h1>Hello React</h1>
</div>
);
}
export default App;
А в Next.js досить створити файл pages/index.js:
// pages/index.js
export default function Home() {
return (
<div>
<h1>Hello Next.js</h1>
</div>
);
}
Головні можливості Next.js
Next.js пропонує набір функцій «з коробки», які значно спрощують розробку сучасних веб-застосунків:
- Server-Side Rendering (SSR) — рендеринг сторінок на сервері перед відправкою користувачу.
- Static Site Generation (SSG) — попередня генерація HTML під час зборки (build).
- File-based Routing — автоматична маршрутизація на основі структури папки
pages/абоapp/. - API Routes — можливість створювати backend endpoint-и прямо всередині Next.js-проєкту.
- Підтримка TypeScript — повна інтеграція без додаткових налаштувань.
- Оптимізація зображень — компонент
<Image />забезпечує lazy-loading і responsive images.
Наприклад: створимо сторінку з SSR за допомогою getServerSideProps:
// pages/ssr-example.js
export async function getServerSideProps() {
return {
props: {
time: new Date().toLocaleTimeString()
}
};
}
export default function SSRExample({ time }) {
return (
<div>
<h2>Server-side rendered page</h2>
<p>Time: {time}</p>
</div>
);
}
Для SSG (Static Generation) використовується getStaticProps():
// pages/static-example.js
export async function getStaticProps() {
return {
props: {
message: "Це сторінка, згенерована на етапі build"
}
};
}
export default function StaticExample({ message }) {
return (
<div>
<h2>Static Page</h2>
<p>{message}</p>
</div>
);
}
Встановлення та перший проєкт
Для старту з Next.js потрібно мати встановлений Node.js (рекомендується версія 16+).
Створити новий проєкт можна за допомогою інструменту Create Next App.
Команда для створення нового Next-проєкту:
npx create-next-app@latest my-next-appПісля створення проєкту структура папок виглядає приблизно так:
my-next-app/
├─ pages/
│ ├─ index.js
│ ├─ _app.js
│ └─ api/
│ └─ hello.js
├─ public/
│ └─ favicon.ico
├─ styles/
│ └─ globals.css
├─ package.json
Щоб запустити проєкт у режимі розробки:
cd my-next-app
npm run dev
Після запуску, застосунок буде доступний за адресою
http://localhost:3000
Маршрути та сторінки
У Next.js маршрутизація побудована за принципом «файл = сторінка».
Усе, що розміщується в папці pages, автоматично стає маршрутом.
Наприклад, файл pages/about.js автоматично стане сторінкою за адресою /about:
// pages/about.js
export default function About() {
return (
<div>
<h1>Про нас</h1>
<p>Це сторінка "About".</p>
</div>
);
}
Динамічні маршрути
Для динамічних сторінок використовуються квадратні дужки у назві файлу, наприклад [id].js.
// pages/products/[id].js
import { useRouter } from 'next/router';
export default function ProductPage() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h2>Product ID: {id}</h2>
</div>
);
}
Вкладені маршрути
Створюються через вкладені папки:
pages/
├─ blog/
│ └─ first-post.js
Ця сторінка буде за шляхом /blog/first-post.
Головна сторінка
Файл pages/index.js — це корінь сайту (/):
// pages/index.js
export default function Home() {
return (
<div>
<h1>Головна сторінка</h1>
</div>
);
}
Рендеринг: SSR vs SSG vs CSR
У Next.js можна використовувати різні стратегії рендерингу сторінок залежно від потреб.
- CSR (Client-Side Rendering) — класичний React, коли все відбувається на стороні клієнта.
- SSR (Server-Side Rendering) — сторінка генерується на сервері при кожному запиті за допомогою
getServerSideProps(). - SSG (Static Site Generation) — сторінка генерується під час збірки (build), використовуючи
getStaticProps()і, при потребі,getStaticPaths().
SSR (Server-Side Rendering)
// pages/ssr-example.js
export async function getServerSideProps() {
const data = { time: new Date().toISOString() };
return { props: { data } };
}
export default function SSRExample({ data }) {
return (
<div>
<h2>SSR Example</h2>
<p>Time: {data.time}</p>
</div>
);
}
SSG (Static Generation)
// pages/ssg-example.js
export async function getStaticProps() {
return {
props: {
message: "Ця сторінка створена під час build"
}
};
}
export default function SSGExample({ message }) {
return (
<div>
<h2>SSG Example</h2>
<p>{message}</p>
</div>
);
}
CSR (Client-Side Rendering)
// pages/csr-example.js
import { useEffect, useState } from "react";
export default function CSRExample() {
const [time, setTime] = useState("");
useEffect(() => {
setTime(new Date().toISOString());
}, []);
return (
<div>
<h2>CSR Example</h2>
<p>Time: {time}</p>
</div>
);
}
Використовуй SSR, якщо дані змінюються на кожному запиті (наприклад, профіль користувача або статистика в реальному часі). Використовуй SSG для статичних сторінок, наприклад, блог, маркетинг, документація. А CSR — якщо все може відрендеритися з API прямо в браузері.
Робота з API Routes
Next.js дозволяє створювати серверні функції (API endpoints) без потреби у зовнішньому сервері типу Express. Це зручно для обробки форм, авторизації, обміну даними з базою тощо.
Усі API-роути створюються в папці pages/api. Кожен файл у цій папці автоматично стає HTTP endpoint’ом.
Приклад простого API-роута:
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: "Привіт з API!" });
}
Після запуску проєкту цей endpoint буде доступний за адресою:
http://localhost:3000/api/hello
Обробка методів POST, GET, тощо
// pages/api/echo.js
export default function handler(req, res) {
if (req.method === 'POST') {
const { name } = req.body;
res.status(200).json({ received: name });
} else {
res.status(405).json({ error: 'Метод не дозволено' });
}
}
Як викликати API на клієнті:
// Виклик з React-компонента (CSR)
const response = await fetch('/api/hello');
const data = await response.json();
console.log(data.message);
API Routes зручно використовувати для невеликих проєктів або коли немає окремого бекенду. У складніших випадках зазвичай використовують зовнішній сервер (наприклад, NestJS) або хмарні функції.
Коментарі
Дописати коментар