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
Create Next App is the official CLI tool for bootstrapping Next.js applications. It provides both interactive and non-interactive modes for creating React applications with sensible defaults, supporting TypeScript, Tailwind CSS, ESLint, App Router, and various other Next.js features with zero configuration.
npm install -g create-next-app or use directly: npx create-next-appCreate Next App is a CLI tool designed for command-line usage. It's not intended for programmatic imports as a library.
# Global installation (optional)
npm install -g create-next-app
# Direct usage without installation (recommended)
npx create-next-app@latest# Interactive mode
npx create-next-app@latest
# Direct usage with options
npx create-next-app@latest my-app --typescript --tailwind --eslint --app# Create a new Next.js app interactively
npx create-next-app@latest my-next-app
# Create with specific configuration
npx create-next-app@latest my-app \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*"
# Create from an example
npx create-next-app@latest my-app --example blog-starter
# Create from GitHub repository
npx create-next-app@latest my-app --example https://github.com/user/repoCreate Next App consists of several key components:
Comprehensive CLI with support for all Next.js configuration options and interactive prompts for missing options.
create-next-app [directory] [options]
# Project Configuration:
--ts, --typescript # Initialize as TypeScript project (default)
--js, --javascript # Initialize as JavaScript project
--tailwind # Initialize with Tailwind CSS (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 for development
--rspack # Use Rspack as bundler
--import-alias <prefix/*> # Import alias (default "@/*")
--api # Initialize headless API using App Router
--empty # Initialize empty project
# Package Managers:
--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 manager
# Examples and Setup:
-e, --example <name|url> # Bootstrap with example
--example-path <path> # Path within example repository
--skip-install # Skip installing packages
--disable-git # Skip git repository initialization
--yes # Use saved preferences/defaults
--reset # Reset saved preferences
# Help and Version:
-v, --version # Show version
-h, --help # Show helpCore functionality for creating Next.js projects from templates or examples with full configuration support.
/**
* Create a new Next.js application with specified configuration
*/
function createApp(options: CreateAppOptions): Promise<void>;
interface CreateAppOptions {
appPath: string;
packageManager: PackageManager;
example?: string;
examplePath?: string;
typescript: boolean;
tailwind: boolean;
eslint: boolean;
biome: boolean;
app: boolean;
srcDir: boolean;
importAlias: string;
skipInstall: boolean;
empty: boolean;
api?: boolean;
turbopack: boolean;
rspack: boolean;
disableGit?: boolean;
}Built-in templates for different Next.js configurations with support for TypeScript/JavaScript and various styling options.
/**
* Install a Next.js template with specified configuration
*/
function installTemplate(args: InstallTemplateArgs): Promise<void>;
/**
* Get the file path for a template file
*/
function getTemplateFile(args: GetTemplateFileArgs): string;
type TemplateType =
| "app" | "app-api" | "app-empty" | "app-tw" | "app-tw-empty"
| "default" | "default-empty" | "default-tw" | "default-tw-empty";
type TemplateMode = "js" | "ts";
interface InstallTemplateArgs {
appName: string;
root: string;
packageManager: PackageManager;
isOnline: boolean;
template: TemplateType;
mode: TemplateMode;
eslint: boolean;
biome: boolean;
tailwind: boolean;
srcDir: boolean;
importAlias: string;
skipInstall: boolean;
turbopack: boolean;
rspack: boolean;
}Utility functions for package management, validation, git operations, and file handling.
/**
* Detect the user's preferred package manager
*/
function getPkgManager(): PackageManager;
/**
* Validate npm package name
*/
function validateNpmName(name: string): ValidateNpmNameResult;
/**
* Check if folder is empty or contains only allowed files
*/
function isFolderEmpty(root: string, name: string): boolean;
/**
* Initialize git repository with error handling
*/
function tryGitInit(root: string): boolean;
/**
* Install packages using specified package manager
*/
function install(packageManager: PackageManager, isOnline: boolean): Promise<void>;
/**
* Check internet connectivity including proxy support
*/
function getOnline(): Promise<boolean>;
/**
* Check if directory is writable
*/
function isWriteable(directory: string): Promise<boolean>;
/**
* Copy files with glob patterns and transformations
*/
function copy(src: string | string[], dest: string, options?: CopyOption): Promise<void>;type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
type ValidateNpmNameResult =
| { valid: true }
| { valid: false; problems: string[] };
type TemplateType =
| "app" | "app-api" | "app-empty" | "app-tw" | "app-tw-empty"
| "default" | "default-empty" | "default-tw" | "default-tw-empty";
type TemplateMode = "js" | "ts";
interface GetTemplateFileArgs {
template: TemplateType;
mode: TemplateMode;
file: string;
}
interface RepoInfo {
username: string;
name: string;
branch: string;
filePath: string;
}
interface CopyOption {
/** Working directory for source patterns */
cwd?: string;
/** Function to rename files during copy */
rename?: (basename: string) => string;
/** Whether to preserve directory structure */
parents?: boolean;
}
class DownloadError extends Error {
constructor(message: string);
}