Nextjs Strapi Boilerplate

The Nextjs Strapi Boilerplate is a full-stack starter kit that pairs a Next.js frontend with a Dockerized Strapi headless CMS backend, pre-configured with GraphQL, Chakra UI, and NextAuth.

What is the Nextjs Strapi Boilerplate?

The Nextjs Strapi Boilerplate is a GitHub repository created by Nirmalya Ghosh that provides a ready-to-run foundation for building full-stack applications. It consists of two packages: a frontend folder containing a Next.js application and a backend folder containing a Dockerized Strapi application. The boilerplate supports GraphQL Query and Mutation out of the box, using Apollo Client on the frontend. It is written in TypeScript and uses Chakra UI with Emotion for styling. The repository is open source under the MIT License.

Key Features

The boilerplate bundles a complete toolchain so you can start building immediately. Key features include:

• Monorepo structure — The project contains separate frontend and backend packages, each with its own dependencies and configuration, in a single repository for easy collaboration and deployment.
• Dockerized Strapi backend — The backend runs via docker-compose up and exposes a GraphQL endpoint at http://localhost:1337/graphql.
• GraphQL ready — Apollo Client is pre-integrated, and both queries and mutations against the Strapi API work without extra setup.
• NextAuth with Google OAuth — The frontend includes NextAuth configured with a Google provider; you only need to create a Google OAuth Client and paste the Client ID and Secret into the .env file.
• Chakra UI and Emotion — The user interface is built with the Chakra UI component library and Emotion styling engine, giving you a flexible design system.
• TypeScript support — Both the Next.js and Strapi packages are TypeScript-based, providing type safety across the stack.
• One-click Vercel deployment for the frontend — A Vercel deployment button is included, with the required environment variables (NEXT_PUBLIC_API_URL, NEXT_PUBLIC_DATABASE_URL, NEXTAUTH_URL, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET) predefined in the deployment flow.

Who is it for?

Developers and teams with these profiles will get the most value from this boilerplate:

• Full-stack developers who want to skip the initial setup of wiring a Next.js frontend to a Strapi CMS and instead start with a working GraphQL foundation.
• Startup teams building a content-driven MVP who need a backend with an admin panel (Strapi) and a modern React frontend with authentication.
• Developers exploring the JAMstack who want a concrete example of combining a React framework, a headless CMS, and GraphQL with Docker.

What can you do with it?

The boilerplate supports a range of common full-stack scenarios, including:

• Content-driven web apps: Define content types in Strapi, expose them via GraphQL, and fetch them in Next.js to render pages.
• Authenticated user flows: Use the Google sign-in from NextAuth to let users log in and interact with Strapi endpoints that require authentication.
• Rapid API prototyping: Stand up a Strapi-backed GraphQL API in minutes using Docker, then iterate on data models and mutations without writing server code from scratch.

How does it work?

The setup is described step by step in the repository's README. First, clone the repository and run yarn install inside the frontend directory. Copy .env.example to .env, then create a Google OAuth Client and add its credentials. Run the frontend with yarn dev, and it starts on http://localhost:3000. In a second terminal, navigate to the backend directory and run docker-compose up to start the Strapi server on port 1337. Finally, in the Strapi admin panel, you must allow permissions for all operations on the Feed content-type for Authenticated users and enable the Google provider before logging into the Next.js app with a Google account.

FAQ

Is the Nextjs Strapi Boilerplate free?

Yes, the project is open source and licensed under the MIT License, so you can use, modify, and distribute it freely.

What are the requirements to run it?

You need Node.js, npm or Yarn, and Docker. The frontend requires Node.js and a package manager; the backend uses Docker Compose to run Strapi.

Does the boilerplate support GraphQL mutations?

Yes, GraphQL Query and Mutation are supported out of the box. The Apollo Client integration is included in the frontend, and Strapi exposes a GraphQL playground at http://localhost:1337/graphql.

Can I deploy the backend?

The backend deployment is not yet documented — the README says "We're still working on it." The frontend has a one-click Vercel deployment flow, but the backend must be hosted separately for now.

Do I need to configure Strapi manually?

Yes. After starting Docker, you need to adjust Strapi permissions (allow operations on the Feed content-type for Authenticated users) and enable the Google provider in the Strapi admin panel before the frontend login works.