Skip to main content

Next.js

We are using NextJs which started from this boilerplate. Which includes these features.

  • 🔥 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
  • 🛠 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
  • 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
  • 🌈 Include a FREE minimalist theme
  • 💯 Maximize lighthouse score

Requirements​

  • Node.js 16+ and npm

Folder Structure​

rentreef # root directory of your site
├── 📁 main # next.js & storybook
│   ├── package.json
│   ├── next.config.js # next.js config
│   ├── node_modules
│   ├── readme.md
│   ├── TailwindUIExamples
│   ├── public
│   ├── .env.local # env variables
│   ├── .husky
│   ├── .next
│   ├── .storybook
│   ├── .gitignore
│   └── 📁 src
│       ├── 📁 components # atomic design
│       │   ├── atoms
│       │   ├── molecules
│       │   ├── navigation
│       │   ├── organisms
│       │   └── home
│       ├── interfaces
│       ├── layout
│       ├── pages
│       ├── stories # storybook
│       ├── styles
│       └── templates
└── 📁 app-docs # docs