nextjs-cli

# Next.js CLI Guide

Next.js is a React framework for building full-stack web applications with features like file-based routing, server-side rendering, and API routes. This guide provides essential workflows and quick references for common Next.js operations.

## Quick Start

```bash
# Create new Next.js app (interactive)
npx create-next-app@latest

# Create with specific name
npx create-next-app@latest my-app

# Start development server
cd my-app
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run linter
npm run lint
```

## Common Workflows

### Workflow 1: Create and Run New Application

```bash
# Create new app with TypeScript and Tailwind
npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --app \
  --use-pnpm

# Navigate to project
cd my-app

# Start development server with Turbopack
npm run dev -- --turbopack

# Open browser to http://localhost:3000
```

### Workflow 2: Add New Pages and Routes

```bash
# Create new route (App Router)
mkdir -p app/about
touch app/about/page.tsx

# Create dynamic route
mkdir -p app/blog/[slug]
touch app/blog/[slug]/page.tsx

# Create API route
mkdir -p app/api/users
touch app/api/users/route.ts

# Development server auto-reloads changes
```

### Workflow 3: Data Fetching and API Integration

```typescript
// Server Component with data fetching
// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // ISR: revalidate every 60s
  })
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()
  return <div>{/* Render posts */}</div>
}
```

```typescript
// API Route Handler
// app/api/users/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  const users = await getUsers()
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const user = await