import type { NextConfig } from "next"; import dotenv from "dotenv"; import path from "path"; import bundleAnalyzer from "@next/bundle-analyzer"; import createNextIntlPlugin from "next-intl/plugin"; // Load the .env file from the working directory dotenv.config({ path: path.resolve(process.cwd(), ".env") }); const nextConfig: NextConfig = { // Enable standalone output for Docker output: "standalone", outputFileTracingRoot: path.join(process.cwd()), // Optimize for production compress: true, poweredByHeader: false, // React Strict Mode // In dev, React StrictMode double-mount can cause visible animation flicker // (Framer Motion "fade starts, disappears, then pops"). reactStrictMode: process.env.NODE_ENV === "production", // Disable ESLint during build for Docker eslint: { ignoreDuringBuilds: process.env.NODE_ENV === "production", }, // Environment variables env: { NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL, }, // Performance optimizations experimental: { // Tree-shake barrel-file packages in both dev and production optimizePackageImports: ["lucide-react", "framer-motion", "@tiptap/react"], // Merge all CSS into a single chunk to eliminate the render-blocking CSS chain // (84dc7384.css → 3aefc04b.css sequential dependency reported by PageSpeed). cssChunking: false, // Note: optimizeCss (critters) is intentionally disabled — it converts the main // to a JS-deferred preload, which PageSpeed reads as a // sequential CSS chain and reports 410ms of render-blocking. ...(process.env.NODE_ENV !== "production" ? { webpackBuildWorker: true } : {}), }, // Image optimization images: { formats: ["image/webp", "image/avif"], minimumCacheTTL: 2592000, deviceSizes: [640, 768, 1024, 1280, 1536], imageSizes: [16, 32, 48, 64, 96, 128, 256], remotePatterns: [ { protocol: "https", hostname: "i.scdn.co", }, { protocol: "https", hostname: "cdn.discordapp.com", }, { protocol: "https", hostname: "media.discordapp.net", }, { protocol: "https", hostname: "cms.dk0.dev", }, { protocol: "https", hostname: "assets.hardcover.app", }, { protocol: "https", hostname: "dki.one", }, { protocol: "https", hostname: "images.unsplash.com", }, ], }, // Webpack configuration webpack: (config, { dev, isServer, webpack }) => { // Skip adding polyfill webpack aliases — Next.js injects polyfills via