create-next-feature v0.1.0

Interactive CLI tool for scaffolding new NextFeature workspaces with all necessary project structure and configuration.

Overview

create-next-feature provides a quick and easy way to create a new NextFeature workspace with:

• ✅ Nx monorepo setup
• ✅ next-feature generator plugin pre-configured
• ✅ @next-feature/client library installed
• ✅ TypeScript configuration
• ✅ TailwindCSS setup
• ✅ NextAuth.js integration
• ✅ Zustand state management
• ✅ TanStack Query
• ✅ Complete project structure

Quick Start

Create a New Project

npx create-next-feature my-nextfeature-project
cd my-nextfeature-project

The tool will:

1. Create a new Nx workspace
2. Install next-feature plugin
3. Setup all dependencies
4. Configure TypeScript and tooling
5. Initialize git repository

Start Building

# Create your first feature
npx nx g next-feature:feature --name=users

# Create an API action
npx nx g next-feature:action --name=getUser --actionType=api --projectName=users

# Create a React component
npx nx g next-feature:component --name=UserCard --projectName=users

Installation Methods

Using npx (Recommended)

npx create-next-feature my-project
cd my-project
npm start

Using npm

npm create next-feature@latest my-project
cd my-project
npm start

Using pnpm

pnpm create next-feature my-project
cd my-project
pnpm start

Project Structure

After creation, your project will have:

my-project/
├── apps/                      # Next.js applications
├── libs/                      # Shared feature libraries
├── clients/                   # API client packages
│   └── client/               # Default @next-feature/client
├── tools/                     # Build and development tools
├── nx.json                    # Nx configuration
├── package.json               # Project dependencies
├── tsconfig.base.json        # TypeScript configuration
└── README.md                  # Project README

What's Included

Nx Configuration

• ✅ Nx 20.8.1
• ✅ next-feature plugin
• ✅ @nx/next integration
• ✅ @nx/eslint configuration
• ✅ Caching and task distribution

Dependencies

• ✅ next (~15.2.4) - React framework
• ✅ react (^19.0.0) - UI library
• ✅ typescript (^5) - Type safety
• ✅ tailwindcss - Utility-first CSS
• ✅ zustand (^5.0.6) - State management
• ✅ axios (1.9.0) - HTTP client
• ✅ zod - Schema validation
• ✅ @tanstack/react-query (5.75.7) - Data fetching
• ✅ next-auth (5.0.0-beta.27) - Authentication

Dev Dependencies

• ✅ Jest & Vitest - Testing frameworks
• ✅ ESLint & Prettier - Code quality
• ✅ TypeScript - Type checking

CLI Options

create-next-feature [options] [directory]

Options

| Option | Type | Description | |--------|------|-------------| | --help | flag | Show help message | | --version | flag | Show version number | | --package-manager | enum | npm, pnpm, or yarn | | --no-git | flag | Skip git initialization | | --interactive | flag | Interactive mode (default) |

Examples

# Create with specific package manager
npx create-next-feature my-app --package-manager=pnpm

# Create without git initialization
npx create-next-feature my-app --no-git

# Create in current directory
npx create-next-feature --no-interactive .

First Steps After Creation

1. Verify Installation

cd my-project
npm run nx -- list

This shows all available generators.

2. Create Your First Feature

npm run nx -- g next-feature:feature --name=dashboard

3. Generate Code

# Create an API action
npm run nx -- g next-feature:action --name=getDashboardData \
  --actionType=api --projectName=dashboard

# Create a component
npm run nx -- g next-feature:component --name=DashboardCard \
  --projectName=dashboard

# Create state management
npm run nx -- g next-feature:store --name=dashboardStore \
  --projectName=dashboard

4. Start Development

npm start

Available Commands

# List all generators
npm run nx -- list

# View dependency graph
npm run nx -- graph

# Build projects
npm run nx -- build [project]

# Run tests
npm run nx -- test [project]

# Lint code
npm run nx -- lint [project]

