🔥 Strapi v5 & Next.js v16 Monorepo Starter

This is a ready-to-go starter template for Strapi projects. It combines the power of Strapi, Next.js, Shadcn/ui libraries with Turborepo setup and kickstarts your project development. We call it a Page builder for enterprise applications.

👀 Live demo

• UI - https://www.notum-dev.cz/
• Strapi - https://api.notum-dev.cz/admin
• Readonly user:
  • Email: user@notum.cz
  • Password: Secret-pass-55

🥞 Tech stack

• Strapi v5 - Headless CMS to manage content
• Next.js App Router v16 - React v19 for building web apps
• Shadcn/ui - TailwindCSS based UI components
• TailwindCSS v4 - Utility-first CSS framework
• Turborepo - Monorepo management tool to keep things tidy

🚀 Getting started

Prerequisites

• Docker
• node 24
• pnpm 11
• nvm (optional, recommended)

Run dev (in 4 steps)

1. Clone this repository

   git clone https://github.com/notum-cz/strapi-next-monorepo-starter
   # checkout `main` branch (`dev` contains unreleased features and improvements)
   git checkout main

   Or click Use this template to create a new repository based on this template.

2. Install dependencies

   # in root
   # switch to correct nodejs version (v24)
   nvm use
   
   # optionally, switch to pnpm v11.1.1
   (corepack prepare pnpm@11.1.1 --activate)
   
   # install deps for apps and packages that are part of this monorepo
   pnpm install

3. Run apps

   # run all apps in dev mode (this triggers `pnpm dev` script in each app from `/apps` directory)
   pnpm run dev

Warning

Before the first run, you need to retrieve Strapi API token.

pnpm run dev:strapi

Go to Strapi admin URL and navigate to Settings > API Tokens. Select "Create new API token" and copy it's value to STRAPI_REST_READONLY_API_KEY in /apps/ui/.env.local file. Refer to the UI README for more details.

4. 🎉 Enjoy!

   • Open your browser and go to http://localhost:3000 to see the UI app in action.
   • Open your browser and go to http://localhost:1337/admin to see the Strapi app in action.

5. Next steps?

   • See What's inside? for more details about apps and packages.
   • You also probably want to customize naming in the project. See Transform this template to a project.

✨ Features

• Modern Strapi + Next.js foundation: Strapi v5 CMS, Next.js v16 App Router, React 19, TypeScript, pnpm workspaces, Turborepo, Node 24, and Docker-ready production builds
• Typed page builder: Prepared Strapi dynamic-zone components, typed populate configs, generated Strapi types, frontend component registry, and restyled starter sections ready for project customization
• Content preview and routing: Strapi draft/live preview, localized page routing, dynamic rewrites, breadcrumbs, canonical metadata, and SEO-friendly page rendering
• Design system and UI kit: TailwindCSS v4, shadcn/ui components, shared design tokens, reusable typography primitives, and common frontend components for navigation, forms, images, content sections, and rich text
• Rich text editing: Pre-configured CKEditor and TipTap with shared styles, generated TipTap presets, and reusable editor rendering on the frontend
• Media handling: Strapi upload configuration with local and Azure Blob Storage support, plus frontend image helpers for optimized Strapi media rendering and fallbacks
• Authentication: Better Auth integrated with Strapi Users & Permissions, JWT handling, auth middleware, protected routes, and provider-ready setup
• Localization: Multi-language content and routes powered by next-intl and @strapi/plugin-i18n
• Developer workflow: DB seed data, typed Strapi API clients, shared utilities, ESLint with Prettier formatting, Lefthook git hooks, Commitizen, conventional commits, and CODEOWNERS/contribution templates
• Documentation and QA: Docusaurus documentation app plus Playwright-based E2E, accessibility, performance, SEO, and visual regression test suites
• ... and much more is waiting for you to discover!

📦 What's inside?

Apps

• apps/ui - UI web app based on Next.js v16 and shadcn/ui (Tailwind) - README.md
• apps/strapi - Strapi v5 API with prepared page-builder components - README.md

Packages

• packages/eslint-config: ESLint configurations with integrated Prettier formatting, import ordering, and Tailwind plugin
• packages/typescript-config: tsconfig JSONs used throughout the monorepo (not compatible with Strapi app now)
• packages/design-system: shared styles, design tokens, and editor configurations (CKEditor and TipTap)
• packages/shared-data: package that stores common values across frontend and backend
• packages/strapi-types: typescript definitions of content generated by Strapi and mirrored to separate package for easy usage in other apps. See README.md for more details.

☕ Scripts

Turbo CLI

After installing dependencies and setting env vars up, you can control all apps using Turbo CLI. Some common commands are wrapped into scripts. You can find them in root package.json file. Few examples:

# run all apps in dev mode (this triggers `pnpm dev` script in each app from `/apps` directory)
pnpm run dev

# run apps separately
pnpm run dev:ui
pnpm run dev:strapi

# build all apps
pnpm run build

# build specific app
pnpm run build:ui
pnpm run build:strapi

Using those turbo scripts is preferred, because they ensure correct dependency installation and environment setup.

pnpm scripts

In root package.json file, there are some useful tasks wrapped into pnpm scripts:

# interactive commit message generator - stage files first, then run this in terminal
pnpm run commit

Tip

You can also use pnpm commands to run scripts in specific apps or packages:

# run a script in a specific app
pnpm -F @repo/ui dev

# run a script in a specific package
pnpm -F @repo/shared-data build

