Пошук уроків, статей та іншого контенту
Налаштуєте next.config.js, заголовки, зображення, редиректи та інші параметри production-застосунку.
next.config.jsnext.config.js — це конфігураційний файл Next.js, у якому задають параметри застосунку, що застосовуються під час розробки, збірки та запуску production-сервера.
За допомогою конфігурації можна:
додати HTTP-заголовки;
налаштувати редиректи;
дозволити завантаження зовнішніх зображень;
вимкнути заголовок, який розкриває використання Next.js;
вибрати режим збірки;
налаштувати базовий шлях застосунку;
передати змінні середовища під час збірки.
Файл розташовують у корені проєкту — поруч із package.json.
Next.js підтримує кілька форматів файлу:
next.config.js — CommonJS;
next.config.mjs — ECMAScript Modules;
next.config.ts — TypeScript у версіях Next.js, які його підтримують для конфігурації.
Для сучасного проєкту з "type": "module" зручно використовувати next.config.mjs.
Нижче наведено приклад конфігурації для production-застосунку:
// next.config.mjs
const securityHeaders = [
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin',
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN',
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=()',
},
];
const nextConfig = {
// Увімкнення додаткових перевірок React у режимі розробки
reactStrictMode: true,
// Не розкривати в HTTP-заголовку, що застосунок працює на Next.js
poweredByHeader: false,
// Стискання відповідей Next.js
compress: true,
// Окрема збірка для запуску на власному Node.js-сервері
output: 'standalone',
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.example.com',
pathname: '/images/**',
},
],
},
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
];
},
async redirects() {
return [
{
source: '/old-products/:slug',
destination: '/products/:slug',
permanent: true,
},
];
},
};
export default nextConfig;Після зміни конфігурації потрібно перезапустити dev-сервер або виконати нову production-збірку:
npm run build
npm run startКонфігурація читається Next.js під час запуску та збірки. Зміна файлу без перезапуску не застосовується до вже запущеного процесу.
Метод headers() повертає масив правил. Кожне правило має:
source — шлях, до якого застосовується правило;
headers — масив заголовків із полями key та value.
async headers() {
return [
{
source: '/dashboard/:path*',
headers: [
{
key: 'Cache-Control',
value: 'private, no-store',
},
],
},
];
}У цьому прикладі заголовок застосовується до /dashboard та всіх вкладених шляхів.
Шаблон /(.*) відповідає всім шляхам:
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
],
},
];
}Поширені заголовки:
X-Content-Type-Options: nosniff забороняє браузеру вгадувати MIME-тип ресурсу;
X-Frame-Options: SAMEORIGIN обмежує вбудовування сторінок в iframe;
Referrer-Policy контролює, яку інформацію про попередню сторінку надсилає браузер;
Permissions-Policy обмежує доступ до можливостей браузера.
Заголовок Strict-Transport-Security додають лише тоді, коли застосунок гарантовано доступний через HTTPS на всіх відповідних доменах. Помилкове налаштування HSTS може ускладнити доступ до застосунку через HTTP.
Заголовки, додані в next.config.js, застосовуються відповідями Next.js. Якщо перед Next.js працює CDN, reverse proxy або платформа хостингу, вона може додатково змінювати або замінювати заголовки.
Редиректи описують у методі redirects().
async redirects() {
return [
{
source: '/old-about',
destination: '/about',
permanent: true,
},
{
source: '/login',
destination: '/sign-in',
permanent: false,
},
];
}Параметр permanent визначає тип редиректу:
true — постійний редирект зі статусом 308;
false — тимчасовий редирект зі статусом 307.
Постійний редирект використовують, коли стара адреса більше не повинна використовуватися. Браузери та пошукові системи можуть кешувати такий результат.
Тимчасовий редирект підходить для ситуацій, які можуть змінитися:
тимчасове переміщення сторінки;
перемикання між версіями;
короткочасне обмеження доступу.
У source можна використовувати динамічні сегменти:
async redirects() {
return [
{
source: '/blog/:slug',
destination: '/articles/:slug',
permanent: true,
},
];
}Запит /blog/nextjs-config буде перенаправлено на /articles/nextjs-config.
Для вкладених шляхів використовують :path*:
async redirects() {
return [
{
source: '/docs/:path*',
destination: '/documentation/:path*',
permanent: true,
},
];
}У такому разі /docs/getting-started/install стане /documentation/getting-started/install.
Порядок правил має значення: Next.js перевіряє їх послідовно. Специфічні правила краще розташовувати перед загальнішими.
Компонент next/image оптимізує зображення, але для зовнішніх джерел домен потрібно явно дозволити в конфігурації.
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.example.com',
pathname: '/images/**',
},
],
},
};
export default nextConfig;Після цього можна використовувати зовнішнє зображення:
import Image from 'next/image';
export default function ProductImage() {
return (
<Image
src="https://images.example.com/images/laptop.jpg"
alt="Ноутбук"
width={800}
height={600}
/>
);
}remotePatterns обмежує:
протокол;
домен;
шлях до ресурсу.
Це безпечніше, ніж безконтрольно дозволяти будь-які зовнішні домени.
Для локальних зображень із папки public додатковий дозвіл не потрібен:
import Image from 'next/image';
export default function Logo() {
return (
<Image
src="/logo.png"
alt="Логотип"
width={160}
height={40}
/>
);
}Для кожного зображення потрібно коректно вказувати width і height, або використовувати fill разом із контейнером, який має задані розміри. Це допомагає уникати зміщення макета під час завантаження.
X-Powered-ByЗа замовчуванням Next.js може додавати заголовок:
X-Powered-By: Next.jsВін не є критичною вразливістю, але розкриває технологію, використану на сервері. У production його часто вимикають:
const nextConfig = {
poweredByHeader: false,
};
export default nextConfig;Це не замінює автентифікацію, авторизацію чи інші заходи безпеки. Параметр лише прибирає зайву інформацію з відповіді.
standaloneПараметр:
const nextConfig = {
output: 'standalone',
};
export default nextConfig;створює мінімальний production-набір для запуску Node.js-сервера. Основні файли з’являються в:
.next/standaloneЦей режим зручний для контейнеризації або власного сервера, оскільки не потрібно переносити всю папку node_modules.
Для такого розгортання також потрібно врахувати статичні файли:
папку .next/static;
папку public, якщо вона використовується.
На платформах, які самостійно керують Next.js-збіркою, наприклад на повністю інтегрованому хостингу, output: 'standalone' може бути непотрібним. Режим потрібно обирати відповідно до способу розгортання.
Конфігурація може залежати від змінних середовища:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: process.env.IMAGE_HOSTNAME || 'images.example.com',
pathname: '/images/**',
},
],
},
};
export default nextConfig;Значення process.env.IMAGE_HOSTNAME читається під час виконання конфігурації.
Не слід передавати секрети через поле env:
const nextConfig = {
env: {
API_SECRET: process.env.API_SECRET,
},
};
export default nextConfig;Значення з env стають доступними коду застосунку, зокрема можуть потрапити до клієнтської частини під час збірки. Паролі, приватні ключі та токени не можна таким способом робити доступними браузеру.
Публічні значення, які справді мають використовуватися в браузері, зазвичай називають із префіксом NEXT_PUBLIC_. Але цей префікс не робить значення секретним — навпаки, він означає, що значення буде доступним клієнту.
Іноді частина параметрів має відрізнятися в development і production:
const isProduction = process.env.NODE_ENV === 'production';
const nextConfig = {
reactStrictMode: true,
poweredByHeader: false,
// У production використовуємо standalone-збірку
...(isProduction ? { output: 'standalone' } : {}),
};
export default nextConfig;Однак конфігурацію не варто ускладнювати без потреби. Більшість параметрів повинні бути однаковими в усіх середовищах, щоб production-поведінка була передбачуваною ще під час локального тестування.
Після налаштування виконайте:
npm run build
npm run startПеревірте:
чи успішно завершується збірка;
чи запускається production-сервер;
чи працюють старі URL та редиректи;
чи доступні зображення із дозволених доменів;
чи присутні потрібні HTTP-заголовки;
чи не залишилися в конфігурації тестові домени;
чи не передаються секрети в клієнтський код.
Production-застосунок потрібно перевіряти саме після next build, а не лише через next dev, оскільки поведінка розробницького та production-режимів відрізняється.
Якщо домен або шлях не збігається з remotePatterns, next/image не завантажить зображення.
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.example.com',
pathname: '/images/**',
},
],
}Зображення з http, іншого піддомену або іншого шляху потрібно дозволяти окремим правилом.
Не можна перенаправляти шлях на самого себе:
{
source: '/about',
destination: '/about',
permanent: true,
}Також цикл може виникнути через кілька правил, які послідовно повертають запит один до одного.
Після permanent: true браузер може кешувати редирект. Для тестування або тимчасової логіки використовуйте permanent: false.
envУсе, що передається в клієнтську частину, користувач може переглянути. Секрети мають залишатися на сервері та передаватися через безпечні серверні механізми.
standalone увімкнено без урахування статичних файлівПід час ручного розгортання недостатньо скопіювати лише .next/standalone. Без .next/static і public сторінки можуть працювати без стилів, зображень або інших статичних ресурсів.
Правило з source: '/dashboard' не поширюється автоматично на всі вкладені маршрути. Для цього потрібен шаблон:
{
source: '/dashboard/:path*',
headers: [
// Заголовки для всіх вкладених маршрутів
],
}next.config.js або next.config.mjs містить налаштування Next.js на рівні застосунку.
Метод headers() додає HTTP-заголовки для вибраних маршрутів.
Метод redirects() налаштовує тимчасові та постійні перенаправлення.
images.remotePatterns дозволяє безпечно використовувати зовнішні зображення з next/image.
poweredByHeader: false прибирає заголовок, який розкриває використання Next.js.
output: 'standalone' підходить для власного Node.js-розгортання та контейнерів.
Секрети не можна передавати через клієнтську конфігурацію.
Production-конфігурацію потрібно перевіряти після next build і запуску через next start.