Simple Next.js Boilerplate is a minimal starter kit that bundles Next.js with TypeScript, SASS/SCSS, and Styled Components, plus a preconfigured testing and linting pipeline, ready to deploy to Vercel. It takes a blank project and produces a runnable Next.js app with a working test suite, code formatting, and a Git-based deployment flow, maintained by Bruno Bernardino.
What is the Simple Next.js Boilerplate?
Simple Next.js Boilerplate is a starter template for building Next.js applications with TypeScript, SASS/SCSS, Styled Components, Jest, ESLint, and Prettier already wired together. It accepts a new project directory and outputs a fully configured Next.js app with absolute import support and an automated test/lint workflow. The template runs on Node.js and is designed to deploy to Vercel directly from Git.
Key Features
- Preconfigured tech stack — Next.js with TypeScript, SASS/SCSS, and Styled Components are set up out of the box, removing manual configuration.
- Testing with Jest — Jest is included;
make testruns both linting and tests, whilemake test/updateupdates snapshot tests. - Linting and formatting — ESLint and Prettier come preconfigured;
make prettyformats the entire codebase. - Absolute imports — The template supports absolute path imports to avoid relative path overhead.
- Make-based development commands —
make installinstalls dependencies,make startlaunches the dev server, andmake testruns checks. - Vercel deployment — Pushing a branch triggers a preview deployment; merging to
maindeploys production. - Customization TODOs — The README lists specific files to edit before publishing:
theme-colorinpages/_document.tsx, package.json metadata,lib/constants.ts,styles/__variables.scss,.env.sample, and the README itself. - Live demo — A working example is available at simple-nextjs-boilerplate.onbrn.com.
Who is it for?
- Developers starting a new Next.js project — Use this boilerplate to skip configuration and go straight to writing components and pages.
- Teams that want consistency — The built-in ESLint, Prettier, and Jest setups enforce a uniform code style and test coverage from the first commit.
- Developers deploying to Vercel — The Git-based deployment workflow is designed for Vercel previews and production branches.
- Learners exploring the Next.js ecosystem — The simple structure with commented TODOs is a clear starting point for understanding how Next.js, SCSS, and Styled Components work together.
What can you do with it?
- Scaffold a new web app — Clone the repo, run
make installandmake start, then develop with hot reloading and preconfigured styling. - Set up a CI pipeline — Use
make testin your CI to run linting and tests automatically on each commit. - Publish a site quickly — Push to GitHub and connect to Vercel to get preview deployments for every branch and production deploys from
main.
How does it work?
- Clone or download the repository.
- Run
make installto install dependencies. - Run
make startto launch the development server. - Edit the files listed in the TODOs to customize the project metadata, theme color, constants, and environment variables.
- Push to Git — Vercel builds from the branch and creates deployments automatically.
FAQ
Does this boilerplate use TypeScript?
Yes, the template is built with TypeScript and includes the necessary tsconfig setup, so you can use typed components and props right away.
How do I run tests?
Run make test from the project root; it executes both linting and the Jest test suite. To update snapshot tests, use make test/update.
How does deployment work?
The project is designed for Vercel. Pushing a branch creates a preview deployment, and merging to main triggers a production deployment.