# Format code
npm run nx -- format:write

# View Nx documentation
npm run nx -- list @nx/next

Generators Overview

The created workspace includes all next-feature generators:

Project Generators

npm run nx -- g next-feature:feature --name=users
npm run nx -- g next-feature:application --name=myapp
npm run nx -- g next-feature:client --name=apiClient

Code Generators

npm run nx -- g next-feature:action --name=getUser --projectName=users
npm run nx -- g next-feature:component --name=Button --projectName=users
npm run nx -- g next-feature:store --name=userStore --projectName=users
npm run nx -- g next-feature:types --name=user --projectName=users
npm run nx -- g next-feature:constant --name=userRoles --projectName=users
npm run nx -- g next-feature:utility --name=userHelpers --projectName=users

Configuration Generators

npm run nx -- g next-feature:client-config --projectName=users
npm run nx -- g next-feature:auth --projectName=users
npm run nx -- g next-feature:axios --projectName=users
npm run nx -- g next-feature:database --projectName=users

Full Documentation

After creation, comprehensive documentation is available:

• next-feature Plugin - Generator reference
• @next-feature/client - API client library
• NextFeature - Complete ecosystem guide

Troubleshooting

Issue: Command not found

Solution: Ensure npx is available and try again:

npx --version  # Check npx availability
npm install -g npx  # If needed

Issue: Permission denied

Solution: Check node/npm installation:

node --version
npm --version
npm config get prefix  # Check npm prefix

Issue: Slow installation

Solution: Use a faster package manager:

npx create-next-feature my-app --package-manager=pnpm

Issue: Git initialization failed

Solution: Initialize manually:

cd my-app
git init
git add .
git commit -m "Initial commit"

Environment Requirements

• Node.js >= 16 (18+ recommended)
• npm >= 7 (or pnpm, yarn)
• git (optional, for version control)

What Happens During Creation

1. Directory Setup - Creates project directory
2. Nx Initialization - Sets up Nx workspace
3. Dependency Installation - Installs npm packages
4. next-feature Setup - Configures generator plugin
5. Git Initialization - Initializes git repository (if not --no-git)
6. Welcome Message - Displays next steps

Package Managers

The tool automatically detects your preferred package manager:

• npm - Default
• pnpm - Faster, disk-efficient
• yarn - Alternative option

Override with --package-manager flag.

Common Workflows

Workflow 1: API-First Development

# 1. Create feature
npm run nx -- g next-feature:feature --name=api

# 2. Setup database
npm run nx -- g next-feature:database --projectName=api

# 3. Create API actions
npm run nx -- g next-feature:action --name=getUsers --actionType=api --projectName=api
npm run nx -- g next-feature:action --name=createUser --actionType=api --projectName=api

# 4. Create types and constants
npm run nx -- g next-feature:types --name=user --projectName=api
npm run nx -- g next-feature:constant --name=userEndpoints --projectName=api

Workflow 2: Full-Stack with Auth

# 1. Create auth feature
npm run nx -- g next-feature:feature --name=auth

# 2. Add NextAuth setup
npm run nx -- g next-feature:auth --projectName=auth

# 3. Create login action
npm run nx -- g next-feature:action --name=login --actionType=form --projectName=auth

# 4. Create user store
npm run nx -- g next-feature:store --name=authStore --projectName=auth

# 5. Create protected pages
npm run nx -- g next-feature:component --name=ProtectedPage --projectName=auth

Sharing Your Work

The created project is ready for:

• Version Control - Git integration
• CI/CD - Nx Cloud support
• Collaboration - Monorepo structure
• Publishing - NPM package release

Getting Help

Inside your project:

# View help for any generator
npm run nx -- g next-feature:action --help

# View Nx documentation
npm run nx -- list

# Check status
npm run nx -- status

See Also

• NextFeature Main Repository
• Nx Documentation
• Next.js Documentation

License

MIT

Happy coding! 🚀

For more information, see the documentation in your project after creation.