Next.js Starter Kit

A production-ready Next.js starter template with everything you need to build modern web applications.

• Next.js 15 — App Router, Server Components, Streaming
• TypeScript — Strict mode enabled, path aliases (@/)
• Tailwind CSS 4 — Utility-first CSS with dark mode support
• ESLint 9 — Flat config with Next.js + TypeScript + Prettier
• Prettier — Consistent code formatting
• Husky + lint-staged — Pre-commit hooks for code quality
• Dark mode — System preference detection built-in

# Clone the repo
git clone https://github.com/AliMahmoudDev/nextjs-starter-kit.git my-app
cd my-app

# Install dependencies
npm install

# Set up Husky hooks
npm run prepare

# Start dev server
npm run dev

Open http://localhost:3000 to see the app.

src/
├── app/
│   ├── globals.css      # Tailwind + CSS variables
│   ├── layout.tsx       # Root layout with metadata
│   └── page.tsx         # Home page
├── components/          # Shared UI components (add yours here)
└── lib/                 # Utilities and helpers (add yours here)

Create new components in src/components/:

// src/components/Button.tsx
export function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-lg bg-black px-4 py-2 text-white hover:bg-gray-800">
      {children}
    </button>
  );
}

Import using the @/ alias:

import { Button } from "@/components/Button";

1. Push your repo to GitHub
2. Import it on vercel.com
3. Deploy — that's it!

npm run build
# Deploy the .next folder to your hosting provider

Copy .env.example to .env.local:

cp .env.example .env.local

Edit src/app/globals.css to customize colors and the dark mode palette.

1. Fork the repository
2. Create your feature branch (git checkout -b feat/my-feature)
3. Commit your changes (git commit -m 'feat: add my feature')
4. Push to the branch (git push origin feat/my-feature)
5. Open a Pull Request

MIT — Made with ❤️ by Ali Mahmoud