- Node.js 14+ and npm
Run the following command on your local environment:
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
- Minimal code
- SEO-friendly
- 🚀 Production-ready
Built-in feature from Next.js:
- ☕ Minify HTML & CSS
- 💨 Live reload
- ✅ Cache busting
Developer experience first:
- 🔥 Next.js for Static Site Generator
- 🎨 Integrate with Tailwind CSS
- 💅 PostCSS for processing Tailwind CSS and integrated to
styled-jsx - 🎉 Type checking TypeScript
- ✅ Strict Mode for TypeScript and React 17
- ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
- 💡 Absolute Imports
You can easily configure Next js. Please change the following file:
public/apple-touch-icon.png,public/favicon.ico,public/favicon-16x16.pngandpublic/favicon-32x32.png: your website favicon, you can generate from https://favicon.io/favicon-converter/src/styles/global.css: your CSS file using Tailwind CSSsrc/utils/AppConfig.ts: configuration filesrc/templates/Main.tsx: default theme
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.
You can create an optimized production build with:
npm run build-prod