📦 Next.js 12 Boilerplate

This is a readme from next.js 12 boilerplate.

Boilerplate to help developers to have a fast project configuration using the most recent next version and some tools to improve the developer experience.

🚀 Example

Check our 👉 example

🗂 Features

• 🔥 Next.js for Static Site Generator
• 🎨 Integrate with Tailwind CSS
• 🎉 Type checking TypeScript
• ✅ Strict Mode for TypeScript and React 17
• ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
• 🛠 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
• 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
• ⚙️ Bundler Analyzer
• 🌈 Include a FREE minimalist theme
• 💯 Maximize lighthouse score
• 🔥 SWC instead of babel
• 🎉 PlopJS and Axios

.
├── README.md                # README file
├── next.config.js           # Next JS configuration
├── docs                     # documentation mdx
├── e2e                      # Cypress e2e
├── public                   # Public folder
│   └── assets
│       └── images           # Image used by default template
├──
│   ├── layout               # Atomic layout components
│   ├── models               # TypeScript models
│   ├── constants            # Constants
│   ├── pages                # Next JS pages
│   ├── styles               # PostCSS style folder with Tailwind
│   ├── i18n                 # Locale i18n
│   └── utils                # Utility folder
├── tailwind.config.js       # Tailwind CSS configuration
└── tsconfig.json            # TypeScript configuration

✅ Installation

• Clone you project to your machine

🚀 Install dependencies with yarn

yarn

🎉 Using Plop JS

yarn generate

After this, select if you want to create a page or component and set the name.

You can change the templates and settings of generator at path generators on project root.

---

Back To The Top