Installation

System Requirements

Before installing the tools, ensure your system meets these requirements:

• Node.js: Version 18.0 or higher
• npm: Version 8.0 or higher (comes with Node.js)
• Operating System: macOS, Windows, or Linux
• RAM: At least 4GB (8GB recommended for larger projects)

Installing Node.js

Node.js is the JavaScript runtime that powers modern web development tooling. Download it from the official website or use a version manager.

# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Install latest LTS version of Node.js
nvm install --lts
nvm use --lts

# Verify installation
node --version  # Should output v18.x.x or higher
npm --version   # Should output 8.x.x or higher

Creating Your First Project

With Node.js installed, you can scaffold a new Next.js project using Create Next App. This sets up everything you need including TypeScript, Tailwind CSS, and ESLint.

# Create a new Next.js project
npx create-next-app@latest my-app --typescript --tailwind --eslint --app

# Navigate to the project directory
cd my-app

# Start the development server
npm run dev

Understanding the Project Structure

Once created, your project will have the following structure:

my-app/
├── src/
│   └── app/
│       ├── layout.tsx    # Root layout
│       ├── page.tsx      # Home page
│       └── globals.css   # Global styles
├── public/               # Static assets
├── next.config.ts        # Next.js configuration
├── tsconfig.json         # TypeScript config
├── tailwind.config.ts    # Tailwind CSS config
└── package.json          # Dependencies

VS Code Setup

VS Code is the recommended editor for JavaScript/TypeScript development. Install these extensions for the best experience:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}