create-clean-next-js

🚀 Ultra-clean Next.js starter CLI with Tailwind CSS, TypeScript, ESLint, and built-in payload validation.

🚀 Quick Start

Create a new Next.js project in seconds:

npx create-clean-next-js myapp
cd myapp
npm run dev

Package Manager Options

# Default (npm)
npx create-clean-next-js myapp

# Using pnpm (2-3x faster) ⚡
npx create-clean-next-js myapp --pnpm

# Using Yarn
npx create-clean-next-js myapp --yarn

# Using Bun (Fastest) 🚀
npx create-clean-next-js myapp --bun

| Command | Description | |---------|-------------| | npx create-clean-next-js myapp | ✅ Creates a new clean Next.js project | | npx create-clean-next-js myapp --pnpm | ⚡ 2-3x faster installation | | npx create-clean-next-js myapp --yarn | 📦 Yarn package manager | | npx create-clean-next-js myapp --bun | 🚀 Fastest - Bun runtime | | npm install create-clean-next-js | ❌ Don't install as a dependency |

⚡ Performance Comparison

| Feature | create-clean-next-js (Your CLI) | create-next-app (Standard) | |---------|--------------------------------|---------------------------| | Speed | ~21 seconds (Full Setup) 🚀 | ~3-5 minutes (Full Setup) 🐢 | | Boilerplate | Clean! No logos or generic code | Lots of boilerplate (SVG, styled home page) | | Structure | Minimalist (uses src/app default) | Heavier (multiple CSS/SVG starter files) | | Dependencies | Focused & Essential | Larger default set |

📖 Table of Contents

• Quick Start
• Performance Comparison
• Features
• What's Included
• Installation
• Usage
• Payload Validation
• Project Structure
• Available Scripts
• Tech Stack
• Contributing
• License

✨ Features

• Next.js 16 - Latest version with App Router
• Tailwind CSS 3 - Utility-first CSS framework
• TypeScript 5 - Strict mode enabled for type safety
• ESLint 9 - Code quality and consistency
• payload-guard-filter - Pre-configured API validation
• Zero Demo Files - Clean, production-ready structure
• Minimal Dependencies - Lightweight (~180MB node_modules)
• Git Initialized - Auto-initializes git repository

📦 What's Included

Your new project will include:

myapp/
├── src/
│   ├── app/
│   │   ├── layout.tsx       # Root layout component
│   │   ├── page.tsx         # Home page
│   │   └── globals.css      # Global styles with Tailwind
│   ├── lib/
│   │   └── payloadGuard.ts  # Pre-configured validation shapes
│   ├── components/          # Your custom components
│   └── types/               # TypeScript type definitions
├── .gitignore
├── eslint.config.mjs        # ESLint configuration
├── next.config.mjs          # Next.js configuration
├── package.json
├── postcss.config.mjs       # PostCSS configuration
├── tailwind.config.ts       # Tailwind configuration
└── tsconfig.json            # TypeScript configuration

📥 Installation

Prerequisites

• Node.js 18.17 or later
• npm or yarn package manager

Create New Project

# Using npx (recommended)
npx create-clean-next-js myapp

# Navigate to project
cd myapp

# Start development server
npm run dev

🔒 Payload Validation

Pre-defined validation shapes in src/lib/payloadGuard.ts:

import { login, register, payload } from "@/lib/payloadGuard";

// API Route example
export async function POST(req: Request) {
  const body = await req.json();

  // Validate login payload - only allowed fields returned
  const safe = login(body);

  return Response.json({ data: safe });
}

Available Shapes

| Shape | Fields | |-------|--------| | login | password, token, api_key | | register | username, email, password | | payload | data, message, value |

🏗️ Project Structure

src/app/

Next.js App Router pages and layouts.

src/components/

Reusable React components (empty by default).

src/lib/

Utility functions and payload validation guards.

src/types/

TypeScript type definitions and interfaces.

📖 Available Scripts

npm run dev      # Start development server at localhost:3000
npm run build    # Build production bundle
npm run start    # Start production server
npm run lint     # Run ESLint checks

🛠️ Tech Stack

| Package | Version | Description | |---------|---------|-------------| | Next.js | Latest | React framework | | React | Latest | UI library | | TypeScript | ^5 | Type safety | | Tailwind CSS | ^3 | CSS framework | | ESLint | ^9 | Code linting | | payload-guard-filter | ^1.8.0 | API validation |

🤝 Contributing

Contributions are welcome! Here's how you can help:

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

Development

# Clone the repository
git clone https://github.com/sannuk79/npx-create-next-js-Cli-frontend-.git

# Navigate to project
cd create-clean-next

# Install dependencies
npm install

# Make your changes and test

📄 License

This project is licensed under the MIT License.

🔗 Links

• npm Package
• GitHub Repository
• Report Issues

📞 Support

If you have any questions or need help:

• Open an issue on GitHub
• Check existing documentation

Made with ❤️ by sannuk79

If you like this project, please ⭐ star the repository!