create-next-app

Overview

The recommended way to start a Next.js application is using 'create-next-app'. It automatically sets up the tooling, TypeScript, Tailwind CSS, ESLint, and the App Router directory structure.

Syntax

bash

npx create-next-app@latest my-app

# Interactive prompts:
# Would you like to use TypeScript? Yes
# Would you like to use ESLint? Yes
# Would you like to use Tailwind CSS? Yes
# Would you like to use `src/` directory? Yes
# Would you like to use App Router? (recommended) Yes
# Would you like to customize the default import alias? No

Common Pitfalls

Always ensure you are using Node.js v18.17 or later before running create-next-app.
Avoid starting a project manually (npm init && npm i next react react-dom) unless migrating an existing app.

Real-World Example

Starting the development server and understanding the initial scripts:

example

bash

// package.json scripts provided by create-next-app
{
  "scripts": {
    "dev": "next dev",        // Starts development server with Fast Refresh
    "build": "next build",    // Creates an optimized production build
    "start": "next start",    // Starts a production server (run build first)
    "lint": "next lint"       // Runs ESLint configuration
  }
}

// Run the development server
npm run dev
// Server ready on http://localhost:3000

Take Next.js Quiz