Next.js

Verified against Claude Code · 2026-07-13

Structure a monorepo running multiple Next.js apps without duplicating your design system

Lays out a Turborepo/pnpm workspace for several Next.js apps sharing UI, types, and config through internal packages instead of copy-pasted code.

Claude CodeCursor 2.1GitHub Copilot

The prompt

Ready to copy — highlighted parts are example details you can swap.

<context>
Apps that need to live in this monorepo: marketing site (apps/web), customer dashboard (apps/dashboard), internal admin tool (apps/admin)
What should be shared across them (UI components, types, config, utilities): A design-system UI package, shared TypeScript types for the API, shared eslint/tsconfig
Package manager: pnpm
</context>

<task>
Design the monorepo layout for these apps using Turborepo and pnpm workspaces, with shared code living in internal packages that each app depends on via the workspace protocol — not copy-pasted between app directories.
</task>

<structure_requirements>
- apps/ holds one folder per deployable Next.js app, each with its own next.config, package.json, and env files — Next.js only loads .env files from the app's own root directory, not the repo root, so each app manages its own environment variables even for values that happen to be the same across apps.
- packages/ holds shared, non-deployable code: a UI package for shared components, a config package for shared eslint/tsconfig/tailwind config, a types package if there's a shared domain model, each with its own package.json.
- Apps depend on internal packages via the workspace protocol (e.g. "@repo/ui": "workspace:*"), so changes to a shared package are picked up by every app that depends on it without a publish step.
- Configure turbo.json's task pipeline so that build/lint/test tasks declare their real dependencies (a package's build must complete before an app that depends on it builds), and so turbo's caching can skip rebuilding an app when nothing it actually depends on changed — don't leave every task marked as depending on the whole repo.
- Decide, and state explicitly, whether each app deploys independently (separate Vercel projects/domains) or as part of one deployment — this affects whether env vars and preview deployments are configured per-app or centrally.
</structure_requirements>

<output_format>
The folder tree (apps/ and packages/ with their contents), an example turbo.json pipeline entry showing the dependency between a shared package's build and an app's build, and one paragraph on the env-file gotcha above.
</output_format>
Customize the highlighted detailsoptional — the prompt above already works

Why this works

The env-file detail is the one that actually bites teams in production and rarely shows up in a generic monorepo tutorial: Next.js resolves .env files relative to each app's own root, not the monorepo root, so a shared .env file at the repo root silently does nothing for any app — every app needs its own env files even for variables that are identical across apps. The workspace-protocol dependency (workspace:*) is what makes shared packages actually useful instead of aspirational: without it, 'shared' UI components just get copy-pasted at the first divergence because there's no live link between the package and its consumers. And making the turbo.json task graph reflect real dependencies, rather than defaulting every task to depend on the whole repo, is what makes the monorepo's build actually faster than separate repos would have been — the entire reason to accept the coordination overhead of a monorepo in the first place.

What you get back

apps/web, apps/dashboard, apps/admin each with their own next.config.ts, package.json, .env.local. packages/ui (shared components), packages/config (shared eslint-config, tsconfig-base), packages/types (shared API types). turbo.json: dashboard's build task lists ['^build'] as a dependency, meaning packages/ui and packages/types build first, and turbo only rebuilds dashboard when its own files or one of those two packages' outputs actually changed — not on every commit to apps/admin.

Verified against

Claude Code Sonnet 4.6 · 2026-07-13

Cursor 2.1 · 2026-07-17

Changelog

  • 2026-07-13 Initial version, tested against Claude Code laying out a three-app Turborepo/pnpm workspace with Next.js 16 apps.

Need this built into your business?

If a prompt isn't enough — custom software, built and maintained for you — that's Scult's day job.

EXPLORE CUSTOM SOFTWARE
All Next.js prompts

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY