Overview

The Boilerplate and Starter for Next JS 13+, Tailwind CSS 3.3 and TypeScript is a developer-friendly template that provides a solid foundation for building Next.js projects. It focuses on providing a great developer experience by integrating various tools and features to enhance productivity. With its customizable nature, developers have the freedom to make adjustments to fit their needs and preferences. The template also includes built-in features from Next.js, such as static generation and live reload, to ensure production-ready websites.

Features

• ⚡ Next.js for Static Site Generator
• 🔥 Type checking TypeScript
• 💎 Integrate with Tailwind CSS
• ✅ Strict Mode for TypeScript and React 18
• 📏 Linter with ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 📓 Write standard compliant commit messages with Commitizen
• 🦺 Unit Testing with Jest and React Testing Library
• 🧪 E2E Testing with Cypress
• 👷 Run tests on pull request with GitHub Actions
• 🎉 Storybook for UI development
• 🎁 Automatic changelog generation with Semantic Release
• 🔍 Visual testing with Percy (Optional)
• 💡 Absolute Imports using @ prefix
• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest
• 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
• 🗺️ Sitemap.xml and robots.txt with next-sitemap
• ⚙️ Bundler Analyzer
• 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
• 🌈 Include a FREE minimalist theme
• 💯 Maximize lighthouse score
• ☕ Minify HTML & CSS (built-in feature from Next.js)
• 💨 Live reload (built-in feature from Next.js)
• ✅ Cache busting (built-in feature from Next.js)

Installation

To get started with the Boilerplate and Starter for Next JS project, follow the steps below:

1. Make sure you have Node.js 16+ and npm installed on your local environment.
2. Clone the project repository.
3. Run the following command to install dependencies:

npm install

4. After the installation is complete, you can run the project locally in development mode with live reload by running:

npm run dev

5. Open http://localhost:3000 in your favorite browser to see the project.

Summary

The Boilerplate and Starter for Next JS is a developer-friendly template that provides a solid foundation for building Next.js projects. It includes a wide range of features and tools to enhance developer productivity and streamline the development process. With its customizable nature and built-in features from Next.js, the template is production-ready and SEO-friendly. By following the installation guide, developers can easily set up the project and start building their own Next.js applications.