NextJS Starter Kit

NextJS Starter Kit is a GitHub boilerplate template that scaffolds a Next.js and TypeScript application pre-configured with Jest, Cypress, Storybook, ESLint, and GitHub Actions for testing and CI/CD. It is maintained by the sex-request GitHub account, is MIT-licensed, and serves as the base setup for the account's frontend repository.

What is NextJS Starter Kit?

NextJS Starter Kit is an open-source repository template that generates a Next.js project with TypeScript, MDX, Yarn 2 Plug'n'Play, Storybook, Jest, Cypress, ESLint, and GitHub Actions. It takes a fresh Next.js setup and adds the configuration files, scripts, and workflows needed for linting, unit testing, end-to-end testing, and deployment, so that a new project starts with a working development pipeline instead of a blank app.

Key Features

• Yarn 2 with PnP — Dependencies are managed with Yarn 2 Plug'n'Play; install with yarn && yarn postinstall.
• Next.js + TypeScript + MDX — The framework is Next.js with TypeScript enabled and MDX turned on for content pages.
• Storybook on Webpack 5 with Sass — Storybook runs on Webpack 5 and loads .scss files through @storybook/preset-scss, with Sass variables available in stories.
• Jest with 100% coverage target — Unit testing is set up with Jest, including test, test:watch, and test:coverage scripts.
• Cypress E2E testing — End-to-end tests run through Cypress, with cypress:headless and e2e scripts.
• ESLint with airbnb-typescript — Linting uses ESLint with the airbnb-typescript rule set.
• GitHub Actions workflows — CI is provided through workflows for coverage, E2E, and deployments of the Next.js site and Storybook.
• Husky git hooks — Git hooks auto-update the patch version before commits and check lint, coverage, and E2E tests before pushes.

Who should use NextJS Starter Kit?

• Next.js developers starting a new app — get a working project with tests, linting, and CI already wired up instead of assembling them yourself.
• Teams standardizing on one frontend stack — adopt the same Yarn 2 PnP, airbnb-typescript, Jest, and Cypress setup across multiple repositories.
• Component library maintainers — use the Storybook plus Sass configuration to document and test UI components in isolation.
• Developers setting up CD — reuse the included GitHub Actions workflows for coverage badges, E2E runs, and gh-pages or Storybook deployment.

Use cases

• Indie developers: clone the template, run yarn && yarn postinstall, then yarn dev to get a local Next.js server with linting and tests ready.
• CI/CD engineers: copy the existing coverage.yaml, e2e.yaml, and deploy workflows to automate quality gates on other projects.
• Open-source project maintainers: benefit from the pre-configured Netlify deployment status and gh-pages workflows for hosting Storybook previews.

How does NextJS Starter Kit work?

Clone or fork the repository, run yarn && yarn postinstall to install dependencies, and start development with yarn dev. Before pushing, Husky auto-increments the patch version and runs lint, coverage, and E2E checks; after pushing, GitHub Actions workflows handle coverage, E2E testing, and deployment.

Pricing

NextJS Starter Kit is free and open source under the MIT License.

Alternatives

• create-next-app — the official Next.js scaffolding tool, which does not include Jest, Cypress, Storybook, or GitHub Actions by default.

FAQ

Is NextJS Starter Kit free?

Yes, the repository is licensed under the MIT License, so it can be used and modified freely, including for commercial projects.

What testing frameworks are included?

Jest is configured for unit tests with scripts for watch mode and coverage, and Cypress is configured for end-to-end tests with headless options. The README states a 100% coverage target for Jest.

What needs to be changed before production?

The README lists must-change locations: the project name in package.json, the production URL and path in next.config.js, the favicon and icon PNGs in /public, the application info in /public/manifest.json, the language in /pages/_document.tsx, and the description and title in /pages/_app.tsx.

Does the template support Sass?

Yes, Storybook on Webpack 5 uses @storybook/preset-scss, and the badges on the repository confirm Sass is part of the stack.