Installation - Next.js Application

System Requirements

Before installing, make sure you have the following installed on your system:

Node.js

Version 18.17 or higher required

# Check Node.js version
node --version

# Should output: v18.17.0 or higher

Package Manager

NPM, Yarn, pnpm, or Bun

# Check package manager version
npm --version
yarn --version
pnpm --version
bun --version

Download Node.js: Visit nodejs.org to download and install the latest LTS version (v18.17+).

macOS Users: Xcode command line tools are required. Install with: xcode-select --install

Automatic Installation (Recommended)

The easiest way to create a new Next.js application using create-next-app.

Quick Start

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

# Or specify a project name
npx create-next-app@latest my-nextjs-app

# Navigate to project
cd my-nextjs-app

# Start development server
npm run dev

Installation Prompts

During installation, you'll be asked to configure:

What is your project named? my-app
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

Using Different Package Managers

# Using Yarn
yarn create next-app my-app

# Using pnpm
pnpm create next-app my-app

# Using Bun
bun create next-app my-app

Recommended Setup: TypeScript + ESLint + Tailwind CSS + src/ directory + App Router

Manual Installation

Install Next.js manually in an existing project.

Step 1: Install Packages

# Install Next.js, React, and React DOM
npm install next@latest react@latest react-dom@latest

Step 2: Update package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Step 3: Create App Directory

# Create app directory
mkdir app

# Create root layout
touch app/layout.tsx

# Create root page
touch app/page.tsx

Step 4: Create Root Layout

Edit app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Step 5: Create Homepage

Edit app/page.tsx:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Step 6: Start Development Server

npm run dev

Installing Dependencies

Essential Packages

# Authentication with NextAuth.js
npm install next-auth

# Database ORM with Prisma
npm install @prisma/client
npm install -D prisma

# Form handling with React Hook Form
npm install react-hook-form

# Data fetching with TanStack Query
npm install @tanstack/react-query

# Styling with Tailwind CSS (if not installed)
npm install -D tailwindcss postcss autoprefixer

UI Component Libraries

# shadcn/ui (Recommended)
npx shadcn-ui@latest init

# Or Material-UI
npm install @mui/material @emotion/react @emotion/styled

# Or Chakra UI
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Development Dependencies

# TypeScript types
npm install -D @types/node @types/react @types/react-dom

# ESLint plugins
npm install -D eslint-config-next

# Prettier
npm install -D prettier prettier-plugin-tailwindcss

Common Dependencies Table

Package	Purpose	Installation
`next-auth`	Authentication	`npm install next-auth`
`@prisma/client`	Database ORM	`npm install @prisma/client`
`react-hook-form`	Form management	`npm install react-hook-form`
`@tanstack/react-query`	Data fetching & caching	`npm install @tanstack/react-query`
`zod`	Schema validation	`npm install zod`

Environment Variables

Configure your environment variables for different environments.

Create Environment Files

# Create local environment file
touch .env.local

# For production
touch .env.production

# For development (optional)
touch .env.development

Example .env.local

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

# Authentication
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# API Keys (client-side - prefix with NEXT_PUBLIC_)
NEXT_PUBLIC_API_URL="https://api.example.com"
NEXT_PUBLIC_STRIPE_KEY="pk_test_xxxxx"

# Server-side only (no prefix)
STRIPE_SECRET_KEY="sk_test_xxxxx"
EMAIL_SERVER="smtp://user:password@smtp.example.com:587"

Important:

Only variables prefixed with NEXT_PUBLIC_ are accessible in the browser
Never commit .env.local to version control
Create a .env.example file for documentation

Loading Priority

.env.local (highest priority, ignored by git)
.env.development or .env.production
.env (lowest priority)

Development Server

Start Development Server

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

# Or with custom port
npm run dev -- -p 3001

# Or using turbopack (faster)
npm run dev -- --turbo

Your app will automatically open in the browser at http://localhost:3000

Development Features

Fast Refresh: Instant feedback on edits (preserves component state)
Error Overlay: Helpful error messages with code snippets
TypeScript: Real-time type checking in the terminal
Hot Module Replacement: Updates without full page reload

Available Scripts

Command	Description
`npm run dev`	Starts development server with Fast Refresh
`npm run build`	Creates optimized production build
`npm start`	Starts production server (requires build first)
`npm run lint`	Runs ESLint to check code quality
`npm run type-check`	Runs TypeScript type checking (if configured)

Production Build & Deployment

Build for Production

# Create optimized production build
npm run build

# Start production server
npm start

Build Output

The build process creates:

.next/ folder with optimized production code
Static HTML for pages (when possible)
Optimized JavaScript bundles
Pre-rendered pages and assets

Deployment Options

Vercel (Recommended)

Built by the creators of Next.js

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Deploy to Vercel →

Netlify

Easy deployment with Git integration

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

Deploy to Netlify →

Docker

Self-hosted with containers

# Build Docker image
docker build -t my-nextjs-app .

# Run container
docker run -p 3000:3000 my-nextjs-app

Node.js Server

Deploy to any Node.js hosting

# Build and start
npm run build
npm start

Static Export: For static hosting, run next build with output: 'export' in next.config.js

Environment Variables for Production

Don't forget to set environment variables on your hosting platform:

Vercel: Settings → Environment Variables
Netlify: Site settings → Environment variables
Docker: Use --env-file or -e flags

Installation Guide