Налаштування Next.js (next.config.js)

Що таке next.config.js?

next.config.js (або next.config.mjs/next.config.ts) — це основний файл конфігурації для додатку Next.js. Він завантажується під час збірки і дозволяє налаштовувати різні поведінки.

Основна структура

javascript

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Опції конфігурації тут
};

module.exports = nextConfig;

typescript

// next.config.ts (Next.js 15+)
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Опції конфігурації
};

export default nextConfig;

Найбільш поширені опції

Зображення

javascript

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
      {
        protocol: "https",
        hostname: "cdn.example.com",
        pathname: "/uploads/**",
      },
    ],
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
  },
};

Перенаправлення

javascript

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/old-blog/:slug",
        destination: "/blog/:slug",
        permanent: true, // 308 статус код
      },
      {
        source: "/docs",
        destination: "/documentation",
        permanent: false, // 307 статус код
      },
    ];
  },
};

Переписування

javascript

const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "https://backend.example.com/api/:path*",
      },
    ];
  },
};

Заголовки

javascript

const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Origin", value: "*" },
          { key: "Access-Control-Allow-Methods", value: "GET, POST, PUT, DELETE" },
        ],
      },
      {
        source: "/(.*)",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-Content-Type-Options", value: "nosniff" },
        ],
      },
    ];
  },
};

Інші важливі опції

javascript

const nextConfig = {
  // Базовий шлях для всього додатку
  basePath: "/app",

  // Кінцеві слеші: /about/ проти /about
  trailingSlash: true,

  // Режим виводу для розгортання
  output: "standalone", // Для розгортання в Docker

  // Режим строгого контролю
  reactStrictMode: true,

  // Увімкнення експериментальних функцій
  experimental: {
    serverActions: { bodySizeLimit: "2mb" },
    optimizePackageImports: ["lucide-react", "@heroicons/react"],
  },

  // Налаштування Webpack
  webpack: (config, { isServer }) => {
    // Користувацька конфігурація webpack
    return config;
  },

  // Змінні середовища, доступні під час збірки
  env: {
    CUSTOM_KEY: "value",
  },

  // Налаштування TypeScript
  typescript: {
    ignoreBuildErrors: false, // Не встановлюйте в true в продакшені!
  },

  // Налаштування ESLint
  eslint: {
    ignoreDuringBuilds: false,
  },
};

next.config.js — це місце, де ви налаштовуєте зображення, перенаправлення, переписування, заголовки, змінні середовища та налаштування розгортання. Ключові опції включають images.remotePatterns для зовнішніх зображень, output: "standalone" для Docker, а також redirects()/rewrites() для управління URL. Завжди використовуйте конфігурацію TypeScript (next.config.ts), коли це можливо, для безпеки типів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Налаштування Next.js (next.config.js)

Що таке next.config.js?

Основна структура

Найбільш поширені опції

Зображення

Перенаправлення

Переписування

Заголовки

Інші важливі опції

Загальні шаблони

Вивід у режимі "standalone" для Docker

Інтернаціоналізація

Коротка відповідь