tessl/npm-create-next-app

Create Next.js-powered React apps with one command

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Create Next App

Name: tessl/npm-create-next-app
Author: tessl

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