nextjs-boilerplate Tailwind Templates

Nextjs Boilerplate

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

šŸ“¦ Next.js 12 Boilerplate

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.

:rocket: 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

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes