next.config.js

خب next.config.js یا در نسخه‌های جدید next.config.mjs, فایل تنظیمات مرکزی پروژه Next.js است که با آن می‌تونی رفتار Webpack، Image Optimization، امنیت، ریدایرکت‌ها، هدرها، و کلی چیز دیگر را کنترل کنی.

ساختار کلی:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // configs...
};

export default nextConfig;

images

برای مدیریت دامنه‌های مجاز جهت لود تصاویر:

const nextConfig = {
  images: {
    domains: ["example.com", "cdn.mojtaba.dev"]
,
    formats: ["image/webp"]
,
  },
};

redirects

ریدایرکت سمت سرور (در زمان request، نه کلاینت)

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/old",
        destination: "/new",
        permanent: true, // 308 redirect
      },
    ];
  },
};

کاربرد: مدیریت مسیرهای قدیمی، سئو، مهاجرت URL.

rewrites

خب Rewrite باعث میشه URL تغییر نکنه، ولی ریکوئست به جای دیگه بره.

const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/data",
        destination: "https://api.mojtaba.dev/data",
      },
    ];
  },
};

کاربرد: Proxy برای API، مخفی کردن Backend، ساده‌سازی URL.

headers

هدرهای امنیتی، کش و …

const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "Content-Security-Policy", value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

کاربرد: امنیت + جلوگیری از Clickjacking + HSTS و …

env

تعریف env که در کلاینت و سرور قابل دسترسی باشد.

const nextConfig = {
  env: {
    APP_VERSION: "v1.2.3",
  },
};

اما یادت باشه:

بهتره dotenv و process.env استفاده کنی تا مقدارها statically baked نشن.

i18n

چندزبانه کردن Next.js

const nextConfig = {
  i18n: {
    locales: ["fa", "en"]
,
    defaultLocale: "fa",
  },
};

بسیار ضروری برای SEO بین‌الملل.

output

نوع خروجی نهایی (Next 13 به بعد)

const nextConfig = {
  output: "standalone", // برای دپلوی سبک
};

حالت‌ها:

• standalone
• export (برای SPA export)

reactStrictMode

فعال کردن Strict mode برای شناسایی باگ‌ها

reactStrictMode: true,

trailingSlash

اگر می‌خوای آدرس‌ها با / آخر بیاد:

trailingSlash: true;

basePath

برای پروژه‌هایی که زیر یک مسیر دیپلوی میشن

const nextConfig = {
  basePath: "/dashboard",
};

مثال:

site.com/dashboard → اصل Root

assetPrefix

برای CDN کردن فایل‌های استاتیک

const nextConfig = {
  assetPrefix: "https://cdn.mojtaba.dev",
};

compress

فعال کردن gzip/brotli

compress: true;

webpack

قدرت مخفی Next.js!

هر تغییری که بخوای می‌تونی روی Webpack بدهی:

const nextConfig = {
  webpack(config, { isServer }) {
    config.resolve.alias["@"]
 = path.resolve(__dirname, "src");
    return config;
  },
};

با این می‌تونی:

• Alias تعریف کنی
• loader جدید اضافه کنی
• فایل‌ها را transform کنی

modularizeImports (Next.js 13+)

بهینه‌سازی tree-shaking برای کتابخانه‌ها

const nextConfig = {
  modularizeImports: {
    "@mui/material": {
      transform: "@mui/material/{{member}}",
    },
  },
};

experimental

ویژگی‌های تستی Next.js

const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

eslint

خاموش کردن ESLint هنگام build

eslint: {
  ignoreDuringBuilds: true;
}

typescript

برای بیلد با خطاهای TS:

typescript: {
  ignoreBuildErrors: false,
}

productionBrowserSourceMaps

فعال کردن sourcemap در محیط production

productionBrowserSourceMaps: true,

distDir

تغییر محل خروجی Next

distDir: "build",

cleanDistDir

پاک کردن پوشه build قبل بیلد جدید

cleanDistDir: true,

در نهایت: یک نمونه کامل

import path from "path";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  images: {
    domains: ["example.com", "cdn.mojtaba.dev"]
,
    formats: ["image/webp"]
,
  },

  async redirects() {
    return [{ source: "/old", destination: "/new", permanent: true }]
;
  },

  async rewrites() {
    return [
      { source: "/api/data", destination: "https://api.mojtaba.dev/data" },
    ];
  },

  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "Content-Security-Policy", value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },

  webpack(config) {
    config.resolve.alias["@"]
 = path.resolve(__dirname, "src");
    return config;
  },

  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: false },
  output: "standalone",
};

export default nextConfig;