Nextjs Boilerplate

Overview

This Next.js project is a boilerplate and starter pack that focuses on developer experience. It includes features such as Next.js with App Router support, Tailwind CSS integration, TypeScript type checking, linting with ESLint and Prettier, unit testing with Jest and React Testing Library, integration and E2E testing with Playwright, and automatic changelog generation with Semantic Release.

Features

• Developer experience first: This project prioritizes developer experience with features like Next.js with App Router support and strict mode for TypeScript and React 18.
• Type checking with TypeScript: TypeScript is integrated into the project for static type checking, which helps catch errors during development.
• Integrate with Tailwind CSS and Shadcn/ui: The project includes integration with Tailwind CSS and the Shadcn/ui library for easy and customizable styling.
• Strict Mode for TypeScript and React 18: The project utilizes strict mode for increased performance and better error detection in TypeScript and React 18.
• Type-safe environment variables with T3 Env: T3 Env is used to manage environment variables in a type-safe manner, reducing the potential for errors.
• Validation library with Zod: Zod is used as a validation library to ensure data integrity and improve error handling.
• Linter with ESLint: ESLint is set up to enforce code quality and consistency, including Next.js, Next.js Core Web Vitals, and Tailwind CSS specific linting rules.
• Code Formatter with Prettier: Prettier is used as a code formatter to automatically format code and keep it consistent across the project.
• Husky for Git Hooks: Husky is used to set up Git hooks that run linting and other checks before allowing commits.
• Lint-staged: Lint-staged is used to run linters on Git staged files, ensuring that only formatted and linted code is committed.
• Lint git commit with Commitlint: Commitlint is used to enforce a standardized commit message format, making it easier to understand changes.
• Unit Testing with Jest and React Testing Library: Jest and React Testing Library are integrated into the project for unit testing components and functions.
• Integration and E2E Testing with Playwright: Playwright is used for integration and E2E testing, allowing for automated testing of the application.
• Run tests on pull requests with Github Actions: Github Actions is set up to run tests automatically on pull requests, ensuring code quality before merging.
• Automatic changelog generation with Semantic Release: Semantic Release is used to automatically generate a changelog based on the types of commits made, creating a comprehensive history of changes.
• Absolute Imports using @ prefix: Absolute imports are supported in the project, allowing for cleaner and more organized import statements.
• Visual testing with Percy (optional): Percy is integrated for visual testing of components. This feature is optional and can be disabled if not needed.
• Bundle Analyzer: The project includes a bundle analyzer, which helps identify dependencies and optimize the bundle size.

Summary

This Next.js boilerplate and starter pack prioritizes developer experience by providing a comprehensive set of features and tools. It includes support for Next.js with App Router, TypeScript type checking, Tailwind CSS integration, linting, code formatting, Git hooks, unit testing, integration and E2E testing, automatic changelog generation, and more. The installation process is straightforward, allowing users to quickly set up and start developing their Next.js projects. Overall, this boilerplate aims to improve productivity and code quality, making it an excellent choice for developers.