Skip to content

Latest commit

 

History

History
88 lines (61 loc) · 2.71 KB

README.md

File metadata and controls

88 lines (61 loc) · 2.71 KB
Raw

Next.js + Tailwind CSS + TypeScript Boilerplate

ts-nextjs-tailwind-boilerplate

Next.js + Tailwind CSS + TypeScript Boilerplate

Made by Mithyalabs

Features

This repository is packed with:

  • ⚡️ Next.js 13 with App Router
  • ⚛️ React 18
  • ✨ TypeScript
  • 💨 Tailwind CSS 3 — Configured with CSS Variables to extend the primary color
  • 💎 Pre-built Components — Components that will automatically adapt with brand color
  • 📈 Absolute Import and Path Alias — Import components using @/ prefix and static assets using ~/
  • 📏 ESLint & Prettier — Will also auto sort your imports
  • 🐶 Husky & Lint Staged — Run scripts on your staged files before they are committed
  • 🔥 Snippets — A collection of useful snippets
  • 🗺 Site Map — Automatically generate sitemap.xml
  • ✨ SVGR Support - import svg icons directly as a React Component

Getting Started

1. Clone this template using one of the two ways

  1. Using create-next-app

    npx create-next-app -e https://github.com/mithya-team/ts-nextjs-tailwind-boilerplate project-name

  2. Using degit

    npx degit mithya/ts-nextjs-tailwind-boilerplate YOUR_APP_NAME

2. Install dependencies

Use yarn to ensure the husky hooks can work properly.

yarn install

3. Run the development server

You can start the server using this command:

yarn dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx.

4. Change defaults

There are some things you need to change including title, urls, favicons, etc.

Find all comments with !INITIAL_CONFIG, then follow the guide.

Don't forget to change the package name in package.json

Todo

  • Add SVGR Support
  • Configure favicons
  • Add models
  • Fix husky

Resources

  • Use Svgr in React based project: link
  • Configuring Svgr for nextjs: link
  • SVGR Support (Does not supports React Props Type)
  • Override the next-env if the type is important: link
  • Add Custom fonts: link

Recommendations

  • Use HybridButton Link over Button and Link
  • Add reusable or shared components, layout in src/components and src/layout diirectory respectively
  • Use logger from src/lib/logger over console
  • Abstract the UI and business logic into hooks or context.
  • Prefer context over hooks to write logic