Next.js CLI Commands

Essential CLI Commands

npx create-next-app@latest

npm run dev

npm run build

npm run start

🔹 Creating a New Next.js App

Use create-next-app to quickly scaffold a new Next.js project with all necessary configurations. This command sets up your project structure, installs dependencies, and configures TypeScript and Tailwind CSS if desired.

# Create a new Next.js app with default settings
npx create-next-app@latest my-app

# Create with specific options
npx create-next-app@latest my-app --typescript --tailwind --app

# Navigate to your project
cd my-app

# Start development server
npm run dev

🔹 Development Commands

Run your Next.js app in development mode with hot reloading and detailed error messages. These commands help you build and test your application locally before deploying to production.

# Start development server (default port 3000)
npm run dev

# Start on a different port
npm run dev -- -p 3001

# Start with turbopack (faster)
npm run dev --turbo

# Development server will be available at:
# http://localhost:3000

🔹 Building for Production

Create an optimized production build of your Next.js application. This command compiles your code, optimizes assets, and generates static pages for the best performance in production environments.

# Build your application for production
npm run build

# This will:
# - Compile TypeScript
# - Optimize JavaScript bundles
# - Generate static pages
# - Create optimized images
# - Analyze bundle size

🔹 Running Production Server

Start your Next.js application in production mode after building. This command serves the optimized build with better performance and security for real-world deployment scenarios.

# First, build your app
npm run build

# Then start the production server
npm run start

# Start on a different port
npm run start -- -p 8080

# Production server will be available at:
# http://localhost:3000

🔹 Package Management Commands

Install and manage dependencies for your Next.js project using npm or yarn. These commands help you add libraries, update packages, and maintain your project's dependencies efficiently.

# Install all dependencies
npm install

# Add a new package
npm install package-name

# Add a dev dependency
npm install --save-dev package-name

# Update packages
npm update

# Remove a package
npm uninstall package-name

# Common Next.js packages to install:
npm install @vercel/analytics
npm install next-auth
npm install prisma

🔹 Linting and Formatting

Check and fix code quality issues using ESLint in your Next.js project. These commands help maintain consistent code style and catch potential errors before they reach production.

# Run ESLint to check for issues
npm run lint

# Fix auto-fixable issues
npm run lint -- --fix

# Check specific files
npm run lint -- pages/index.tsx

# Add Prettier for formatting
npm install --save-dev prettier
npx prettier --write .

🔹 Deployment Commands

Deploy your Next.js application to Vercel or other hosting platforms. These commands simplify the deployment process and help you publish your app to production with minimal configuration.

# Deploy to Vercel (recommended)
npx vercel

# Deploy to production
npx vercel --prod

# Install Vercel CLI globally
npm install -g vercel

# Then deploy with:
vercel
vercel --prod

# Other deployment options:
# - Build and deploy to any Node.js host
# - Export as static site: npm run build && npm run export
# - Deploy to Docker container

🔹 Useful Development Commands

Additional commands to enhance your Next.js development workflow. These utilities help with debugging, testing, and optimizing your application during development and production.

# Clear Next.js cache
rm -rf .next

# Analyze bundle size
npm run build -- --analyze

# Type checking (TypeScript)
npx tsc --noEmit

# Run tests (if configured)
npm test

# Generate Prisma client (if using Prisma)
npx prisma generate

# Run database migrations
npx prisma migrate dev

# Open Prisma Studio
npx prisma studio

🔹 Environment Variables

Manage environment-specific configuration using .env files. Next.js automatically loads environment variables from these files for different deployment environments and development stages.

# Create environment files:
# .env.local (local development, not committed)
# .env.development (development)
# .env.production (production)

# Example .env.local file:
DATABASE_URL="postgresql://..."
NEXT_PUBLIC_API_URL="https://api.example.com"
SECRET_KEY="your-secret-key"

# Load environment variables
# Next.js automatically loads .env files
# No additional command needed!