{"id":15714507,"url":"https://github.com/marcossic/next-template","last_synced_at":"2026-04-07T07:43:59.610Z","repository":{"id":252470909,"uuid":"840461163","full_name":"MarcossIC/next-template","owner":"MarcossIC","description":"⚑ Professional Next.js boilerplate supercharged with TypeScript, TailwindCSS, Testing (Vitest + Testing Library), Storybook, Husky, and more. Built with best practices and modern tools for rapid development without compromising code quality.","archived":false,"fork":false,"pushed_at":"2025-01-20T18:32:21.000Z","size":506,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T19:47:00.757Z","etag":null,"topics":["biome","boilerplate","commitlint","coverage","cypress","frontend-template","github-actions","husky","nextjs","nyc","react","starter-kit","storybook","tailwind","vitest","zod"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarcossIC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-09T18:59:48.000Z","updated_at":"2025-01-20T18:32:24.000Z","dependencies_parsed_at":"2024-10-24T11:59:08.648Z","dependency_job_id":"a6bc7813-c196-4489-b027-4c483eb7c955","html_url":"https://github.com/MarcossIC/next-template","commit_stats":null,"previous_names":["marcossic/next-base"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/MarcossIC/next-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcossIC%2Fnext-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcossIC%2Fnext-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcossIC%2Fnext-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcossIC%2Fnext-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarcossIC","download_url":"https://codeload.github.com/MarcossIC/next-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcossIC%2Fnext-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262518102,"owners_count":23323301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["biome","boilerplate","commitlint","coverage","cypress","frontend-template","github-actions","husky","nextjs","nyc","react","starter-kit","storybook","tailwind","vitest","zod"],"created_at":"2024-10-03T21:37:45.664Z","updated_at":"2025-12-30T20:06:44.465Z","avatar_url":"https://github.com/MarcossIC.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚑Next professional boilerplate \u003c/br\u003e [![GitHub Actions Workflow Status][status-workflow-badge]][status-workflow-badge-link] ![GitHub commit activity (branch)][commit-activity-badge] ![GitHub Created At][created-at-badge] [![MarcossIC][made-by-badge]][made-by-badge-link]\n\nWelcome to nextjs professional boilerplate, an open source template for nextjs. It is prepared with functionalities that will help you make quality code, and will facilitate the maintainability of the code. You can find versions with different functionalities among the branches. I hope you like it\n\n## ✨ Features\n\nYou can find these things in the template:\n\n\u003cul\u003e\n\n\u003cli\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://nextjs.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/nextdotjs/01000f\" alt=\"Nextjs\" width=17 height=17\u003e \u003cb\u003eNext.js\u003c/b\u003e\n \u003c/a\u003e - Pre-configured, with default src and app router + Bundler analyzer\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://tailwindcss.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/tailwindcss/06B6D4\" alt=\"Tailwind css\" width=17 height=17\u003e \u003cb\u003eTailwindCSS\u003c/b\u003e\n \u003c/a\u003e - By default, CSS Framework for rapid UI development\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://cva.style/docs\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \n\u003cimg src=\"./.github/assets/cva.svg\" alt=\"CVA\" width=17 height=17\u003e \u003cb\u003eCVA\u003c/b\u003e\n \u003c/a\u003e - To easily manage component variants\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n \u003ca style=\"text-decoration: none;\" href=\"https://biomejs.dev/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/biome/60A5FA\" alt=\"biome\" width=17 height=17\u003e \u003cb\u003eBiome\u003c/b\u003e\n \u003c/a\u003e - To find and fix linting, formatting, and import order problems\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://www.typescriptlang.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/typescript/3178C6\" alt=\"Typescript\" width=17 height=17\u003e \u003cb\u003eTypescript\u003c/b\u003e\n \u003c/a\u003e - By default, configured with strict types and with ts-reset for types safety\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://vitest.dev/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/vitess/F16728\" alt=\"vitess\" width=17 height=17\u003e \u003cb\u003eVitest\u003c/b\u003e\n \u003c/a\u003e and \u003ca style=\"text-decoration: none;\" href=\"https://testing-library.com/react\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/testinglibrary/E33332\" alt=\"Testing Library\" width=17 height=17\u003e \u003cb\u003eTesting Library\u003c/b\u003e\n \u003c/a\u003e - For unit tests and integration tests\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://storybook.js.org/docs\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/storybook/FF4785\" alt=\"Storybook\" width=17 height=17\u003e \u003cb\u003eStorybook\u003c/b\u003e\n \u003c/a\u003e - To create tests and use cases for your components \n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://github.com/typicode/husky#readme\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/precommit/FAB040\" alt=\"Pre commit\" width=17 height=17\u003e \u003cb\u003eHusky\u003c/b\u003e\n \u003c/a\u003e - Configured to raise, git hooks for the pre commit, pre push and commit message\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://commitlint.js.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/commitlint/000000\" alt=\"Commitlint\" width=17 height=17\u003e \u003cb\u003eCommitlint\u003c/b\u003e\n \u003c/a\u003e with \u003ca style=\"text-decoration: none;\" href=\"https://www.conventionalcommits.org/en/v1.0.0/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/conventionalcommits/FE5196\" alt=\"Pre commit\" width=17 height=17\u003e \u003cb\u003eConventional commit\u003c/b\u003e\u003c/a\u003e - To maintain a clean and solid commit history\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://github.com/features/actions\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/githubactions/2088FF\" alt=\"Github Action\" width=17 height=17\u003e \u003cb\u003eGithub Actions\u003c/b\u003e\n \u003c/a\u003e - Pre-configured actions for smooth workflows\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://zod.dev/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/zod/3E67B1\" alt=\"Zod\" width=17 height=17\u003e \u003cb\u003eZod\u003c/b\u003e\n \u003c/a\u003e - For type validation\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://zustand.docs.pmnd.rs/getting-started/introduction\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"./.github/assets/zustand.png\" alt=\"Zustand\" width=17 height=17\u003e \u003cb\u003eZustand\u003c/b\u003e\n \u003c/a\u003e - To handle global states simply and cleanly\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://env.t3.gg\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/dotenv/ECD53F\" alt=\"Zustand\" width=17 height=17\u003e \u003cb\u003eT3 Env\u003c/b\u003e\n \u003c/a\u003e - Manage your environment variables\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://www.cypress.io/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"https://cdn.simpleicons.org/cypress/69D3A7\" alt=\"Cypress\" width=17 height=17\u003e \u003cb\u003eCypress\u003c/b\u003e\n \u003c/a\u003e - For End-to-End (E2E) testing\n\u003c/li\u003e\n\n\u003cli style=\"padding-top: 4px;\"\u003e\n\u003ca style=\"text-decoration: none;\" href=\"https://istanbul.js.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e \u003cimg src=\"./.github/assets/instalbul.png\" alt=\"NYC\" width=17 height=17\u003e \u003cb\u003eNYC\u003c/b\u003e\n \u003c/a\u003e - For code coverage reports and management\n\u003c/li\u003e\n\u003c/ul\u003e\n\n## 🎯 Getting Started\n\nTo start using this template, follow the following steps:\n\n1. Fork \u0026 clone repository:\n\n```bash\ngit clone https://github.com/\u003cyour_username\u003e/\u003crepo_name\u003e.git\n```\n\n2. Install the dependencies:\n In this case you can use the package manager you want. I personally recommend `pnpm`\n\n```bash\npnpm install\n```\n\n3. Run the development server:\n\n```bash\npnpm dev\n```\n\n4. Open `http://localhost:3000` with your browser to see the result.\n\n5. The project uses husky and patch-package to automate git hooks and validate dependencies. This is executed, with the \"postinstall\" every time you do install:\n\n```bash\nnpx patch-package \u0026\u0026 node setup-husky.js\n```\n\nIf you do not want to run husky on every installation, remove this `\u0026\u0026 node setup-husky.js` from the `postinstall` in the `package.json`\n\n## πŸ“ Scripts Overview\n\nThe template has the following scripts available in the `package.json`:\n\n- `dev`: Starts the development server with Turbopack, ensuring colored output.\n- `build`: Builds the application for production.\n- `analyze`: Analyzes the bundle sizes for Client, Server, and Edge environments.\n- `start`: Starts the production server.\n- `lint`: Checks for linting, formatting, and import sorting issues using Biome.\n- `lint:fix`: Automatically fixes linting issues with Biome (may include unsafe changes).\n- `types:check`: Verifies TypeScript types without emitting files.\n- `clean`: Removes all generated files from `.next`, `out`, `coverage`, `.swc`, and `.nyc_output`.\n- `commitlint:last`: Verifies if the last commit follows the commitlint rules.\n- `format`: Checks if the code follows the correct format using Biome.\n- `format:fix`: Automatically fixes formatting issues and organizes imports using Biome.\n- `prepare`: Runs the Husky setup script.\n- `unit:run`: Executes unit tests using Vitest.\n- `unit:watch`: Runs unit tests in watch mode.\n- `unit:coverage`: Runs unit tests and generates a coverage report.\n- `cy:open`: Opens the Cypress interface for running end-to-end tests.\n- `cy:run`: Runs Cypress end-to-end tests in headless mode.\n- `cy:serve:ci`: Starts the development server and runs Cypress tests in CI mode.\n- `cy:serve:app`: Starts the development server and opens Cypress in interactive mode.\n- `cover:unit`: Generates a coverage report for unit tests using `nyc`.\n- `cover:e2e`: Combines end-to-end test coverage with `nyc` and prevents overwriting previous coverage data.\n- `cover:report`: Generates a combined coverage report for all tests.\n- `cover`: Cleans previous coverage data, runs unit and e2e tests, and generates a full coverage report.\n- `test:storybook`: Runs acceptance tests for Storybook.\n- `storybook`: Starts the Storybook development server on port 6006.\n- `storybook:serve`: Serves the pre-built Storybook at port 6006.\n- `build:storybook`: Builds the Storybook for deployment.\n- `postinstall`: Applies patches to external dependencies and runs the `prepare` script.\n\n## :file_folder: Project structure\n\n```shell\n/\nβ”œβ”€β”€ __test__/ # In this folder all the tests\nβ”‚ β”œβ”€β”€ app/ # The structure is a mirror of src\nβ”‚ β”œβ”€β”€ components/\nβ”‚ β”œβ”€β”€ lib/\nβ”‚ β”œβ”€β”€ styles/\nβ”‚ └── types/\nβ”œβ”€β”€ .vscode/ # VSCode config folder\nβ”œβ”€β”€ .github/ # GitHub folder\nβ”œβ”€β”€ .husky/ # Husky Hooks\nβ”œβ”€β”€ .storybook/ # Storybook folder\nβ”œβ”€β”€ public/ # Public assets folder\nβ”œβ”€β”€ src/\nβ”‚ β”œβ”€β”€ app/ # Next JS App (App Router)\nβ”‚ β”œβ”€β”€ components/ # React components\nβ”‚ β”œβ”€β”€ lib/ # 3rd party libraries configuration\nβ”‚ β”œβ”€β”€ styles/ # Styles folder\nβ”‚ └── models/ # Types, Enums, Models, schemas\nβ”œβ”€β”€ .editorconfig # Editor config\nβ”œβ”€β”€ .nycrc.json # NYC configuration for code coverage\nβ”œβ”€β”€ biome.json # Patterns eslint should ignore\nβ”œβ”€β”€ cypress.config.ts # Cypress configuration\nβ”œβ”€β”€ lint-staged.config.mjs # Lintstaged config\nβ”œβ”€β”€ commitlint.config.cjs # Commit lint config and commit examples\nβ”œβ”€β”€ coverage.mjs # Script to generate combined code coverage\nβ”œβ”€β”€ env.ts # Environment variables config by t3-env\nβ”œβ”€β”€ next.config.ts # Next config file\nβ”œβ”€β”€ postcss.config.cjs # Postcss config file\nβ”œβ”€β”€ README.md # README file\nβ”œβ”€β”€ report-bundle-size.js # Script to analyze bundle size\nβ”œβ”€β”€ setup-husky.js # Script to raise husky on start githooks\nβ”œβ”€β”€ tailwind.config.mjs # Tailwind CSS configuration\nβ”œβ”€β”€ vitest.config.ts # Vitest config\nβ”œβ”€β”€ vitest-setup.ts # Vitest testing library setup\n└── tsconfig.json # TypeScript configuration\n```\n\n## :spades: Package manager\n\nThe template does not force you to use a specific package manager so you can choose the one you want. This is why no lock file was uploaded.\n\nHowever, if you are sure of the package manager you are going to use for the project. You can upload the lock file. And change the `npx` commands to the one you are using.\n\n### :heavy_exclamation_mark: Considerations\n\nIn case you choose to use `yarn` as a package manager you should add some things:\n\n- Add this dependency:\n\n```bash\nyarn add postinstall-postinstall --save-dev\n```\n\n- Update post install:\n You need to find the postinstall script and add the `-y` flag to it\n\n```json\n\"postinstall\": \"npx patch-package -y \u0026\u0026 node setup-husky.js\"\n```\n\nIf you have already decided on the package manager you use, you can consider adding this line to the end of your `package.json`:\n\n```json\n\"packageManager\": \"\u003cmanager\u003e@\u003cversion\u003e\"\n```\n\nExample:\n\nYou only need one, but I leave you examples for these 3 handlers:\n\n```json\n\"packageManager\": \"pnpm@9.7.0\"\n\"packageManager\": \"yarn@1.22.22\"\n\"packageManager\": \"npm@10.8.2\"\n```\n\n## :shipit: Testing\n\nWe use **Vitest** for unit and integration tests, taking advantage of its fast performance and modern testing capabilities. For end-to-end (e2e) testing, **Cypress** is utilized, offering a reliable and robust browser testing framework. Additionally, we generate coverage reports using **nyc**, including a combined report for both unit and e2e tests.\n\n### Running Tests\n\nBelow are some examples of how to execute tests and generate coverage reports using `pnpm`:\n\n- **Unit and Integration Tests**: Execute tests with Vitest using `pnpm unit:run` or run them in watch mode with `pnpm unit:watch`.\n- **Unit Test Coverage**: Generate a coverage report for unit tests with `pnpm unit:coverage`.\n- **End-to-End (e2e) Tests**:\n - Open the Cypress interface with `pnpm cy:open`.\n - Run Cypress tests in headless mode with `pnpm cy:run`.\n - Start the app and run e2e tests in CI mode with `pnpm cy:serve:ci`.\n- **Combined Coverage Report**:\n - Generate a full coverage report (unit + e2e) by running `pnpm cover`. This cleans old reports, runs all tests, and generates a combined report.\n - Use `pnpm cover:report` to manually generate the combined report if coverage files already exist.\n- **Storybook Tests**: Run acceptance tests for Storybook with `pnpm test:storybook`.\n\n### Viewing Coverage Reports\n\nThe combined coverage report will be generated in the `coverage` folder. Open the `index.html` file inside the folder to view a detailed breakdown of test coverage for both unit and e2e tests.\n\nThis setup ensures comprehensive test coverage and streamlined testing workflows for both unit and end-to-end scenarios.\n\n### StoryBook\n\nStorybook is a development tool that allows you to build and document user interface (UI) components in isolation. It is a kind of **sandbox** where you can develop and view your components independently of the rest of the application. This makes it easier to design, test, and document reusable components, allowing development and design teams to work more efficiently and collaboratively.\n\nStorybook is not only useful for building and visualizing components, but also offers tools for automated testing, improving code quality and reliability. You can write your acceptance tests using storybook's [play][storybook-play-link] function.\nTo run the storybook tests you may need to have [playwright installed][playwright-install-link] with (Example with pnpm):\n\n```sh\npnpm exec playwright install --with-deps\n```\n\nReady to run the Storybook tests, you must first have Storybook executed `pnpm storybook` and in another terminal execute `pnpm test:storybook`\n\n## 🎨 Styling\n\nFor styles, added Tailwind CSS, a CSS framework for quick styling. In case you need to use your own CSS, it is recommended to use [CSS Modules][css-module-link].\n\n### CVA\n\nThe template comes by default with [cva][cva-docs-link], [clsx][clsx-docs-link] and [tw-merge][tw-merge-docs-link]. These utilities serve to facilitate the creation of variants for your components, this will help you maintain a design system easily. Then CVA will simplify the process of creating variants for your design systems, without compromising CSS control.\n\n## :milky_way: State Management\n\nThe template comes by default with [Zustand][zustand-docs-link], a great state manager that is quite simple, but very powerful. This great state manager is the option I recommend but if you don't like it you can use whatever you want.\n\n### Other options\n\nIn case Zustand is not your grade, it leaves you with other good options:\n\n- [**Jotai**][jotai-docs-link]: This global state management library developed for React, and is from the same creators of Zustand. It has an **atomic approach** based on the concept of atoms and offers a simple and granular API to manage its state, while still being highly optimized to reduce package size.\n\n- [**Recoil**][recoil-docs-link]: Is a state management library developed by Meta, designed specifically for React applications. It allows you to create a data flow that **flows** from atoms (shared state) through selectors (pure functions) and towards your React components. Its key benefit is the ability to update components only when the state they are subscribed to changes, reducing unnecessary replays and keeping your application fast and efficient.\n\n## :pencil: Environment Variables\n\n[T3 Env][t3-env-docs-link] is a library that **facilitates** the **validation** and **transformation** of environment variables at compile time, as well as checking their types. This tool ensures that your application uses the correct environment variables and that their values ​​match the expected types, eliminating the risk of runtime errors due to incorrect use of these variables.\n\nThe configuration is managed in the `env.js` file. You just need to define the variables for the client and server, and then import `env` into any file in your project to use them.\n\nIf you have an error with the variables you will see a message similar to this in the console specifying the error:\n\n```sh\n ❌ Invalid environment variables: { VARIABLE: [ 'Error message' ] }\n```\n\n## :fishsticks: Husky Git Hooks\n\nHusky makes it easy to configure and manage these git hooks directly from your project, without having to do it manually in the file system. This will allow you to automate certain tasks, which normally can be easily forgotten.\n\nIn this case there is a script that automatically raises 3 hooks for you:\n\n### pre-commit\n\nThe pre-commit hook runs just before committing, allowing you to run a script to verify or modify the code. In this case, the hook executes the command\n\n```sh\nnpx lint-staged\n```\n\n#### Lint staged\n\n[**Lint staged**][lintstaged-docs-link] is a tool that allows you to run linters or other code quality tasks only on files that are about to be committed. This makes the validation process more efficient, by only validating in each commit the files that were modified (Assuming that the previous files have already passed the linting process). For NextJS, you can change the lint staged configuration in the `.lintstagedrc.cjs` file. In this case lint staged executes these two commands:\n\n```sh\nprettier --write --file \"stagedFiles...\"\n```\n\nThen\n\n```sh\nnext lint --fix --file \"stagedFiles...\"\n```\n\n### commit-msg\n\nThe commit-msg hook is executed before making a commit, but after validating the pre-commit, it allows you to validate the code message to maintain a convention in your project. The hook is running:\n\n```sh\nnpx commitlint --edit\n```\n\n#### Commit lint\n\n[**Comitlint**][commitlint-docs-link] is a tool used to ensure that commit messages follow a predefined format, such as semantic commits. This is useful for improving the readability and structure of messages, making it easier to maintain and understand project history.\n\n### pre-push\n\nThe pre-push hook is executed just before executing the push and allows you to validate the complete code before sending it to the remote repository and even cancel the push if necessary. The hook is running:\n\n```sh\nnpx tsc \u0026\u0026 npx jest --detectOpenHandles --passWithNoTests\n```\n\nIn this case, only the tests are validated before pushing\n\n\u003c!-- Badges --\u003e\n\n[commit-activity-badge]: https://img.shields.io/github/commit-activity/m/MarcossIC/next-template/main?logo=github\n[created-at-badge]: https://img.shields.io/github/created-at/MarcossIC/next-template?logo=github\n[made-by-badge]: https://img.shields.io/badge/made_by-MarcossIC-blue?color=4017d1\u0026link=https://marcosic.netlify.app\u0026logo=readdotcv\n[status-workflow-badge]: https://img.shields.io/github/actions/workflow/status/MarcossIC/next-template/ci.yml?label=Status\n\n\u003c!-- Links --\u003e\n\n[status-workflow-badge-link]: https://github.com/MarcossIC/next-template/actions/workflows/next_analysis.yml\n[made-by-badge-link]: https://marcosic.netlify.app\n[storybook-play-link]: https://storybook.js.org/docs/writing-stories/play-function#writing-stories-with-the-play-function\n[css-module-link]: https://nextjs.org/docs/pages/building-your-application/styling/css-modules\n[cva-docs-link]: https://cva.style/docs\n[clsx-docs-link]: https://github.com/lukeed/clsx#readme\n[tw-merge-docs-link]: https://github.com/dcastil/tailwind-merge\n[zustand-docs-link]: https://zustand.docs.pmnd.rs/getting-started/introduction\n[jotai-docs-link]: https://github.com/pmndrs/jotai\n[recoil-docs-link]: https://recoiljs.org/docs/introduction/installation\n[t3-env-docs-link]: https://env.t3.gg/\n[commitlint-docs-link]: https://commitlint.js.org/\n[lintstaged-docs-link]: https://github.com/lint-staged/lint-staged\n[playwright-install-link]: https://playwright.dev/docs/intro\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcossic%2Fnext-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcossic%2Fnext-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcossic%2Fnext-template/lists"}