Пошук уроків, статей та іншого контенту
Запускатимете Next.js у режимах розробки та продакшену й налаштовуватимете основні параметри через next.config.js.
Next.js запускається як Node.js-застосунок. Для роботи потрібні:
Node.js;
менеджер пакетів npm, pnpm, yarn або bun;
створений Next.js-проєкт.
Якщо проєкту ще немає, його можна створити командою:
npx create-next-app@latest my-next-app
cd my-next-appПід час створення Next.js запропонує вибрати TypeScript, ESLint, каталог
srcУ файлі package.json зазвичай містяться такі скрипти:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}Кожен скрипт призначений для окремого етапу роботи:
dev запускає сервер розробки;
build створює продакшен-версію застосунку;
start запускає вже зібрану продакшен-версію.
Якщо проєкт створено через create-next-app, ці скрипти вже будуть доступні.
Для запуску сервера розробки виконайте:
npm run devЗа замовчуванням застосунок буде доступний за адресою:
http://localhost:3000Сервер розробки має такі особливості:
автоматично перебудовує сторінки після змін;
показує помилки в терміналі та браузері;
призначений для локальної розробки;
не оптимізований для продакшену.
Порт можна змінити параметром -p або --port:
npm run dev -- -p 4000Після цього застосунок буде доступний за адресою:
http://localhost:4000Якщо застосунок потрібно відкрити з іншого пристрою в локальній мережі, можна вказати адресу, на якій сервер прийматиме з'єднання:
npm run dev -- --hostname 0.0.0.0Комбінація порту та адреси:
npm run dev -- --hostname 0.0.0.0 -p 4000Після зміни параметрів зупиніть сервер комбінацією Ctrl+C і запустіть його знову за потреби.
Продакшен-запуск складається з двох кроків.
Спочатку потрібно створити оптимізовану збірку:
npm run buildNext.js перевірить застосунок і збере файли для продакшену. Результат зберігається у службовому каталозі .next.
Після успішної збірки запустіть сервер:
npm run startЗа замовчуванням він також використовує порт 3000.
Змінити порт можна так:
npm run start -- -p 4000Важливо:
next start не замінює next build;
після зміни коду для продакшену потрібно повторно виконати npm run build;
npm run dev і npm run start — це різні режими;
каталог .next не потрібно редагувати вручну.
Типовий порядок команд перед розгортанням:
npm ci
npm run build
npm run startnpm ci встановлює залежності відповідно до package-lock.json і зазвичай використовується в автоматизованих середовищах та на сервері.
next.config.jsОсновні параметри Next.js можна налаштувати у файлі next.config.js або next.config.mjs у корені проєкту.
Файл має знаходитися на одному рівні з package.json:
my-next-app/
├── app/
├── public/
├── next.config.mjs
├── package.json
└── ...Сучасний варіант із розширенням .mjs використовує ES-модулі:
const nextConfig = {
reactStrictMode: true,
poweredByHeader: false,
};
export default nextConfig;У цьому прикладі:
reactStrictMode: true вмикає додаткові перевірки React під час розробки;
poweredByHeader: false вимикає HTTP-заголовок X-Powered-By, який повідомляє про використання Next.js.
Після зміни next.config.mjs сервер потрібно перезапустити. Конфігурація читається під час запуску Next.js, а не динамічно після кожного редагування.
next.config.jsЯкщо проєкт використовує CommonJS, конфігурація має такий вигляд:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
poweredByHeader: false,
};
module.exports = nextConfig;Не потрібно одночасно створювати next.config.js і next.config.mjs. Виберіть один формат, який відповідає налаштуванням вашого проєкту.
Нижче наведено повний приклад next.config.mjs:
const nextConfig = {
reactStrictMode: true,
poweredByHeader: false,
async redirects() {
return [
{
source: "/old-profile",
destination: "/profile",
permanent: true,
},
];
},
};
export default nextConfig;Тепер запит до /old-profile буде перенаправлено на /profile.
Поле permanent визначає тип перенаправлення:
false — тимчасове перенаправлення;
true — постійне перенаправлення.
Перенаправлення з permanent: true зазвичай повідомляє браузерам і пошуковим системам, що стара адреса замінена новою. Під час розробки для ще не остаточних маршрутів часто зручніше використовувати false.
Після створення або зміни конфігурації:
npm run devПотім відкрийте в браузері:
http://localhost:3000/old-profileКомпонент Image з next/image оптимізує зображення та з міркувань безпеки потребує явно дозволених зовнішніх джерел.
Наприклад, щоб дозволити зображення з images.example.com, додайте remotePatterns:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.example.com",
pathname: "/photos/**",
},
],
},
};
export default nextConfig;Після цього дозволеними будуть адреси на кшталт:
https://images.example.com/photos/avatar.jpgІнші домени або шляхи залишаться забороненими. Такий підхід точніший за дозвіл усього вмісту стороннього домену.
Після зміни параметра images потрібно перезапустити сервер розробки.
Конфігурація може містити кілька правил перенаправлення:
const nextConfig = {
async redirects() {
return [
{
source: "/old-blog",
destination: "/blog",
permanent: true,
},
{
source: "/docs",
destination: "/documentation",
permanent: false,
},
];
},
};
export default nextConfig;Для кожного правила потрібно вказати:
source — вхідний шлях;
destination — шлях призначення;
permanent — постійне чи тимчасове перенаправлення.
Перенаправлення змінює адресу в браузері. Якщо потрібно проксувати запит до іншого внутрішнього шляху без зміни адреси в браузері, використовується інший механізм — rewrites. Його варто додавати лише тоді, коли це справді потрібно для маршрутизації застосунку.
Параметри можна передавати безпосередньо команді Next.js через npm run, використовуючи подвійний дефіс:
npm run dev -- -p 4000До подвійного дефіса належать параметри npm, а після нього — параметри next dev.
Аналогічно для продакшену:
npm run start -- -p 4000Якщо такі параметри використовуються постійно, їх можна зафіксувати у package.json:
{
"scripts": {
"dev": "next dev -p 4000",
"build": "next build",
"start": "next start -p 4000"
}
}Тоді команда npm run dev щоразу запускатиме сервер на порту 4000.
next start без збіркиПомилковий порядок:
npm run startЯкщо збірки ще немає, Next.js не зможе запустити продакшен-сервер.
Правильний порядок:
npm run build
npm run startnext start не призначений для щоденної розробки. Він не забезпечує такий самий зручний автоматичний цикл оновлення, як next dev.
Для локальної роботи використовуйте:
npm run devДля next.config.mjs потрібен експорт через export default:
export default nextConfig;Для CommonJS-формату next.config.js використовується:
module.exports = nextConfig;Не змішуйте ці два способи в одному файлі.
Після зміни next.config.js або next.config.mjs перезапустіть сервер:
Ctrl+C
npm run devІнакше нові параметри можуть не застосуватися.
Якщо порт уже зайнятий, Next.js може повідомити про помилку або запропонувати інший порт. Перевірте, чи не запущений інший процес, або виберіть інший порт:
npm run dev -- -p 4000npm run dev запускає Next.js у режимі розробки.
npm run build створює продакшен-збірку.
npm run start запускає вже створену продакшен-збірку.
Порт і адресу сервера можна змінити параметрами -p та --hostname.
Основна конфігурація зберігається у next.config.js або next.config.mjs.
Після зміни конфігураційного файлу сервер потрібно перезапустити.
Через конфігурацію можна вмикати перевірки, вимикати службові заголовки, дозволяти зовнішні зображення та налаштовувати перенаправлення.