Next.js + app router + Tailwind CSS + TypeScript Starter and Boilerplate

Check the live demo:

Demo

Do you want to learn how to setup this project?

Check My Blog post here

Features

This starter simple project powered by bellow tools out of the box!

• ⚡️ Next.js 13
• 🆕 app router
• ⚛️ Folder structure by Atomic Design System
• ⚛️ React 18
• ☑️ TypeScript
• 🪡 Tailwind CSS 3 — Configured with the official Tailwind Plugins
• 📈 Absolute Import and Path Alias — Import components using @/ prefix
• 📏 ESLint — Find and fix problems in your code.
• 💖 Prettier — Format your code consistently
• 🐶 Husky & Lint Staged — Run scripts on your staged files before they are committed

Getting Started

1. Clone this template:

you can either download it or clone it with the help of git.

clone:

git clone [email protected]:NekfarBaqir/ts-nextjs-appdir-tailwind-starter.git

2. Installing dependencies

you can install its dependencies with any tools which you use, but inside the project I used yarn for pre-commit commands. so better to use yarn.

npm install
 or
yarn
 or
pnpm install

3. run the dev server

First, run the development server:

npm run dev
 or
yarn dev
 or
pnpm dev

Note : This starter project is under work. I will gradually add new features and development tools to it.

You can connect with me:

• 🌎 My Website
• 🗒️ LinkedIn
• 📀 YouTube
• 📸 Instagram