Skip to content
AI Monorepos Free online conference · June 23 Join us!

Next.js template

A Next.js App Router app with a shared UI library, ready for teams.

Terminal window
npx create-nx-workspace@latest my-workspace --template nrwl/nextjs-template
Next.js template preview

A Next.js monorepo using the App Router, server components, and a shared React UI library. The starting point for a marketing site, dashboard, or product front end where you want Nx caching, affected builds, and room to add more apps later.

Highlights

App Router first

Server components, layouts, and route handlers configured the way modern Next.js apps are built.

Share, do not copy

A shared UI library is wired into the app so design and logic live in one place across future apps.

CI that scales

Caching and affected mean adding a second or third Next.js app does not slow your pipeline down.

Quickstart

  • Start the dev server:
    Terminal window
    npx nx run @nextjs-template/web:dev
  • Build for production:
    Terminal window
    npx nx run @nextjs-template/web:build
  • Test every project:
    Terminal window
    npx nx run-many -t test
  • Visualize your monorepo's graph in the browser:
    Terminal window
    npx nx graph

What's inside

  • apps/web - Next.js App Router application
  • packages/ui - shared React component library
  • apps/web-e2e - Playwright end-to-end tests

Speed up CI with Nx Cloud

Connect this monorepo to Nx Cloud to share one remote cache across your team and CI, and distribute tasks across machines as it grows.

  • Remote caching shared across your team and CI
  • Distributed task execution with Nx Agents
  • Automated e2e test splitting
  • CI that detects failures and proposes fixes

Learn more