CatchRoutes

experimental-analyze

Added in Next.js v16.1.0. Analyzes your application's bundle output using Turbopack. Helps understand the size and composition of bundles (JavaScript, CSS, other assets). Does not produce a build artifact.

npx next experimental-analyze

By default, starts a local server (port 4000) after analysis so you can explore bundle composition in the browser:

• Filter bundles by route
• Switch between client and server views
• View the full import chain showing why a module is included
• Trace imports across server-to-client component boundaries and dynamic imports

Options

Option	Description
-h, --help	Show all available options
[directory]	Directory to analyze (default: current dir)
--no-mangling	Disable mangling (may affect perf, debugging only)
--profile	Enable production profiling for React
-o, --output	Write analysis to .next/diagnostics/analyze without starting server
--port <port>	Port for the analyzer server (default: 4000, env: PORT)

Example — save analysis to disk

npx next experimental-analyze --output
cp -r .next/diagnostics/analyze ./analyze-before-refactor

Dev server behind a reverse proxy (nginx)

When running next dev behind a reverse proxy, two things break: WebSocket HMR and /_next/* resource loading. Next.js dev server blocks cross-origin requests — it only allows origins matching ['*.localhost', 'localhost']. So when the browser sends Origin: https://your-proxy-domain.com, Next.js rejects the request. For WebSocket upgrades this produces "Invalid status line" in the browser console (Next.js sends raw Unauthorized bytes with no HTTP status line). For static chunks it returns 403.

Fix 1 — Next.js config (canonical):

// next.config.ts
const nextConfig: NextConfig = {
  allowedDevOrigins: ['your-proxy-domain.com'],
  // ...
};

Docs: https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins

Fix 2 — nginx (strip Origin header):

If you can't modify the Next.js config, strip the Origin header in the proxy. Without an Origin header, Next.js allows the request:

location /_next/webpack-hmr {
    proxy_pass http://backend:3002;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Origin "";           # ← strips Origin so Next.js allows it
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_buffering off;
    proxy_read_timeout 86400s;
    proxy_send_timeout 86400s;
}

The nginx approach also works for /_next/static/* if you add it to the / location block, but allowedDevOrigins is cleaner.