🚀 NextJS Setup Guide 2025

Welcome to your NextJS development journey! This guide walks you through setting up a professional NextJS environment on Windows, Linux, and macOS.

💻 Minimum Hardware Requirements

WARNING

Purpose: Ensure your system can run modern web development tools smoothly.

• 🔲 Processor: Intel Core i5/AMD Ryzen 5/Apple M1 or better
• 🧮 RAM: 8GB minimum (16GB recommended)
• 💾 Storage: 256GB SSD (or faster)
• 🖥️ Display: 1920x1080 resolution or higher
• 🌐 Internet: Broadband connection for package installations and updates

⚠️ Insufficient hardware may slow down build times and development tasks.

🛠️ VS Code Setup

Purpose: VS Code offers a lightweight yet powerful IDE for NextJS development.

📥 Installation Steps

1. Download Visual Studio Code
2. Install:
   • Windows: Add "Open with Code" to Explorer context menu; add to PATH.
   • Linux: Install via your package (deb, rpm, or snap) and ensure it's in PATH.
   • macOS: Drag to Applications; run Cmd+Shift+P and type “Shell Command: Install” to add code to PATH.
3. ✅ Verify:

   code --version

🌟 GitHub Account & Git Setup

GitHub Account

1. 🔗 Visit GitHub Signup
2. 📝 Complete your profile and verify your email.

Git Installation

🪟 Windows:

1. Download Git for Windows
2. Install with default settings:
   • Use Git from Git Bash/Command Prompt
   • Set the initial branch to main
   • Enable Git Credential Manager

🐧 Linux (Ubuntu/Debian):

sudo apt update
sudo apt install git

🍎 macOS:

brew install git

🔄 Configure Git

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

🔐 SSH Key Setup

WARNING

🛡️ Security Steps

1. Generate SSH Key:

   ssh-keygen -t ed25519 -C "your.email@example.com"

2. Start SSH Agent:
   • Windows:

     eval $(ssh-agent -s)
     ssh-add C:\Users\YourUsername\.ssh\id_ed25519

   • Linux/macOS:

     eval "$(ssh-agent -s)"
     ssh-add ~/.ssh/id_ed25519

3. Copy Key to Clipboard:
   • Windows:

     clip < C:\Users\YourUsername\.ssh\id_ed25519.pub

   • Linux:

     cat ~/.ssh/id_ed25519.pub | xclip -selection clipboard

   • macOS:

     pbcopy < ~/.ssh/id_ed25519.pub

4. Add to GitHub:
   Go to GitHub Settings → SSH Keys → New SSH Key and paste your key.

⚡ Node.js & NextJS Setup

📥 Install Node.js

Choose one of these methods:

• Official Installer: Download from nodejs.org
• Using NVM (recommended):

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  nvm install --lts
  nvm use --lts

🏗️ Create a New NextJS App

1. Scaffold the Project:

   npx create-next-app@latest my-nextjs-app

2. Navigate & Start Development:

   cd my-nextjs-app
   npm run dev

   The app runs at http://localhost:3000.

🔄 Project Structure

Your project includes:

• pages/: Routes and view components.
• public/: Static assets.
• styles/: CSS and global styles.
• next.config.js: Configuration.

🧩 VS Code Extensions for NextJS

🛠️ Essential Extensions

Extension	Purpose	Link
📝 ESLint	Linting for JavaScript/TypeScript	Install
✨ Prettier	Code formatter	Install
🌐 Tailwind CSS IntelliSense	Autocompletion for Tailwind CSS	Install
👁️ GitLens	Enhanced Git capabilities	Install
📘 Markdown All in One	Markdown editing support	Install

🔷 Additional Recommended Extensions

Extension	Purpose	Link
🚀 Apollo GraphQL	GraphQL integration with Apollo Client	Install
🐳 Docker	Docker container management and integration	Install
☸️ Kubernetes	Kubernetes cluster management and YAML support	Install

⚡ Quick Install Command

code --install-extension dbaeumer.vscode-eslint && \
code --install-extension esbenp.prettier-vscode && \
code --install-extension bradlc.vscode-tailwindcss && \
code --install-extension eamodio.gitlens && \
code --install-extension yzhang.markdown-all-in-one && \
code --install-extension apollographql.vscode-apollo && \
code --install-extension ms-azuretools.vscode-docker && \
code --install-extension ms-kubernetes-tools.vscode-kubernetes-tools

⚙️ VS Code Configuration for NextJS

1. Open Settings JSON:
   • Windows/Linux: Ctrl+Shift+P
   • macOS: Cmd+Shift+P
   • Type “Preferences: Open User Settings (JSON)”
2. Apply Settings:

   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "files.trimTrailingWhitespace": true,
     "files.insertFinalNewline": true,
     "terminal.integrated.shellArgs.linux": ["-l"],
     "eslint.format.enable": true,
     "javascript.validate.enable": false,
     "typescript.validate.enable": false
   }

🔧 Additional Tools Installation

🔷 GraphQL Setup

• Install GraphQL CLI (optional):

  npm install -g graphql-cli

• Add GraphQL to your project (if needed):

  npm install graphql

• For advanced use: Consider Apollo or Relay for client/server solutions.

🐳 Docker Setup

• Download & Install:
  • Windows/macOS: Get Docker Desktop.
  • Linux (Ubuntu/Debian):

    sudo apt-get update
    sudo apt-get install docker-ce docker-ce-cli containerd.io

• Verify Installation:

  docker --version

☸️ Kubernetes Setup

• Install Minikube (local Kubernetes cluster):
  • Windows/macOS: Follow instructions at Minikube Start.
  • Linux:

    curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64
    sudo install minikube-linux-amd64 /usr/local/bin/minikube

• Verify Installation:

  minikube version

✅ Verification

🔍 Check Installation

# Node.js
node --version  # Should show the installed version

# NextJS App
cd my-nextjs-app
npm run dev    # Verify app runs at http://localhost:3000

# Git
git --version

# SSH (to GitHub)
ssh -T git@github.com  # Should confirm your SSH connection

🎉 Conclusion

You now have a complete NextJS development environment set up, plus installation steps for:

• 🛠️ GraphQL tools
• 🐳 Docker
• ☸️ Kubernetes

Happy coding!