Create Next Template - Malahim Dev

A production-ready Next.js 16 starter template with Bun runtime, TypeScript, Tailwind CSS, shadcn/ui, and React 19.

NPM Package: create-next-template-malahimdev

🚀 Quick Start

# Using npm
npx create-next-template-malahimdev my-app
cd my-app
bun install
bun run dev

Then open http://localhost:3000 🎉

Prerequisites

Before you begin, ensure you have:

• Node.js >= 18.0.0 (download)
• Bun >= 1.0.0 (install) - Optional but recommended for 3x faster builds
• npm - Comes bundled with Node.js

What's Included

🛠️ Core Stack

• Next.js 16 - Modern React framework with App Router
• React 19 - Latest React features
• TypeScript - Full type safety
• Tailwind CSS v4 - Utility-first styling
• shadcn/ui - Beautiful, accessible components
• Bun - Ultra-fast JavaScript runtime

✨ Pre-configured Features

• 🎨 Dark/Light mode with next-themes
• 📱 Fully responsive design
• 🎭 1000+ Lucide Icons
• 🔔 React Hot Toast notifications
• ✅ ESLint configured
• 🚀 Optimized for production

Available Scripts

bun run dev      # Start development server
bun run build    # Build for production
bun run start    # Start production server
bun run lint     # Run ESLint

Project Structure

my-app/
├── app/                  # Next.js routes & layout
├── components/           # Reusable components
│   └── ui/              # shadcn/ui components
├── lib/                 # Utilities & helpers
├── public/              # Static assets
├── tsconfig.json        # TypeScript config
└── package.json

Configuration

Environment Variables

Create .env.local in project root:

NEXT_PUBLIC_API_URL=http://localhost:3000

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser.

Adding Components

Add more UI components from shadcn/ui:

npx shadcn-ui@latest add button card dialog input

Browse all components: ui.shadcn.com

Create Custom Components

// components/MyComponent.tsx
export default function MyComponent() {
  return <div className="p-4 rounded-lg bg-white dark:bg-slate-900">
    Hello World
  </div>
}

Deployment

✅ Vercel (Recommended)

1. Go to vercel.com
2. Sign up and create new project
3. Connect your repository
4. Add environment variables if needed
5. Click "Deploy"

Other Options

• Netlify - bun add -d @netlify/cli && netlify deploy
• Docker - Use Dockerfile with Bun runtime
• Node.js - bun run build && node node_modules/.bin/next start

Common Issues

| Issue | Solution | |-------|----------| | Port 3000 in use | bun run dev --port 3001 | | Modules not found | rm -rf node_modules && bun install | | Styles not applying | Restart dev server, clear browser cache | | TypeScript errors | Check tsconfig.json path aliases match imports |

FAQ

Can I use npm instead of Bun?
Yes! Bun is 3x faster but npm works fine too.

Is this production-ready?
Yes! Includes best practices and optimizations.

How do I add new pages?
Create a folder in app/. Example: app/about/page.tsx → /about

Can I customize everything?
Absolutely! All configs are editable and well-documented.

Learning Resources

• Next.js Docs
• React Docs
• Tailwind CSS
• shadcn/ui Components
• Bun Documentation

Support

• 🌐 Website: malahim.dev
• 📝 Blog & Tutorials: blog.malahim.dev
• 📦 NPM: create-next-template-malahimdev

Contributing

We welcome contributions!

1. Fork the template
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

MIT - Free to use for commercial projects

Acknowledgments

Built with inspiration from:

• Create Next App
• shadcn/ui
• Tailwind CSS

⭐ Support This Project

If this template helped you:

• ⭐ Star on npm
• 📢 Share with your network
• 🙌 Follow on malahim.dev
• 🙌 Read blogs blog.malahim.dev

Made with ❤️ by Malahim Haseeb