TurboStrapi

TurboStrapi is a boilerplate starter template that pairs Strapi, Next.js 14, and Turborepo in a monorepo to give developers a pre-configured foundation for content-driven web apps.

What is TurboStrapi?

TurboStrapi is an open-source monorepo starter template from GitHub user sawden, combining the Strapi headless CMS, Next.js 14, and Turborepo. It takes a monorepo structure with separate backend and frontend workspaces and outputs a fully connected full-stack application with typed content-types, shared Tailwind CSS configuration, localization support, and demo data. The template is licensed under the MIT License and can be cloned from its repository.

Key Features

• Typed Strapi backend — Strapi is set up with basic content-types and is fully typed, generating TypeScript types out of the box.
• Next.js 14 frontend connected to Strapi — The frontend includes an API service that already fetches content from the Strapi backend.
• Turborepo pre-configured — Workspaces are split into apps/backend, apps/frontend, configs/tailwind-config, configs/eslint-config, packages/cva, and packages/ui, with turbo.json at the root.
• Shared Tailwind CSS configuration — A dedicated config package keeps styling consistent across the monorepo.
• Localization pre-configured — Multi-language content support is set up in Strapi, ready for i18n.
• CVA and tailwind-merge — The packages/cva workspace provides variant handling merged with tailwind-merge for flexible Tailwind classes.
• Code quality tooling — ESLint, Prettier, and TypeScript are configured across both apps and packages.
• Sample DB seed — A seed-data.tar.gz file allows importing demo data into Strapi with a single command.
• 100% test coverage (WIP) — All implemented features are reported as fully tested, with a work-in-progress note on the repository.
• SEO pre-configured (WIP) — SEO defaults are configured in the frontend, also flagged as work in progress.

Who is it for?

TurboStrapi is aimed at full-stack developers who want to skip the boilerplate setup when starting a project with Strapi and Next.js. It's also useful for teams building content-heavy sites that need localization, SEO, and a clean monorepo structure from day one. Developers familiar with type-safe React and Turborepo will find the setups already in place.

What can you do with TurboStrapi?

• Launch a content-driven marketing site — Use the seed data, localization, and SEO setup to create a multi-language site quickly.
• Build a custom UI kit — The packages/ui and packages/cva workspaces give you a starting point for a reusable React component library.
• Prototype a Strapi-backed app — The pre-connected API service and typed content-types mean you can start developing features immediately.

How does TurboStrapi work?

To get started, clone the repository, copy the .env.example files for both apps, install dependencies with yarn, and import the seed data into Strapi using the provided strapi import command. Running yarn dev starts both the Strapi backend and Next.js frontend. You then create an API token in the Strapi admin panel with specific permissions (Global find, Page find/findOne, I18n listLocales) and add it to the frontend env file.

FAQ

Is TurboStrapi free?

Yes, TurboStrapi is open-source under the MIT License, so you can use it in commercial and personal projects without restrictions.

What is included in the seed data?

The repository includes a seed-data.tar.gz file with demo content that can be imported into Strapi using the command yarn workspace @turbostrapi/backend strapi import -f ./seed-data.tar.gz.

Does TurboStrapi use a specific package manager?

The setup instructions use Yarn for installing dependencies and running scripts. There is no package-lock.json mentioned, so Yarn is the recommended package manager.

Can I use TurboStrapi with Tailwind CSS v4?

The template uses a shared Tailwind CSS configuration and CVA with tailwind-merge; it does not specify a Tailwind version, so stick with the configuration provided.

How do I enable Remote Caching?

Turborepo supports Remote Caching through Vercel: run npx turbo login to authenticate and npx turbo link to connect your project to the remote cache.