JavaScript chunks not loading for Next.js 16 micro frontend app when routed through host app using rewrites

[mannuuk]

Summary

I am working on a Next.js micro frontend architecture using the App Router, next-intl, and Next.js 16.2.4.

The setup has multiple independent Next.js apps:

host app running on http://localhost:3000/
catalog app running on http://localhost:3001/
checkout app running on http://localhost:3002/
The host app is the main shell. It routes some paths to the catalog app using Next.js rewrites. The problem happens when the catalog app is accessed through the host app.

When I open a catalog route from the host app, the HTML/page renders, but the JavaScript does not load correctly. Because of this, client components are not hydrated and client-side actions do not work.

For example, a simple client component like this does not trigger the click event:

'use client';
function TestFile() {
const handleClick = () => {
console.log('clicked');
};
return (

Click me

);
}
export default TestFile;
The button renders, but console.log('clicked') does not run when clicking it.

Because hydration/client JS is not working, other JavaScript-based providers are also not working, such as:

context providers
cart/wishlist providers
toast provider
analytics provider
shared UI package client behavior
other interactive client components
Architecture
The host app uses Next.js rewrites to forward catalog routes to the catalog app.

Example from host/next.config.ts:

const catalogOrigin =
process.env.NEXT_PUBLIC_CATALOG_ORIGIN ||
process.env.CATALOG_ORIGIN ||
"http://localhost:3001/";
const nextConfig = {
async rewrites() {
return {
beforeFiles: [
{
source: "/:locale/catalog/:path*",
destination: ${catalogOrigin}/:locale/catalog/:path*,
},
{
source: "/:locale/all-products/:path*",
destination: ${catalogOrigin}/:locale/all-products/:path*,
},
{
source: "/:locale/category/:path*",
destination: ${catalogOrigin}/:locale/category/:path*,
},
{
source: "/:locale/product/:path*",
destination: ${catalogOrigin}/:locale/product/:path*,
},
{
source: "/:locale/wishlist/:path*",
destination: ${catalogOrigin}/:locale/wishlist/:path*,
},
],
};
},
};
The catalog app has its own assetPrefix:

const catalogOrigin =
process.env.NEXT_PUBLIC_CATALOG_ORIGIN ||
process.env.CATALOG_ORIGIN ||
"http://localhost:3001/";
const nextConfig = {
assetPrefix: catalogOrigin,
allowedDevOrigins: ["localhost:3000"],
transpilePackages: ["@package/ui", "@package/utils", "@package/analytics"],
};
Both apps use:

{
"next": "^16.2.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next-intl": "^4.11.0"
}
Both apps use next-intl locale routing:

export const routing = defineRouting({
locales: ["en", "fr", "de"],
defaultLocale: "en",
});
The catalog app layout wraps pages with several client providers:

<Providers params={{ locale }} messages={messages}>

{children} The Providers component is a client component and includes providers like SessionProvider, NextIntlClientProvider, CartProvider, WishlistProvider, Toast, etc.
Expected Behavior
When I access a catalog route through the host app, for example:

http://localhost:3000/en/product/8078711455933
I expect:

the catalog page HTML to render
the catalog app JavaScript chunks to load
React hydration to complete
client components to work
onClick handlers to fire
providers and interactive UI behavior to work
Actual Behavior
The page renders, but client-side JavaScript does not work.

Symptoms:

onClick handlers do not fire
client actions do not work
providers depending on client JS do not initialize correctly
interactive UI from shared packages does not work
hydration appears to fail or never complete
In terminal logs, I also sometimes see errors like:

TypeError: Cannot read properties of undefined (reading 'call')
at .next/server/webpack-runtime.js
And when the catalog app is not running, the host shows proxy errors like:

Failed to proxy http://localhost:3001/en/product/8078711455933
ECONNREFUSED 127.0.0.1:3001

Additional information

NEXT JS VERSION - 16.2.2
REACT - 19.0.0

Example

No response

[franciscomaestre]

This is a common issue with micro frontend architectures in Next.js. The JavaScript chunks fail to load because the asset prefix does not match between the host and the micro frontend.

Root cause: When you deploy multiple Next.js apps as micro frontends, each app generates chunks with paths relative to its own base URL. The host app tries to load these chunks from its own domain, resulting in 404s.

