🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.
Developer experience first:
-
🔥 Next.js for Static Site Generator
-
🎨 Integrate with Tailwind CSS
-
🎉 Type checking TypeScript
-
✅ Strict Mode for TypeScript and React 18
-
✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
-
💡 Absolute Imports
-
🛠 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
Run the following command on your local environment:
git clone [email protected]:gabrieldemian/evil-nextjs-boilerplate.git my-project-name
cd my-project-name
npm install
Then, you can run locally in development mode with live reload:
npm run dev
Open http://localhost:3000 with your favorite browser to see your project.
.
├── README.md # README file
├── next.config.js # Next JS configuration
├── public # Public folder
│ └── assets
│ └── images # Image used by default template
├── src
│ ├── components # Components folder
│ ├── layout # Atomic layout components
│ ├── pages # Next JS pages
│ ├── styles # PostCSS style folder with Tailwind
│ ├── templates # Default template
│ └── utils # Utility folder
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
You can see the results locally in production mode with:
$ yarn build
$ yarn start
The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.
You can create an optimized production build with:
npm run build-prod
Now, it is ready to be deployed. All generated files are located at out folder, which you can deploy with any hosting service.