@codingpixel/create-nextjs-template

CLI tool to scaffold Next.js projects from the production-ready template.

Features

• 🚀 Scaffolds a complete Next.js 16 project with TypeScript
• 🔐 Pre-configured authentication with token refresh
• 🎨 18+ UI components with Tailwind + SCSS
• 🌙 Dark/Light mode support
• 📦 Redux Toolkit with persistence
• 📝 Formik + Yup validation
• 🔔 Toast notification system
• 🤖 AI agent guidance files (AGENT.md, .agent/skills/)

Installation

Via npx (recommended - no installation needed)

npx @codingpixel/create-nextjs-template

Global installation

npm install -g @codingpixel/create-nextjs-template
create-nextjs-template

Using the short alias

cnt

Usage

Interactive mode

npx @codingpixel/create-nextjs-template

? Project name: my-app
? Path to favicon.ico (optional): ./assets/favicon.ico
? Path to logo image (optional): ./assets/logo.png

With arguments

npx @codingpixel/create-nextjs-template my-app --favicon ./favicon.ico --logo ./logo.png

Validation rules

• Project name must be at least 3 characters
• Must start with a letter
• Spaces are automatically converted to hyphens
• Special characters are removed
• Lowercase is enforced

Examples:

| Input | Result | |-------|--------| | My App | my-app | | My Great App | my-great-app | | A | ❌ Error (too short) | | 123-app | ❌ Error (must start with letter) |

What Gets Created

When you run the CLI, it:

1. Clones the template from GitHub
2. Removes the template's git history
3. Initializes a fresh git repository
4. Adds AGENT.md and .agent/ to .gitignore
5. Generates a new README with project structure
6. Updates package.json with your project name
7. Copies optional favicon and logo files
8. Creates initial commit

Project Structure

The created project includes:

app/
├── (pages)/
│   ├── (auth)/             # Auth route group (login, register, etc.)
│   │   ├── login/
│   │   └── layout.tsx
│   └── (dashboard)/        # Protected route group
│       ├── dashboard/
│       └── layout.tsx
├── _shared/                # Shared code (components, lib, hooks, assets)
│   ├── assets/
│   │   ├── icons/          # SVG icons with index.ts export
│   │   ├── images/         # Images with index.ts export
│   │   └── fonts/          # Fonts with index.ts export
│   ├── components/
│   │   ├── ui/             # Reusable UI components (button, input, themeToggle)
│   │   ├── forms/          # Form-specific components
│   │   └── providers/      # StoreProvider, ThemeProvider
│   └── lib/
│       ├── api/            # Axios configuration with token refresh
│       ├── config/         # Route configuration (ROUTES constants)
│       ├── hooks/          # Custom React hooks (useAuth, useTheme, useRedux)
│       ├── store/          # Redux store and slices
│       ├── utils/          # Utility functions (storage, assets)
│       ├── validations/    # Yup validation schemas
│       └── types/          # TypeScript types
├── api/                    # API routes
├── layout.tsx              # Root layout
├── page.tsx                # Landing page
├── globals.css             # Global styles with CSS variables
├── error.tsx               # Error boundary
├── loading.tsx             # Loading UI
└── not-found.tsx           # 404 page

public/
└── favicon.ico             # Root-served static files (favicon, robots.txt, etc.)

styles/
├── _variables.scss         # SCSS variables
├── _mixins.scss            # SCSS mixins
└── globals.scss            # SCSS entry point

proxy.ts                    # Next.js proxy for auth (replaces middleware in v16)

AGENT.md                    # AI agent guidance (gitignored)
.agent/skills/              # Detailed skill files (gitignored)

AI Agent Files

The template includes AGENT.md and .agent/skills/ which:

• Help AI agents understand your project structure
• Provide conventions for components, styling, routing
• Are automatically gitignored (not pushed to your repo)
• Located in the project for easy AI reference

Development

# Clone this repository
git clone https://github.com/codingpixel-developer/next-js-template.git

# Navigate to CLI package
cd next-js-template/create-nextjs-template

# Install dependencies
npm install

# Link for local testing
npm link

# Now test locally
npx @codingpixel/create-nextjs-template test-app

Publishing

# Login to npm
npm login

# Publish
npm publish

License

MIT