nextjs-13-boilerplate

nextjs-13-boilerplate is a public GitHub starter template by Sakil Khan that scaffolds a Next.js 13, React 18, and TypeScript project with Tailwind CSS and a curated set of developer-experience tooling, so you can start a new app without configuring linting, formatting, testing, or commit hooks yourself.

What is nextjs-13-boilerplate?

nextjs-13-boilerplate is a boilerplate/starter repository for building web applications with Next.js 13, styled by Tailwind CSS and typed with TypeScript. It takes a fresh project scaffold as input and produces a development environment with ESLint (including auto-sort for imports), Prettier, Jest for unit tests, Husky with Lint Staged, Conventional Commit Lint, Release Please for changelogs, and a GitHub Actions workflow for linting. The project is created by Sakil Khan and hosted on GitHub at sakilk130/nextjs-13-boilerplate.

Key Features

• Next.js 13 App Router — The project uses the src/app directory structure; the home page is edited at src/app/page.tsx.
• React 18 — The starter is built on React 18.
• TypeScript — The codebase is fully typed.
• Tailwind CSS — Utility-first styling is preconfigured.
• Jest — Unit testing is configured out of the box.
• Absolute imports with path aliases — Import components using the @/ prefix.
• ESLint — Finds and fixes code problems and automatically sorts imports.
• Prettier — Ensures consistent code formatting.
• Husky & Lint Staged — Run scripts on staged files before they are committed.
• Conventional Commit Lint — Enforces the conventional commit format.
• Release Please — Generate a changelog by activating the release-please workflow.
• GitHub Actions — A workflow lints the code.
• Snippets and Expansion Pack — The repo includes a collection of snippets and an expansion pack to install common libraries, components, and configs.

Who is it for?

• Next.js developers who want to skip repetitive setup and start from a project that already has TypeScript, Tailwind, ESLint, and Prettier configured.
• Small teams that need enforced commit conventions and automated lint checks in CI through Conventional Commit Lint and GitHub Actions.
• Open-source maintainers who want automated changelog generation via the included Release Please workflow.

What can you do with nextjs-13-boilerplate?

• Indie developers: Scaffold a new Next.js 13 site or app and immediately run npm run dev to start editing at src/app/page.tsx.
• Teams: Establish consistent code quality and commit practices by relying on the preconfigured ESLint, Prettier, Husky, and commit-lint setup.
• Maintainers: Turn on the release-please GitHub Action to automatically generate a changelog for releases.

How does nextjs-13-boilerplate work?

To use the template, clone the repository, install dependencies (yarn is encouraged so Husky hooks work properly), and run npm run dev to start the local server at localhost:3000. Then search for comments marked !STARTERCONF to update site title, URLs, favicons, and other defaults, and change the package name in package.json. Commits must follow the conventional commit standard.

FAQ

What does the !STARTERCONF comment mean?

It is a marker in the code that identifies the places you need to change when customizing the starter, such as title, URLs, favicons, and the package name. Follow the guide at each comment.

Does the starter support unit testing?

Yes, Jest is configured for unit testing. The repository description additionally names Testing Library and Cypress, though the README feature list highlights Jest.

Why should I use yarn instead of npm?

The README says yarn is encouraged so the Husky hooks can work properly, though the installation and development commands shown are npm commands.

How do I generate a changelog?

Activate the included release-please GitHub Actions workflow, which will generate a changelog for you.