Is there any way to share Next.js pages across multiple apps in a Turborepo?

[girishcx07]

Hi everyone,

I am exploring whether it is possible to share Next.js pages across multiple apps inside a Turborepo.

Context

My repository structure looks like this:

apps/
  app1/
  app2/

packages/
  common-ui/
  ui/
  typescript-config/
  tailwind-config/
  eslint-config/
  ...

Both app1 and app2 have almost identical modules and functionality. To avoid duplication, I created a common-ui package and tried moving reusable pages and components into these packages.

Issues I Encountered

However, when I attempted to import Next.js pages or modules from these shared packages, I hit several limitations:

1. Next.js APIs (cookies, headers, server-only modules) cannot be used inside shared packages.
   I received tracing and runtime errors such as: “Cookies can only be used inside a Next.js App Router environment”.

2. Server Components and Client Components behave inconsistently when located in external workspaces.
   Next.js seems to isolate each app at the project root, so external packages lose access to Next.js internals.

3. The Turborepo was originally created using a ShadCN template, which heavily couples the structure to a single app.
   The repository feels heavier than expected and difficult to extend for multi-app sharing.

Additional Context: TSUP Exploration

I also started exploring TSUP to optimise and bundle my shared packages.
However, I am not sure whether TSUP is the appropriate choice in this scenario:

• Should shared React/Next.js components even be bundled using TSUP?
• If pages or server components cannot be executed inside a shared package, is TSUP going to help or cause more isolation issues?
• What is the recommended way to use TSUP in a monorepo with multiple Next.js applications?
• Should shared UI packages be unbundled (plain TypeScript + Next.js transpilePackages) instead of being built with TSUP?

At this stage, I am unsure where TSUP fits into a multi-app Next.js monorepo, especially when the goal is to reuse App Router components.

What I Want to Achieve

• A clean monorepo setup where Next.js pages, layout structures, and server/client components can be shared across multiple applications.
• Ideally, reusable modules should behave exactly like native Next.js files inside app1 and app2.
• I cannot share the actual private repository, but I can share the full directory tree if needed.

Questions

1. Is it currently possible to share Next.js pages or App Router modules (layouts, routes, server components) across apps in a Turborepo?

2. Are there recommended patterns for:

   • sharing server components?
   • sharing client components that rely on Next.js hooks?
   • sharing logic that depends on cookies, headers, or other Next.js server-side features?
   • sharing pages across the projects so that if anything change in the app1 considering app2 might have the impact?

3. How should TSUP be used (or avoided) in a monorepo where shared packages need to integrate tightly with Next.js?

4. If anyone has an example repository with such a setup, could you share guidance or best practices?

5. If recreating the repo from scratch is easier, I am open to step-by-step help.

Any suggestions or sample structures would be greatly appreciated.
Thank you!