- Detect ChunkLoadError in global error handler - Automatically clear Next.js cache and reload page when chunk errors occur - Add proper cache headers for Next.js static chunks (immutable caching) - Handle ChunkLoadError in both error events and unhandled promise rejections - Prevents users from seeing chunk load errors after deployments Fixes production issue where admin page fails to load after new deployment due to stale chunks in browser cache
136 lines
4.5 KiB
TypeScript
136 lines
4.5 KiB
TypeScript
import { withSentryConfig } from "@sentry/nextjs";
|
|
import type { NextConfig } from "next";
|
|
import path from "path";
|
|
|
|
const withBundleAnalyzer = require('@next/bundle-analyzer')({
|
|
enabled: process.env.ANALYZE === 'true',
|
|
});
|
|
|
|
const nextConfig: NextConfig = {
|
|
// PWA Configuration
|
|
output: "standalone", // Required for Docker deployment with PWA
|
|
|
|
// Image optimization
|
|
images: {
|
|
remotePatterns: [
|
|
{ protocol: "https", hostname: "is1-ssl.mzstatic.com" },
|
|
{ protocol: "https", hostname: "is2-ssl.mzstatic.com" },
|
|
{ protocol: "https", hostname: "is3-ssl.mzstatic.com" },
|
|
{ protocol: "https", hostname: "is4-ssl.mzstatic.com" },
|
|
{ protocol: "https", hostname: "is5-ssl.mzstatic.com" },
|
|
{ protocol: "https", hostname: "images.unsplash.com" },
|
|
{ protocol: "https", hostname: "i.scdn.co" }, // Spotify images
|
|
{ protocol: "https", hostname: "i.ytimg.com" }, // YouTube thumbnails
|
|
],
|
|
formats: ["image/avif", "image/webp"],
|
|
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
|
|
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
|
|
dangerouslyAllowSVG: true,
|
|
// CSP is handled in src/proxy.ts middleware (single source of truth)
|
|
},
|
|
|
|
// Experimental features for better performance
|
|
experimental: {
|
|
optimizeCss: true,
|
|
scrollRestoration: true,
|
|
// turbo: {}, // Disabled to avoid useSearchParams bundling issues
|
|
},
|
|
|
|
// Turbopack configuration to silence lockfile warning
|
|
// Set root to current directory (app/) to avoid multiple lockfile detection
|
|
turbopack: {
|
|
root: path.join(__dirname), // Use current directory (app/) as root
|
|
},
|
|
|
|
serverExternalPackages: ['pg', '@prisma/client', 'prisma', '@prisma/adapter-pg'],
|
|
|
|
// Security headers for additional protection
|
|
async headers() {
|
|
return [
|
|
{
|
|
// Service worker headers
|
|
source: "/sw.js",
|
|
headers: [
|
|
{
|
|
key: "Cache-Control",
|
|
value: "public, max-age=0, must-revalidate",
|
|
},
|
|
{
|
|
key: "Service-Worker-Allowed",
|
|
value: "/",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
// Next.js chunks - ensure proper caching with versioning
|
|
source: "/_next/static/chunks/:path*",
|
|
headers: [
|
|
{
|
|
key: "Cache-Control",
|
|
value: "public, max-age=31536000, immutable",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
// Next.js static files - ensure proper caching
|
|
source: "/_next/static/:path*",
|
|
headers: [
|
|
{
|
|
key: "Cache-Control",
|
|
value: "public, max-age=31536000, immutable",
|
|
},
|
|
],
|
|
},
|
|
// Security headers are handled in src/proxy.ts middleware (single source of truth)
|
|
// This ensures consistent headers across all routes and avoids conflicts
|
|
];
|
|
},
|
|
// Additional security settings
|
|
poweredByHeader: false, // Remove X-Powered-By header
|
|
compress: true, // Enable compression
|
|
reactStrictMode: true, // Enable React strict mode for better error detection
|
|
|
|
// Ignore type errors during build for Coolify successful deployment
|
|
typescript: {
|
|
ignoreBuildErrors: true,
|
|
},
|
|
};
|
|
|
|
export default withSentryConfig(withBundleAnalyzer(nextConfig), {
|
|
// For all available options, see:
|
|
// https://www.npmjs.com/package/@sentry/webpack-plugin#options
|
|
|
|
org: "fyrotech-solutions",
|
|
|
|
project: "javascript-nextjs",
|
|
|
|
// Only print logs for uploading source maps in CI
|
|
silent: !process.env.CI,
|
|
|
|
// For all available options, see:
|
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
|
|
|
|
// Upload a larger set of source maps for prettier stack traces (increases build time)
|
|
widenClientFileUpload: true,
|
|
|
|
// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
|
|
// This can increase your server load as well as your hosting bill.
|
|
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
|
|
// side errors will fail.
|
|
tunnelRoute: "/monitoring",
|
|
|
|
webpack: {
|
|
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
|
|
// See the following for more information:
|
|
// https://docs.sentry.io/product/crons/
|
|
// https://vercel.com/docs/cron-jobs
|
|
automaticVercelMonitors: true,
|
|
|
|
// Tree-shaking options for reducing bundle size
|
|
treeshake: {
|
|
// Automatically tree-shake Sentry logger statements to reduce bundle size
|
|
removeDebugLogging: true,
|
|
},
|
|
}
|
|
});
|