Next Template App

Next Template App is a pre-configured Next.js starter template by Tiso Alvarez Puccinelli that bundles Chakra UI, TypeScript, Redux Toolkit, Storybook, and a full testing and CI/CD pipeline into one GitHub repository.

What is Next Template App?

Next Template App is a GitHub repository that serves as a starting point for building Next.js applications with the Chakra UI component library and TypeScript. It takes a cloned copy of the repository as input and produces a running Next.js app on localhost:3000 after running yarn && yarn dev. The template is authored by Tiso Alvarez Puccinelli and is designed to save setup time by pre-configuring tooling for linting, formatting, testing, and deployment.

What makes Next Template App stand out?

• Pre-configured testing stack — Includes Jest and React Testing Library for unit tests, TestCafé for end-to-end tests against a local Firefox browser, and Chromatic for visual regression testing.
• Storybook component documentation — Run yarn storybook to open component docs with hot reload at localhost:6006, or yarn build-storybook for a production build.
• Redux Toolkit state management — The template ships with Redux Toolkit set up as the default state management solution.
• CI/CD with GitHub Actions and Vercel — Three workflows handle code quality, end-to-end tests, and unit/regression tests, plus a Vercel deploy that supports E2E testing against previews.
• Code quality tooling — ESLint and Prettier standardize code style, CSpell checks spelling, and yarn type-check validates TypeScript types; yarn check-repo runs all of them together.
• Chakra theme typings generation — yarn generate-theme-typings generates TypeScript typings for your custom Chakra theme and runs automatically on post-install.
• Yarn-based script set — Commands for dev, build, start, test, coverage, lint, spellcheck, and Storybook are all defined in the project.

Who should use Next Template App?

• Next.js developers who want a starter with testing and linting already configured instead of building tooling from scratch.
• Frontend teams using Chakra UI who need a consistent setup for component development and Storybook documentation.
• Developers deploying to Vercel who want a ready-made CI/CD pipeline that runs quality checks and end-to-end tests before production deployment.

Use cases

• Start a new Next.js project — Clone the repository, run yarn && yarn dev, and get a working app with hot reload at localhost:3000.
• Set up visual regression testing — Connect Chromatic by creating an account, adding your GitHub project, and storing a CHROMATIC_PROJECT_TOKEN in secrets.
• Automate preview deployments — Add VERCEL_ORG_ID, VERCEL_PROJECT_ID, and VERCEL_TOKEN to GitHub secrets so every push deploys to Vercel and runs E2E tests.

How does the template work?

The template is installed by cloning the repository and running yarn && yarn dev in its root folder. To enable the included GitHub Actions, you must enable code scanning for CodeQL, add a CHROMATIC_PROJECT_TOKEN for Chromatic, and add the three Vercel variables mentioned above. If those workflows are not needed, you can delete the .github/workflows folder.

Pros and cons

• Pros: Everything is pre-wired: unit tests, E2E tests, linting, Storybook, and CI/CD workflows are included, so you can focus on application code.
• Cons: Running E2E tests locally requires Firefox to be installed, and using the Chromatic and Vercel workflows requires manual setup of multiple tokens and secrets.

Alternatives

• create-next-app, the official Next.js scaffolding tool, which generates a minimal project with fewer pre-installed libraries and no CI/CD configuration.

FAQ

Is Next Template App free to use?

The repository is public on GitHub and the README includes a Ko-fi link for donations, so you can clone and use the template without paying. No commercial license or pricing is mentioned on the page.

What does Next Template App include?

It includes a Next.js app with Chakra UI, TypeScript, Redux Toolkit, Storybook, Jest, React Testing Library, TestCafé, Chromatic, ESLint, Prettier, and CSpell. GitHub Actions workflows and a Vercel deployment configuration are also part of the template.

Do I need Firefox to run end-to-end tests?

Yes. The yarn test-e2e command uses the locally installed Firefox browser via TestCafé, so Firefox must be installed on your machine. If you delete the workflow folder, this requirement only affects local E2E runs.

How do I set up Vercel deployment for this template?

Add VERCEL_ORG_ID, VERCEL_PROJECT_ID, and VERCEL_TOKEN to your GitHub project secrets. The org and project IDs come from linking with the Vercel CLI, and the token is generated on your Vercel account tokens page.