tessl/npm-create-next-app
Create Next.js-powered React apps with one command
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
cli-interface.mddocs/
CLI Interface
Comprehensive command-line interface built with Commander.js that provides both interactive and non-interactive modes for creating Next.js applications.
Capabilities
Command Structure
The CLI accepts a directory name as a positional argument and various configuration options.
create-next-app [directory] [options]Usage Examples:
# Interactive mode - prompts for all options
npx create-next-app@latest
# Specify directory name
npx create-next-app@latest my-next-app
# Non-interactive with full configuration
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dirProject Configuration Options
Options for configuring the generated Next.js project structure and features.
--ts, --typescript # Initialize as TypeScript project (default)
--js, --javascript # Initialize as JavaScript project
--tailwind # Initialize with Tailwind CSS config (default)
--eslint # Initialize with ESLint config
--biome # Initialize with Biome config
--app # Initialize as App Router project
--src-dir # Initialize inside 'src/' directory
--turbopack # Enable Turbopack by default for development
--rspack # Use Rspack as the bundler
--import-alias <prefix/*> # Specify import alias (default "@/*")
--api # Initialize headless API using App Router
--empty # Initialize empty projectUsage Examples:
# TypeScript with Tailwind and ESLint
npx create-next-app@latest my-app --typescript --tailwind --eslint
# JavaScript with App Router and source directory
npx create-next-app@latest my-app --javascript --app --src-dir
# API-only project with custom import alias
npx create-next-app@latest my-api --api --import-alias "~/src/*"Package Manager Options
Options for specifying which package manager to use for dependency installation.
--use-npm # Use npm as package manager
--use-pnpm # Use pnpm as package manager
--use-yarn # Use Yarn as package manager
--use-bun # Use Bun as package managerUsage Examples:
# Force using pnpm
npx create-next-app@latest my-app --use-pnpm
# Force using Yarn
npx create-next-app@latest my-app --use-yarnExample and Template Options
Options for bootstrapping projects from existing examples or custom repositories.
-e, --example <example-name|github-url> # Bootstrap with example
--example-path <path-to-example> # Path within example repositoryUsage Examples:
# Use official Next.js example
npx create-next-app@latest my-blog --example blog-starter
# Use example from GitHub URL
npx create-next-app@latest my-app --example https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
# Complex GitHub URL with custom path
npx create-next-app@latest my-app \
--example https://github.com/user/monorepo/tree/main/packages \
--example-path my-exampleInstallation and Setup Options
Options for controlling package installation and project initialization.
--skip-install # Skip installing packages
--disable-git # Skip initializing git repository
--yes # Use saved preferences or defaults
--reset, --reset-preferences # Reset saved preferencesUsage Examples:
# Skip package installation
npx create-next-app@latest my-app --skip-install
# Skip git initialization
npx create-next-app@latest my-app --disable-git
# Use defaults without prompts
npx create-next-app@latest my-app --yesHelp and Version Options
Standard CLI options for getting help and version information.
-v, --version # Output current version
-h, --help # Display help messageInteractive Prompts
When options are not provided via CLI flags, the tool prompts interactively for configuration choices.
Prompt Sequence:
- Project Name: If directory not specified
- TypeScript: Use TypeScript or JavaScript
- Linter: Choose ESLint, Biome, or none
- Tailwind CSS: Enable Tailwind CSS
- Source Directory: Use
src/directory - App Router: Use App Router (recommended)
- Turbopack: Enable Turbopack (recommended)
- Import Alias: Customize import alias
Example Interactive Session:
$ npx create-next-app@latest
✔ What is your project named? … my-next-app
✔ Would you like to use TypeScript? … Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack? (recommended) … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … NoPreference Management
The CLI saves user preferences to avoid repeated prompts in future uses.
--reset, --reset-preferences # Reset all saved preferences
--yes # Use saved preferences without promptingUsage Examples:
# Reset preferences interactively
npx create-next-app@latest --reset
# Use saved preferences
npx create-next-app@latest my-app --yes