Nextjs Multi-Zone - how to render an app WITHIN an app ?

[TomBell95]

Summary

I’m using Next15 with Turborepo. I’ve got a “super app” that handles layout, auth (NextAuth), etc., and I want to use multi-zones to render other apps inside it, like:

• /apps/home
• /apps/app-one/* → renders the app-one app
• /apps/app-two/* → renders the app-two app

Each sub-app is a full standalone Next15 app, the same layout, the same authentication (I have a package all my apps consume). Locally it works fine with rewrites(), but I’m hosting on AWS Amplify, so I’m aware I’ll likely need to reverse proxy via CloudFront in prod.

The only workaround I’ve thought of so far is using a NEXT_PUBLIC_IS_SUPER_APP env var in the sub-apps to conditionally skip layout/middleware/auth logic if they’re being rendered inside the super app.

Has anyone come across this? Or have any ideas on how to tackle this?

Nextjs multi-zone docs

Additional information

No response

Example

No response

[GaneshVarma1]

Hey @TomBell95 👋 — super cool setup you're working with!

I’ve seen a few folks trying this “super app with multi-zoned sub-apps” pattern using Next.js 15 and Turborepo, and you're already thinking in the right direction.

---

🧠 What's likely going on

The real challenge here is that each sub-app is its own full Next.js app — with its own layout, routing, auth logic, etc. So when you're rendering them inside the super app, things like layout and middleware can clash or duplicate unless you manage them carefully.

You're already doing the smart thing by sharing a common package for layout/auth. The NEXT_PUBLIC_IS_SUPER_APP flag idea is totally valid — I’ve used something similar to toggle behavior between "standalone" vs "embedded" mode.

---

✅ A few ideas that might help:

1. Use a shared layout/auth package across all apps

Put all layout/auth logic into a shared internal package like:

packages/
  ui-shell/
    layout.tsx
    withAuth.tsx
    context.ts

Then in each app’s layout.tsx, just import from it:

import { RootLayout } from 'ui-shell/layout';
export default RootLayout;

You can wrap the layout with a conditional check:

export const RootLayout = ({ children }) => {
  const isEmbedded = process.env.NEXT_PUBLIC_IS_SUPER_APP !== 'true';

  return (
    <AuthProvider>
      <Layout showSidebar={isEmbedded}>{children}</Layout>
    </AuthProvider>
  );
};

Boom — no duplication. You just toggle features depending on whether you're in the super app or not.

---

2. In prod (AWS Amplify), you’ll need a reverse proxy

Locally, rewrites make everything feel seamless — but in production, you’ll likely need CloudFront or a Lambda@Edge function to handle routing:

/apps/app-one/* → https://app-one.mydomain.com
/apps/app-two/* → https://app-two.mydomain.com

You can still keep everything in the same monorepo — just deploy each zone separately and let the super app handle layout/auth + render the sub-zone via proxy.

---

💡 Bonus thoughts

• You’re not crazy — this is basically how Vercel’s platform handles multi-tenant apps too.
• Stick with the NEXT_PUBLIC_IS_SUPER_APP flag — but maybe centralize it in a utility like isEmbeddedApp() so it’s easier to maintain.
• If you ever want to go deeper, you could explore Module Federation or Single-Spa — but that’s overkill unless you're building truly decoupled apps.

---

✅ TL;DR

• You're doing it right.
• Use a shared UI/auth package + env flags to control behavior
• In prod, use CloudFront or Amplify rewrites to forward sub-routes
• You're 90% there — just need a bit of proxy + code cleanup for the win

Let me know if you want a sample CloudFront config or Next.js middleware pattern — happy to help!