jsdeveloperr / next13-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.

📦 Next.js 13 Boilerplate

This is a readme from next.js 13 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
• 🎉 redux, redux-saga and next-redux-wrapper
• 🌈 react-lazy-loader-component and html-react-parser
• 🎉 next-useragent and classnames
• 🦊 react-hook-form and yup
• 🎨 PlopJS and Axios
• 🎉 Env and Docker

.
├── README.md                # README file
├── next.config.js           # Next JS configuration
├── components               # Components folder
├── @types                   # TypeScript models
├── public                   # Public folder
│   └── assets
│       └── images           # Image used by default template
├──
│   ├── features             # Features folder
│   ├── routers              # Routers folder
│   ├── generators           # Generators folder
│   ├── pages                # Next JS pages
│   ├── styles               # PostCSS style folder with Tailwind
│   ├── store                # Store file redux and redux-saga
│   └── libs                 # Libs folder
├── tailwind.config.js       # Tailwind CSS configuration
└── tsconfig.json            # TypeScript configuration

👨‍💻 Getting Started

Prerequisites

nvm

brew install nvm

Node.js v18

nvm install v18.12.0

Pnpm

npm install -g pnpm

Docker

Docker Desktop Download

✅ Installation

Requires Node >=14.x

Install NPM packages:

pnpm install

🗂 Development

To start the application in the development mode run:

pnpm dev

🗂 Build

To build the application for production, run:

pnpm build

🗂 Lint

To lint the application run:

pnpm lint

🗂 Docker

To docker the application build:

pnpm docker:prod:build

To docker the application start:

pnpm docker:prod:start

To docker the application stop:

pnpm docker:prod:stop

🎉 Using Plop JS

pnpm 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.

📄 License

🍁 MIT Licensed | Copyright © 2022-present Abdulnasır Olcan and @Next13Boilerplate contributors

---

Back To The Top