or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-interface.mdhelper-utilities.mdindex.mdproject-creation.mdtemplate-system.md
tile.json

tessl/npm-create-next-app

Create Next.js-powered React apps with one command

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/create-next-app@15.5.x

To install, run

npx @tessl/cli install tessl/npm-create-next-app@15.5.0

index.mddocs/

Create Next App

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.

Package Information

  • Package Name: create-next-app
  • Package Type: npm
  • Language: TypeScript
  • Installation: Global: npm install -g create-next-app or use directly: npx create-next-app

Core Imports

Create 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

Core Usage

# Interactive mode
npx create-next-app@latest

# Direct usage with options
npx create-next-app@latest my-app --typescript --tailwind --eslint --app

Basic Usage

# 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/repo

Architecture

Create Next App consists of several key components:

  • CLI Interface: Commander.js-based command-line interface with comprehensive options
  • Template System: Pre-built templates for different configurations (App Router, Pages Router, with/without Tailwind)
  • Project Creation Engine: Core logic for downloading examples, installing templates, and configuring projects
  • Helper Utilities: Package manager detection, validation, git initialization, and file operations
  • Preference Management: Persistent configuration storage for user preferences

Capabilities

Command Line Interface

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 help

CLI Interface

Project Creation Engine

Core 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;
}

Project Creation

Template System

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;
}

Template System

Helper Utilities

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>;

Helper Utilities

Types

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);
}