Next Ts Storybook Boilerplate

Next Ts Storybook Boilerplate is a starter repository that combines Next.js 11, TypeScript, and Storybook 6 with a fully configured linting and CI/CD setup for web application development.

What is Next Ts Storybook Boilerplate?

Next Ts Storybook Boilerplate is a project template that scaffolds a Next.js 11 application with TypeScript support and integrates Storybook 6 for isolated UI component development. It takes a newly initialized Next.js codebase and adds SCSS global variables and mixins, JSON-to-SCSS variable imports, ESLint, Stylelint, Prettier, Husky pre-commit hooks, Templateman component generation, and ready-to-use GitHub Actions and GitLab CI/CD configurations. It is maintained on GitHub by adlite, the same developer behind the Templateman tool.

Key Features (What makes it stand out?)

• Next.js 11 and TypeScript — the boilerplate is built on Next.js 11 with TypeScript, providing typed components, server-side rendering, and static site generation from the start.
• Storybook 6 integration — Storybook runs on its own dev server at http://localhost:3001 via npm run storybook:dev, while Next.js runs on port 3000 with npm run app:dev; npm run dev launches both in parallel.
• SCSS tooling — global SCSS variables and mixins are available everywhere, and you can import SCSS variables directly from JSON files using node-sass-json-importer.
• Preconfigured linters — ESLint with predefined rules, Stylelint with SCSS and Prettier plugins, and Prettier are set up without rule conflicts; npm run linters:inspect checks all code and npm run linters:fix autofixes issues.
• Pre-commit hooks — Husky and lint-staged run the linters on staged files before every commit, keeping code style consistent automatically.
• Component generator — Templateman is included to create new component files quickly, following the existing directory and naming conventions.
• Prepared CI/CD — GitHub Actions and GitLab CI/CD configuration files are already provided, so you can connect your own deployment or test workflows.
• Example components and structure — the repo includes example components and a recommended directory layout to show where to put pages, components, styles, and tests.

Who is it for?

• Frontend developers who want a ready-made Next.js and TypeScript setup with linting and Storybook already wired, saving hours of configuration.
• UI component library maintainers who need to document and test components in Storybook while keeping a production Next.js app in the same repository.
• Small development teams that want enforced code style via ESLint, Stylelint, and Prettier plus pre-commit hooks to catch issues before code is shared.
• Developers setting up CI/CD for a Next.js project can copy the included GitHub Actions or GitLab CI definitions and adapt them to their own pipeline needs.

What can you do with it?

• Scaffold a new Next.js project: clone the repository, run npm ci to install dependencies from the lockfile, then npm run dev to start the app and Storybook at the same time.
• Develop components in isolation: use npm run storybook:dev to build UI components with hot reload, then integrate them into pages in the Next app.
• Generate components with Templateman: run the component generator to produce new component folders that already match the project's linting rules and structure.
• Automate code quality: pre-commit hooks via Husky and lint-staged run the linters on every commit, and the provided CI configurations can run them in GitHub Actions or GitLab.

How does it work?

The boilerplate provides two parallel development servers. npm run app:dev starts Next.js at http://localhost:3000, npm run storybook:dev starts Storybook at http://localhost:3001, and npm run dev launches both concurrently. After cloning, run npm ci to install the exact dependencies from the package-lock; requires Node v14.x.x+ and npm v6.x.x+.

FAQ

Is this boilerplate free to use?

It is a public GitHub repository with no license or payment requirement mentioned in the README, so you can freely use and modify it as a starting point for your projects.

What Node and npm versions do I need?

The environment specifies Node v14.x.x or newer and npm v6.x.x or newer. Older versions may not support the dependencies used by Next.js 11 and Storybook 6.

How do I start Next.js and Storybook together?

Run npm run dev from the root directory. This starts Next.js on port 3000 and Storybook on port 3001 in parallel, with hot reloading for both.

What linters are preconfigured?

ESLint with predefined rules, Stylelint with SCSS and Prettier plugins, and Prettier. Use npm run linters:inspect to check all code and npm run linters:fix to automatically fix fixable issues.

Does the boilerplate include CI/CD?

Yes, it includes prepared configuration files for GitHub Actions and GitLab CI/CD, so you can set up automated linting, testing, and deployment pipelines quickly.