# run a script from root package.json in different directory
cd apps/ui
pnpm -w run lint

Bash scripts

# Remove all `node_modules` folders in the monorepo
# Useful for scratch dependencies installation
bash ./scripts/utils/rm-modules.sh

# Remove all node_modules, .next, .turbo, .strapi, dist folders
bash ./scripts/utils/rm-all.sh

# Remove all `.next` folders in the monorepo
# Useful for scratch builds of ui
bash ./scripts/utils/rm-next-cache.sh

🧪 Testing and QA

A dedicated QA workspace is available under the qa/ directory, providing automated tests for E2E, accessibility, performance, and SEO validation.

See README for available test suites and commands.

🔌 VSCode Extensions

Install extensions listed in the .vscode/extensions.json file and have a better development experience.

🔱 Git Hooks & Conventions

Lefthook is installed by default and configured to enforce code quality and consistent naming conventions.

Pre-commit Hook

The pre-commit hook runs the following checks before each commit:

1. Branch name validation — Ensures branch names follow the convention (skipped during merges):

   <type>/STAR-<number>-<description>
   

   Examples:

   • feat/STAR-1582-repo-config
   • fix/STAR-42-null-pointer-on-login

   Exempt branches: main, master, develop, dev, release/*, hotfix/*

   [!TIP] To rename an existing branch: git branch -m <old-name> <new-name>

2. Lint-staged — lint and format on every commit (pre-commit hook) via lint-staged. ESLint handles JS/TS linting and formatting (via integrated Prettier), while Prettier runs directly on CSS/MD/SCSS files. Configuration is in root .lintstagedrc.js and per-app .lintstagedrc.js files.

Commit Message Hook

The commit-msg hook validates commit messages using commitlint:

Conventional commits — Messages must follow conventional commit format, e.g.:

feat(ui): add dark mode toggle
fix(strapi): resolve null pointer on login
chore: update dependencies

Use pnpm run commit for an interactive commit message generator.

Environment Variables in Commits

When introducing new environment variables, mention them in commit messages using env.VARIABLE_NAME or VARIABLE_NAME (CONSTANT_CASE). The auto-pr workflow extracts these from commit messages and lists them in the PR description under "Required Environment Variables".

Example commit:

feat(ui): add sentry integration

Added error tracking with Sentry.

New environment variables:
- env.SENTRY_DSN
- env.SENTRY_AUTH_TOKEN

📝 Pull Request Template

The PR template enforces a consistent structure for all pull requests.

♾️ Deployment

GitHub Actions

We are using GitHub Actions for validation of builds and running tests. There are 2 workflows prepared:

1. ci.yml - runs on every push and pull request to main branch. It verifies if code builds.
2. qa.yml - manually triggered workflow that runs the QA tests from qa/tests directory. Ideally it should be run against deployed frontend (by setting BASE_URL env variable and passing to playwright.config.ts).
3. auto-pr.yml - automatically creates/updates a PR from dev to main when changes are pushed. Extracts environment variables from commit messages (see Environment Variables in Commits).

Heroku

This section is under construction. 😔

Create 2 apps in Heroku, one for Strapi and one for Next.js UI. Stack is heroku-24. Connect both to GitHub repository in the Deploy tab and configure automatic deploys from your branch.

Tip

If you're not deploying to Heroku, remove all Procfiles from the repository.

We published two buildpacks to make deployment easier and more efficient. They can reduce the slug size by more than 70 % by pruning unnecessary files from the Turborepo monorepo during the build and they also speed up the build and installation:

• https://github.com/notum-cz/heroku-buildpack-turbo-prune.git
• https://github.com/notum-cz/heroku-buildpack-next-standalone-slim.git

Strapi app configuration

1. Connect a database (Heroku Postgres). DATABASE_URL env variable will be set automatically so you can skip any other database-related configuration.
2. Set env variables based on .env.example, don't forget to set:
   • APP- set to strapi
   • WORKSPACE - set to @repo/strapi
3. Set buildpacks in this order:
   • https://github.com/notum-cz/heroku-buildpack-turbo-prune.git
   • heroku/nodejs
4. We recommend setting up an AWS S3 bucket for media uploads, as Heroku's filesystem will delete uploaded files after dyno restarts.

UI app configuration

1. Set env variables based on .env.example, don't forget to set:
   • APP- set to ui
   • WORKSPACE - set to @repo/ui
   • NEXT_OUTPUT - set to standalone
2. Set buildpacks in this order:
   • https://github.com/notum-cz/heroku-buildpack-turbo-prune.git
   • heroku/nodejs
   • https://github.com/notum-cz/heroku-buildpack-next-standalone-slim.git

💡 Transform this template to a project

• In the root package.json, update the name and description fields to match the new project name. Optionally, update the names in /apps and /packages as well. Keep the @repo prefix unless you prefer a different scope or company name—changing it will require updates throughout the entire monorepo.
• In docker-compose.yml, update the top-level name "strapi-next-starter" (and optionally the network name) to reflect the new project name. This helps prevent name conflicts on developers' machines.

[After this preparation is done, delete this section from README]

📖 Documentation

There is plenty of documentation in README files in individual apps and packages. Make sure to check them out. In addition, there is more in the /apps/docs directory. We want to improve the documentation over time, so stay tuned.

💙 Feedback

This repository was created based on strapi-next-monorepo-starter. If you encounter a problem with the template code during development, or you have implemented a useful feature that should be part of that template, please create an issue with a description or PR in that repository. So we can keep it updated with great features.