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.
- UI - https://www.notum-dev.cz/
- Strapi - https://api.notum-dev.cz/admin
- Readonly user:
- Email: [email protected]
- Password: Secret-pass-55
- Strapi v5 - Headless CMS to manage content
- Next.js App Router v15 - React framework for building web apps
- Shadcn/ui - TailwindCSS based UI components
- TailwindCSS v4 - Utility-first CSS framework
- Turborepo - Monorepo management tool to keep things tidy
- Docker
- node 22
- yarn 1.22
- nvm (optional, recommended)
- Clone this repository
git clone https://github.com/notum-cz/strapi-next-monorepo-starter- Install dependencies
# in root
# switch to correct nodejs version (v22)
nvm use
# install deps for apps and packages that are part of this monorepo
yarnDon't worry about warning "Workspaces can only be enabled in private projects yarnpkg/yarn#8580
- Set up apps
# prepare environment files (.env) for each app
yarn setup:appsWarning
More manual setup is needed for communication with Strapi using API tokens. Please refer to the UI README before running the UI app. Otherwise, you will get 401 Unauthorized error - missing or invalid credentials.
- Run apps
# run all apps in dev mode (this triggers `yarn dev` script in each app from `/apps` directory)
yarn dev- 🎉 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.
- 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.
- Strapi: Fully typed (TypeScript) and up-to-date Strapi v5 controllers and services
- Strapi config: Pre-configured and pre-installed with the most common plugins, packages and configurations
- Page builder: Page rendering mechanism and prepared useful components. Ready to plug-and-play
- Strapi live preview: Preview/draft mode for Next.js app to see changes in Strapi in real-time
- DB seed: Seed script to populate DB with initial data
- Next.js: Fully typed and modern Next.js v15 App router project
- Proxies: Proxy API calls to Strapi from Next.js app to avoid CORS issues, hide API keys and backend address
- API: Typed API calls to Strapi via API clients
- UI library: 20+ pre-installed components, beautifully designed by Shadcn/ui
- UI components: Ready to use components for common use cases (forms, images, tables, navbar and much more)
- TailwindCSS: TailwindCSS v4 setup with configuration and theme, CVA, tailwind-merge and tailwindcss-animate
- CkEditor: Pre-configured CkEditor v5 WYSIWYG editor with shared styles and colors
- Utils: Useful utils, hooks and helper functions included
- Auth: JWT authentication with Strapi Users & Permissions feature and NextAuth.js, auth middleware and protected routes
- Auth providers: Ready to plug-in providers like Google, Facebook etc.
- Localization: Multi-language support with next-intl and @strapi/plugin-i18n packages
- SEO: Pre-configured usage of @strapi/plugin-seo and integrated with frontend SEO best practices like metadata, sitemap.xml or robots.txt
- Turborepo: Pre-configured, apps and packages connected and controlled by Turbo CLI
- Dockerized: Ready to build in Docker containers for production
- Code quality: Out-of-the-box ESLint, Prettier, and TypeScript configurations in shareable packages
- Husky: Pre-commit hooks for linting, formatting and commit message validation
- Commitizen: Commitizen for conventional commits and their generation
- Heroku ready: Ready to deploy to Heroku in a few steps
- ... and much more is waiting for you to discover!
apps/ui- UI web app based on Next.js v15 and shadcn/ui (Tailwind) - README.mdapps/strapi- Strapi v5 API with prepared page-builder components - README.md
packages/eslint-config: ESLint configurations for client side applicationspackages/prettier-config: Prettier configuration with import sort plugin and tailwind plugin includedpackages/typescript-config: tsconfig JSONs used throughout the monorepo (not compatible with Strapi app now)packages/design-system: shared styles, primarily for sharing CkEditor color configurationspackages/shared-data: package that stores common values across frontend and backend
- In the root
package.json, update thenameanddescriptionfields to match the new project name. Optionally, update the names in/appsand/packagesas well. Keep the@repoprefix 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 "dev-templates" (and optionally the network name) to reflect the new project name. This helps prevent name conflicts on developers' machines.
- If you're not deploying to Heroku, remove all
Procfiles from the repository. - For Heroku deployment, create an S3 bucket and configure the necessary environment variables, as Heroku deletes uploaded files after dyno restarts.
[After this preparation is done, delete this section from README]
After installing dependencies and setting env vars up, you can control all apps using Turbo CLI. Some common commands are wrapped into yarn scripts. You can find them in root package.json file. For example:
# run all apps in dev mode (this triggers `yarn dev` script in each app from `/apps` directory)
yarn dev
# build all apps
yarn build
# dev run of specific app(s)
yarn dev:ui
yarn dev:strapiInstall extensions listed in the .vscode/extensions.json file and have a better development experience.
Husky is installed by default and configured to run following tasks:
-
lint(eslint) andformat(prettier) on every commit (pre-commithook). To do that, lint-staged library is used. This is a fast failsafe to ensure code doesn't get committed if it fails linting rules and that when it does get committed, it is consistently formatted. Running linters only on staged files (those that have been added to Git index usinggit add) is much faster than processing all files in the working directory. Theformattask is configured in root.lintstagedrc.jsand run globally for whole monorepo. Thelinttask is configured in each app individually and Strapi is skipped by default. -
commitlinton every commit message (commit-msghook). It checks if commit messages meet conventional commit format.
yarn commit- interactive commit message generator 🔥. How? Stage files you want to commit (e.g. using VS Code Source Control) and then run this script in the terminal from root and fill in the required information.yarn format- format code using prettier in whole monorepo. Prettier formatspackage.jsonfiles too.
bash ./scripts/utils/rm-modules.sh- Remove allnode_modulesfolders in the monorepo. Useful for scratch dependencies installation.bash ./scripts/utils/rm-all.sh- Remove allnode_modules,.next,.turbo,.strapi,distfolders.
We are using GitHub Actions for continuous integration. The CI expects some variables (APP_PUBLIC_URL, STRAPI_URL and STRAPI_REST_READONLY_API_KEY) to be available on the runner, so make sure to add them in the repository's settings. Have a look at the workflow definition for more details.
./scripts/heroku/heroku-postbuild.sh- Script for Heroku deployment to decide which app to build. It can be removed if not deploying to Heroku.
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.