Skip to content

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

License

Notifications You must be signed in to change notification settings

jsdeveloperr/next13-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is a readme from next.js 13 boilerplate.

Next.js 13 Boilerplate

ts next react redux redux-saga tailwindcss

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