|
|
|
|
|
# Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript [](https://twitter.com/ixartz)
|
|
|
|
|
|
|
|
|
|
|
|
<p align="center">
|
|
|
|
|
|
<a href="https://creativedesignsguru.com/demo/Nextjs-Boilerplate/"><img src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Next js starter banner"></a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
🚀 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.
|
|
|
|
|
|
|
|
|
|
|
|
Clone this project and use it to create your own [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/).
|
|
|
|
|
|
|
|
|
|
|
|
### Features
|
|
|
|
|
|
|
|
|
|
|
|
Developer experience first:
|
|
|
|
|
|
|
|
|
|
|
|
- 🔥 [Next.js](https://nextjs.org) for Static Site Generator
|
|
|
|
|
|
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)
|
|
|
|
|
|
- 💅 PostCSS for processing Tailwind CSS and integrated to `styled-jsx`
|
|
|
|
|
|
- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
|
|
|
|
|
|
- ✅ Strict Mode for TypeScript and React 17
|
|
|
|
|
|
- ✏️ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
|
|
|
|
|
|
- 💡 Absolute Imports
|
|
|
|
|
|
- 🛠 Code Formatter with [Prettier](https://prettier.io)
|
|
|
|
|
|
- 🦊 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](https://www.npmjs.com/package/@next/bundle-analyzer)
|
|
|
|
|
|
- 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
|
|
|
|
|
|
- 🌈 Include a FREE minimalist theme
|
|
|
|
|
|
- 💯 Maximize lighthouse score
|
|
|
|
|
|
|
|
|
|
|
|
Built-in feature from Next.js:
|
|
|
|
|
|
|
|
|
|
|
|
- ☕ Minify HTML & CSS
|
|
|
|
|
|
- 💨 Live reload
|
|
|
|
|
|
- ✅ Cache busting
|
|
|
|
|
|
|
|
|
|
|
|
### Philosophy
|
|
|
|
|
|
|
|
|
|
|
|
- Minimal code
|
|
|
|
|
|
- SEO-friendly
|
|
|
|
|
|
- 🚀 Production-ready
|
|
|
|
|
|
|
|
|
|
|
|
### Nextless.js SaaS Boilerplate
|
|
|
|
|
|
|
|
|
|
|
|
Build your SaaS product faster with [React SaaS Boilerplate](https://nextlessjs.com).
|
|
|
|
|
|
|
|
|
|
|
|
[](https://nextlessjs.com)
|
|
|
|
|
|
|
|
|
|
|
|
### Premium Themes
|
|
|
|
|
|
|
|
|
|
|
|
| [Green Nextjs Landing Page Template](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) | [Purple Saas Nextjs Theme](https://creativedesignsguru.com/landing-purple-modern-react-theme/) |
|
|
|
|
|
|
| --- | --- |
|
|
|
|
|
|
| [](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) | [](https://creativedesignsguru.com/landing-blue-modern-react-theme/) |
|
|
|
|
|
|
|
|
|
|
|
|
Find more [Nextjs Themes](https://creativedesignsguru.com/category/nextjs/).
|
|
|
|
|
|
|
|
|
|
|
|
### Requirements
|
|
|
|
|
|
|
|
|
|
|
|
- Node.js and npm
|
|
|
|
|
|
|
|
|
|
|
|
### Getting started
|
|
|
|
|
|
|
|
|
|
|
|
Run the following command on your local environment:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
git clone --depth=1 https://github.com/ixartz/Next-js-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
|
|
|
|
|
|
│ ├── 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
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Customization
|
|
|
|
|
|
|
|
|
|
|
|
You can easily configure Next js Boilerplate. Please change the following file:
|
|
|
|
|
|
|
|
|
|
|
|
- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your website favicon, you can generate from https://favicon.io/favicon-converter/
|
|
|
|
|
|
- `src/styles/global.css`: your CSS file using Tailwind CSS
|
|
|
|
|
|
- `src/utils/AppConfig.ts`: configuration file
|
|
|
|
|
|
- `src/templates/Main.tsx`: default theme
|
|
|
|
|
|
|
|
|
|
|
|
### Deploy to production
|
|
|
|
|
|
|
|
|
|
|
|
You can see the results locally in production mode with:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
$ npm run build
|
|
|
|
|
|
$ npm run start
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).
|
|
|
|
|
|
|
|
|
|
|
|
You can create an optimized production build with:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
npm 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.
|
|
|
|
|
|
|
|
|
|
|
|
### Deploy to Netlify
|
|
|
|
|
|
|
|
|
|
|
|
Clone this repository on own GitHub account and deploy to Netlify:
|
|
|
|
|
|
|
|
|
|
|
|
[](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Next-js-Boilerplate)
|
|
|
|
|
|
|
|
|
|
|
|
### Deploy to Vercel
|
|
|
|
|
|
|
|
|
|
|
|
Deploy this Next JS Boilerplate on Vercel in one click:
|
|
|
|
|
|
|
|
|
|
|
|
[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fixartz%2FNext-js-Boilerplate)
|
|
|
|
|
|
|
|
|
|
|
|
### VSCode information (optional)
|
|
|
|
|
|
|
|
|
|
|
|
If you are VSCode users, you can have a better integration with VSCode by installing the suggested extension in `.vscode/extension.json`. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.
|
|
|
|
|
|
|
|
|
|
|
|
Pro tips: if you need a project wide type checking with TypeScript, you can run a build with <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> on Mac.
|
|
|
|
|
|
|
|
|
|
|
|
### Contributions
|
|
|
|
|
|
|
|
|
|
|
|
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
|
|
|
|
|
|
|
|
|
|
|
|
### License
|
|
|
|
|
|
|
|
|
|
|
|
Licensed under the MIT License, Copyright © 2020
|
|
|
|
|
|
|
|
|
|
|
|
See [LICENSE](LICENSE) for more information.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
Made with ♥ by [CreativeDesignsGuru](https://creativedesignsguru.com) [](https://twitter.com/ixartz)
|
|
|
|
|
|
|
|
|
|
|
|
[](https://www.buymeacoffee.com/ixartz)
|
