Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsdeveloperr/nextjs-boilerplate
Next js 12 boilerplate with Tailwind, SCSS, Jest, React Testing Library, Prettier, ESLint, Plop JS 🚀
https://github.com/jsdeveloperr/nextjs-boilerplate
nextjs nextjs-boilerplate nextjs-tailwind nextjs-typescript
Last synced: 8 days ago
JSON representation
Next js 12 boilerplate with Tailwind, SCSS, Jest, React Testing Library, Prettier, ESLint, Plop JS 🚀
- Host: GitHub
- URL: https://github.com/jsdeveloperr/nextjs-boilerplate
- Owner: jsdeveloperr
- License: mit
- Created: 2022-07-11T18:27:50.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-01T08:35:42.000Z (about 2 years ago)
- Last Synced: 2024-05-30T16:33:08.865Z (7 months ago)
- Topics: nextjs, nextjs-boilerplate, nextjs-tailwind, nextjs-typescript
- Language: TypeScript
- Homepage: https://nextjs-12-boilerplate.vercel.app
- Size: 1.87 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📦 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.
## :rocket: Example
Check our 👉 [example](https://nextjs-12-boilerplate.vercel.app)
### 🗂 Features
- 🔥 [Next.js](https://nextjs.org) for Static Site Generator
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)
- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
- ✅ Strict Mode for TypeScript and React 17
- ✏️ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
- 🛠 Code Formatter with [Prettier](https://prettier.io)
- 🦊 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](https://www.npmjs.com/package/@next/bundle-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
```html
yarn
```
#### 🎉 Using Plop JS
```html
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](#read-me-template)