Next Ts Setup

Next Ts Setup is a GitHub boilerplate that scaffolds a Next.js application with TypeScript, Sass, ESLint, Jest, Storybook, and GitHub Actions CI.

What is Next Ts Setup?

Next Ts Setup is a starter template for building Next.js applications with a pre-configured TypeScript toolchain, Sass for styling, ESLint for code quality, Jest with Testing Library for unit tests, and Storybook for component development. It runs on the Next.js React framework and is published on GitHub by user Gabb-c. The template takes a fresh clone as input and produces a working Next.js project with three GitHub Actions workflows that run build, lint, and test on every push.

Key Features

• Storybook — A configurable component workshop for developing and documenting UI components in isolation; pre-included in the template.
• Webpack 5 — The project uses the latest webpack module bundler for optimized production builds.
• Sass — Styling is written in Sass, a CSS preprocessor, allowing nested rules, variables, and mixins.
• ESLint Next configuration — Linting rules follow the official Next.js ESLint configuration to catch common issues in React and Next.js code.
• Editorconfig — A .editorconfig file keeps indentation and line endings consistent across editors and contributors.
• Jest with @testing-library — Unit and integration tests are set up using Jest along with Testing Library for rendering and querying components.
• CI workflows — Three separate GitHub Actions workflows for Build, Lint, and Test run automatically against the repository, with badges showing status.
• Commitlint with Husky and Lint-staged — Git commit messages must follow the Commitlint conventions, enforced by Husky and Lint-staged pre-commit hooks.

Who is it for?

• Frontend developers who want to bootstrap a new Next.js project without spending time configuring TypeScript, Sass, and testing tools from scratch.
• Open-source maintainers who need a ready-made CI pipeline with lint, build, and test checks on GitHub.
• Teams adopting component-driven development who want Storybook integrated from day one to build and document UI components.

What can you do with Next Ts Setup?

• Rapid prototyping: Clone the repository, install dependencies, and run npm run dev to get a live Next.js app at localhost:3000 with hot reload.
• Testing practice: Write unit tests with Jest and Testing Library and watch them execute inside the preconfigured test workflow.
• Component documentation: Use Storybook to develop UI components in isolation with live props controls and stories.

How does Next Ts Setup work?

The template is used by cloning the repository from GitHub. After that, you run npm install or yarn --check-files to install dependencies, then npm run dev to start the development server. The default page lives in src/pages/index.js, and edits to it hot-reload in the browser. The GitHub Actions workflows trigger automatically on pushes to run build, lint, and test checks.

FAQ

Is Next Ts Setup free?

Yes. The repository is open source and the README displays a GitHub license badge; it can be cloned and used without payment.

Does Next Ts Setup include TypeScript?

Yes. The repository name and description indicate a Next.js setup using TypeScript, and the template ships with a TypeScript toolchain configured for the project.

How do I start the development server?

After installing dependencies with npm install or yarn --check-files, run npm run dev or yarn dev and open http://localhost:3000.

What testing tools are configured?

Jest and @testing-library are preconfigured in the template, and a GitHub Actions workflow runs the test suite automatically.