Thank u, Next.js

Thank u, Next.js is a Next.js boilerplate that preconfigures TypeScript, Tailwind CSS, Chakra UI, and a complete testing stack for test-driven frontend development.

What is Thank u, Next.js?

Thank u, Next.js is an open-source boilerplate created by narze and built by combining two official Next.js examples (with-tailwindcss-emotion and with-typescript-eslint-jest) with extra tooling. It takes a blank Next.js application and produces a project preconfigured for linting, formatting, unit testing, end-to-end testing, Storybook, and multiple styling systems. The template is designed for Next.js and can be deployed to Vercel.

Key Features

• TypeScript — The template includes TypeScript for static typing across all pages, components, and test files.
• ESLint & Prettier — Linting and formatting are configured, and Husky commit hooks run both before every commit and push.
• Jest & React Testing Library — Unit testing is set up with Jest, ts-jest, and React Testing Library for component and page tests.
• Cypress — End-to-end testing uses Cypress along with Cypress Testing Library, covering integration-level workflows.
• Storybook — A Storybook instance is included so you can develop and visually test UI components in isolation.
• Tailwind CSS with Twin.macro — Tailwind CSS is loaded via Emotion and Twin.macro as a Babel macro, so PurgeCSS is not required.
• Chakra UI — The Chakra React component library is installed as a UI layer for accessible, pre-built components.
• GitHub Actions CI — The repository includes a workflow at .github/workflows/nodejs.yml that runs all tests automatically on push.

Who is it for?

• Frontend developers who want a preconfigured Next.js environment without manually assembling tooling.
• Teams practicing test-driven development that need unit, e2e, and UI test layers ready before writing features.
• Open-source maintainers who want CI and commit hooks included in a project scaffold.
• Developers exploring Next.js who want to see multiple styling approaches — Tailwind via Twin.macro and Chakra UI — in one example.

What can you do with Thank u, Next.js?

• Bootstrap a new Next.js app in one command using create-next-app with the --example flag pointing to this repository.
• Write tests before features using the pending-test workflow described in the README, which lets you add placeholder tests for hard-to-mock code like Firebase auth and clean them up later.
• Build and document UI components in Storybook using the same Tailwind/Emotion styling stack.
• Deploy directly to Vercel using the Deploy with Vercel button in the README, which imports this repo as a template.

How does Thank u, Next.js work?

To use the template, run npx create-next-app --example https://github.com/narze/thank-u-nextjs my-app or the Yarn equivalent. After scaffolding, Husky runs linting and formatting on commit and push, and GitHub Actions executes the test suite on every push. Two public projects built with this template — typeland and toSkoy — are listed in the README as references.

FAQ

Is Thank u, Next.js free?

Yes, the boilerplate is open source and available on GitHub at narze/thank-u-nextjs. You can use it as a starting point for personal or commercial projects without cost.

What styling options does it include?

It includes Tailwind CSS loaded through Emotion and Twin.macro, plus Chakra UI. Twin.macro lets Tailwind classes be used as Babel macros, so no PurgeCSS is needed.

Does it include testing tools?

The template sets up Jest, ts-jest, and React Testing Library for unit tests, Cypress with Cypress Testing Library for end-to-end tests, and Storybook for UI testing. All three layers are described in the development workflow.

How do I deploy a project made with this template?

Use the Deploy with Vercel button in the README, which imports the GitHub repository as a template into Vercel. Alternatively, deploy it like any other Next.js app.