Skip to content

Next js 12 boilerplate with Tailwind, SCSS, Jest, React Testing Library, Prettier, ESLint, Plop JS πŸš€

License

Notifications You must be signed in to change notification settings

DmytroHryshyn/nextjs-boilerplate

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

This is a readme from next.js 12 boilerplate.

Next.js 12 Boilerplate

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.


Next.js 12 Boilerplate Lighthouse Score

Back To The Top

About

Next js 12 boilerplate with Tailwind, SCSS, Jest, React Testing Library, Prettier, ESLint, Plop JS πŸš€

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 44.7%
  • JavaScript 29.4%
  • SCSS 15.2%
  • Handlebars 9.3%
  • Shell 1.4%