Nextjs Boilerplate

screenshot of Nextjs Boilerplate
nextjs
react
tailwind

Nextjs Boilerplate

🚀 Next.js 15+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plop.

Overview:

The Boilerplate and Starter for Next JS 13+, Tailwind CSS 3, and TypeScript is a developer-friendly template designed to provide a smooth and efficient starting point for Next.js projects. It incorporates essential tools and features to enhance the development experience, including Next.js for static site generation, TypeScript for type checking, Tailwind CSS for styling, and various other libraries and frameworks for code quality, testing, and productivity.

Features:

  • Developer experience first: Prioritizes a seamless and efficient development experience.
  • Next.js for Static Site Generator: Utilizes Next.js for efficient static site generation.
  • Type checking with TypeScript: Ensures type safety and reduces bugs during development.
  • Integration with Tailwind CSS: Integrates Tailwind CSS for easy and flexible styling.
  • Storybook for components documentation: Utilizes Storybook for comprehensive and interactive documentation of components.
  • Strict Mode for TypeScript and React 18: Enforces strict mode for improved code quality.
  • Linter with ESLint: Includes ESLint for detecting and fixing code issues and enforcing code quality standards.
  • Code Formatter with Prettier: Incorporates Prettier for consistent code formatting.
  • Husky for Git Hooks: Utilizes Husky for running pre-commit and pre-push hooks.
  • Lint-staged for running linters on Git staged files: Configures lint-staged to run linters on Git staged files for better code quality control.
  • Testing with Jest and react-testing-library: Provides testing capabilities with Jest and react-testing-library.
  • Absolute Imports using @ prefix: Enables convenient absolute imports using the @ prefix.
  • Next.js custom layouts: Supports custom layouts for Next.js applications.
  • T3 env: Provides easy management of environment variables.
  • Message convention for git: Establishes a message convention for better git commit history.
  • Maximize lighthouse score: Optimizes the application to achieve a high Lighthouse score.
nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.