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