next-boilerplate is a production-ready Next.js and TypeScript application boilerplate created by Pankod that bundles Redux, Express.js, Sass, Jest, Storybook, and a built-in project CLI into a single starter kit.
What is next-boilerplate?
next-boilerplate is a well-structured, production-ready boilerplate for building server-rendered React applications with Next.js and TypeScript. It takes an empty project setup as its input and outputs a configured codebase with state management, styling, testing, internationalization, and API proxy layers already wired together. The boilerplate runs on Node.js via the Next.js and Express.js frameworks and was created by Pankod, a software development company.
Key Features
- Next.js — Minimalistic framework for server-rendered React applications that also runs on the client and server.
- TypeScript — Superset of JavaScript providing optional static typing, classes, and interfaces throughout the project.
- Redux — Predictable state container, with configuration included for actions, reducers, and store.
- Express.js — Custom Node.js server that handles server-side rendering and integrates with Next.js.
- Built-in Project CLI — Generates pages, class components, or functional components with one command; style and test files are created automatically.
- Testing setup — Jest and React Testing Library are pre-configured for unit and component testing.
- Storybook — Open-source tool for developing UI components in isolation.
- Sass/Scss and Bootstrap — CSS preprocessor with variables, nested rules, and mixins, plus the responsive Bootstrap framework.
- Docker — Tool designed to make it easier to create, deploy, and run applications using containers.
- Bundler Analyzer — Visualizes the size of webpack output files with an interactive zoomable treemap.
- next-i18next — Internationalization framework that translates key-value pairs for multiple languages.
Who is it for?
Frontend developers who want a pre-configured Next.js + TypeScript project with Redux, Sass, and testing so they can skip manual setup of each library. Teams building SEO-sensitive applications that need server-side rendering and a Node.js server layer. Developers who produce many components and can use the built-in CLI to scaffold pages and components with related action, reducer, style, and test files. Contributors who want to study a full-featured, MIT-licensed Next.js project structure.
What can you do with next-boilerplate?
- Frontend developers: Scaffold new pages or components via the CLI, choosing between page, class component, or functional component, and get Redux wiring, style, and test files generated automatically.
- International product teams: Enable multi-language support using the pre-configured next-i18next setup, translating key-value pairs per language.
- Teams with strict code quality: Run the included ESLint and Babel configurations, plus the Jest and React Testing Library test runner, to enforce linting and verify components.
- DevOps engineers: Build and deploy the boilerplate using the included Docker setup, with Express.js handling server-side rendering and API proxying.
How does next-boilerplate work?
The boilerplate is installed via the setup guide in the Pankod documentation. Once the project is created, you run npm run cli (after installing @pankod/pankod-cli globally with npm i -g @pankod/pankod-cli). It opens an interactive menu; you select whether the item is a page or component, then answer the prompts relevant to that selection, and the CLI creates the associated files, including actions, reducers, styles, and tests.
Pricing
next-boilerplate is free and open-source under the MIT License, Copyright © 2018-present Pankod.
Alternatives
create-next-app — the official Next.js scaffolding tool from Vercel, which sets up a minimal Next.js project without the extra Redux, Express.js, Sass, Storybook, and CLI layers.
FAQ
Is next-boilerplate free?
Yes, next-boilerplate is released under the MIT License, so you can use it in commercial and personal projects without licensing fees.
What does next-boilerplate include?
It bundles Next.js, TypeScript, Redux, Express.js, Sass/Scss, Bootstrap, Jest, React Testing Library, Storybook, ESLint, Babel, Docker support, reverse proxy, bundler analyzer, next-runtime-dotenv, and next-i18next.
Is next-boilerplate still maintained?
The Pankod team has announced superplate as the successor to next-boilerplate, built on a plugin architecture with more than 30 plugins. Next.js remains superplate's default framework, so users are encouraged to migrate to it for continued updates.
How do I generate a new component?
Install the CLI globally with npm i -g @pankod/pankod-cli, run npm run cli in your project, then choose the component type and answer the prompts. The CLI creates the component with style and test files and wires any required actions and reducers.
Does next-boilerplate support server-side rendering?
Yes, it uses Next.js for server-rendered React applications with Express.js as the custom server, which supports SEO factors important for Google and other search engines.