Solutions:

1. Set assetPrefix in next.config.js for each micro frontend to point to its own CDN or domain.

2. Configure basePath if the micro frontend is served under a subpath.

3. Ensure CORS headers are set on the CDN or server serving the chunks, so the host app can load them cross-origin.

4. Check output: standalone — if you are using standalone output, the chunks are bundled differently and may need additional configuration for the reverse proxy.

5. Verify your reverse proxy or nginx config routes /_next/static/* requests to the correct micro frontend based on the path prefix.

Could you share your next.config.js and your reverse proxy configuration? That would help pinpoint the exact issue.

[romkravets]

This is slightly deeper than just assetPrefix or CDN routing.

In micro frontend setups like this, the real issue is that Next.js chunk loading depends on a consistent runtime origin context.

When the host app rewrites requests to a different origin (catalog app), the initial HTML is rendered correctly, but the webpack runtime still tries to resolve _next/static chunks based on the host origin, not the micro frontend origin.

That leads to:

• chunks not being found (404 or silent failure)
• React hydration never completing
• event handlers not attaching

That’s why you see symptoms like “button renders but onClick never fires”.

assetPrefix alone is not enough here if the routing is done via rewrites instead of true navigation or proxy passthrough.

What usually works in this architecture:

• ensure /_next/* requests are transparently proxied to the micro frontend origin (not rewritten HTML only)
• or isolate micro frontends under distinct basePath + origin boundaries
• avoid mixing rewrites with cross-origin chunk loading

In practice, rewrites + separate Next.js apps breaks the assumption that the JS runtime origin == HTML origin.

[mannuuk]

Thanks for your comment,

But This issue is still coming in next.js 16 versions with turbo pack. same code working fine with next.js 15 versions.

[enmanuelcanelon]

[mannuuk]

Hi @enmanuelcanelon ,
Thanks for your suggestion.
This issue only coming in next.js 16 version. it's working fine with next.js 15 versions

[wanhei1]

This is a classic Multi-Zone + asset prefix issue. Here's the complete solution:

Root Cause

When the host app proxies requests to the catalog app via rewrites, the catalog app's JS chunks still reference localhost:3001 as their base URL. The browser tries to load chunks from localhost:3001, but they should come through localhost:3000.

Solution: Configure assetPrefix + basePath

Host App (localhost:3000)

// next.config.js (host)
module.exports = {
  async rewrites() {
    return [
      {
        source: '/catalog/:path*',
        destination: 'http://localhost:3001/:path*',
      },
      {
        // Also proxy static assets
        source: '/_next/static/:path*',
        destination: 'http://localhost:3000/_next/static/:path*',
      },
    ];
  },
};

Catalog App (localhost:3001)

// next.config.js (catalog)
module.exports = {
  basePath: '/catalog',
  assetPrefix: '/catalog',
  
  // Important for micro frontends
  experimental: {
    outputStandalone: true,
  },
};

Alternative: Use assetPrefix pointing to host

// next.config.js (catalog)
module.exports = {
  assetPrefix: 'http://localhost:3000',
  basePath: '/catalog',
};

Multi-Zone Approach (Recommended)

Next.js has built-in Multi-Zone support which is cleaner:

// next.config.js (host)
module.exports = {
  async rewrites() {
    return [
      {
        source: '/catalog',
        destination: `${process.env.CATALOG_URL}/catalog`,
      },
      {
        source: '/catalog/:path+',
        destination: `${process.env.CATALOG_URL}/catalog/:path+`,
      },
    ];
  },
};

# Start with multi-zone
CATALOG_URL=http://localhost:3001 next dev

Debugging Checklist

# 1. Check chunk URLs in browser DevTools Network tab
# 2. Verify assetPrefix is applied:
curl -s http://localhost:3001/catalog | grep '_next'

# 3. Check if chunks are accessible through host:
curl -I http://localhost:3000/_next/static/chunks/xxx.js

# 4. Verify CORS headers if using different origins

Production Considerations

For production, use a reverse proxy (nginx/Cloudflare) instead of Next.js rewrites:

# nginx.conf
location /catalog/ {
    proxy_pass http://catalog-app:3001/;
    proxy_set_header Host $host;
}

This avoids the asset prefix complexity entirely.