Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// next.config.js — production-ready configuration

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  reactStrictMode: true,
  poweredByHeader: false, // remove X-Powered-By header

images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      { protocol: 'https', hostname: process.env.NEXT_PUBLIC_CDN_HOSTNAME },
    ],
  },

// Security headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-DNS-Prefetch-Control', value: 'on' },
          { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
        ],
      },
    ];
  },
};

module.exports = withBundleAnalyzer(nextConfig);

// .env.example — commit this, not .env.local
// DATABASE_URL=postgresql://user:password@host:5432/dbname
// NEXTAUTH_SECRET=your-secret-here
// NEXTAUTH_URL=https://yourdomain.com
// NEXT_PUBLIC_CDN_HOSTNAME=cdn.yourdomain.com
// REVALIDATE_SECRET=your-revalidation-webhook-secret
// WEBHOOK_SECRET=your-cms-webhook-secret