π Boilerplate and Starter for Next.js, SASS, Prisma ORM, Next-Auth and TypeScript β‘οΈ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged.
Developer experience first:
- π₯ Next.js 12
- π¦ Integrate with next-auth
- π¦ Integrate with prisma
- π¨ Integrate with sass
- π 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
- π€ SEO metadata, JSON-LD and Open Graph tags with Next SEO
- βοΈ Bundler Analyzer
- π±οΈ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
- π― Maximize lighthouse score
- π€ i18n Locatization next-translate
- π¦ Integrate with cypress
Built-in feature from Next.js:
- β Minify HTML & CSS
- π¨ Live reload
- β Cache busting
- Minimal code
- SEO-friendly
- π Production-ready
- π Serverless-ready
- Node.js, yarn and npm
Run the following command on your local environment:
git clone --depth=1 https://github.com/bbg/nextjs-boilerplate.git my-project-name
cd my-project-name
yarn install
Then, you can run locally in development mode with live reload:
yarn run dev
Open http://localhost:3000 with your favorite browser to see your project.
βββ README.md # README file
βββ cypress # Cypress root folder
βββ docs # Project document folder
βββ public # Public folder
βββ locales # Localization Json files are kept in this folder
βββ src
β βββ components # All Components
β βββ hooks # React hooks
β βββ pages # Next JS pages
β βββ scss # SCSS styles folder
β βββ functions # All functions are collected here.
| βββ types # Global types folder.
βββ db.prisma # Prisma database schema
βββ tsconfig.json # TypeScript configuration
βββ i18n.json # Next-Translation configuration
βββ cypress.json # Cypress configuration
βββ next.config.js # Next JS configuration
βββ netlify.toml # Netlify publish configuration
You can see the results locally in production mode with:
$ yarn run build
$ yarn run start
The generated HTML and CSS files are minified (built-in feature from Next js).
You can create an optimized production build with:
yarn run build:prod
Now, your blog is ready to be deployed. All generated files are located at out
folder, which you can deploy with any hosting service.
βββ dev # NextJS Development Run
βββ build # NextJS Build
βββ build:stats # NextJS Bundle Analyze
βββ build:types # Types check and build
βββ start # NextJS Production Start
βββ export # NextJS Static Export
βββ clean # .next and out file cleaner
βββ lint # Eslint Check
βββ lint:fix # Eslint Check and Fix
βββ forrmat # Prettier Run
βββ prepare # Huksy Install
βββ cy:open # Cypress Browser E2E Testing Run
βββ cy:run # Cypress Headlesss E2E Testing Run
βββ prisma:gen # Prisma Generator
βββ prisma:push # Prisma DB Schema Push
βββ prisma:studio # Prisma Studio DB Client Open
Clone this repository on own GitHub account and deploy to Netlify:
Deploy this Next JS Boilerplate on Vercel in one click:
Preview the example live on StackBlitz:
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
Licensed under the MIT License, Copyright Β© 2020
See LICENSE for more information.