Node.js and npm - Fundamentals

Welcome @name! Before we start building applications with Next.js, you need to install two key tools: Node.js and npm.

What is Node.js? 🟢

Node.js is a JavaScript runtime environment outside the browser. Thanks to it, you can run JavaScript code on your computer, not just in the browser.

Why is Node.js important?

• 🚀 Running Next.js requires Node.js
• 📦 Installing packages (libraries)
• 🛠️ Developer tools (build tools)
• ⚡ Development server (localhost)

What is npm? 📦

npm (Node Package Manager) is a package manager for JavaScript. It allows you to install libraries and tools created by other developers.

Examples of npm packages:

• react

  - library for building UI

• next

  - Next.js framework

• tailwindcss

  - CSS framework
• Millions more...

Installing Node.js and npm

Node.js and npm are installed together - one installer, two tools.

Step 1: Download the installer

1. Go to: https://nodejs.org
2. You'll see two buttons:
   • LTS (Long Term Support) - stable version ← Choose this one!
   • Current - latest, but less stable
3. Click LTS and download the installer

Step 2: Install

Windows:

• Double-click the

  .msi

  file
• Click "Next" → "Next" → "Install"
• Wait ~1-2 minutes

Mac:

• Double-click the

  .pkg

  file
• Click "Continue" → "Install"
• Wait ~1-2 minutes

Linux (Ubuntu/Debian):

1curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
2sudo apt-get install -y nodejs

Step 3: Verification

Open the terminal in Cursor (Cmd/Ctrl + `) and type:

1node --version

You should see something like:

v20.10.0

or a higher version.

Check npm:

1npm --version

You should see:

10.2.3

or higher.

If you see version numbers - congratulations! Node.js and npm are installed. 🎉

Basic npm commands

Now that you have npm, you can install packages and run projects.

1. npm install - Installing packages

When you open an existing Next.js project, the first step is to install dependencies:

1npm install

This downloads all libraries listed in

package.json

.

2. npm run dev - Development server

This starts the Next.js development server:

1npm run dev

After this, your application will be available at

http://localhost:3000

3. npm run build - Building for production

This prepares the application for deployment:

1npm run build

4. npx - Running tools without installation

npx

allows you to run tools without global installation:

1npx create-next-app@latest

This will create a new Next.js project.

package.json - The Heart of the Project

Every JavaScript project has a

package.json

file - it's like the project's ID card.

It contains:

• 📝 Project name
• 📦 List of dependencies
• 🛠️ Scripts - npm commands
• ℹ️ Metadata (author, description, license)

Example

package.json

:

1{
2  "name": "krakens-call",
3  "version": "1.0.0",
4  "scripts": {
5    "dev": "next dev",
6    "build": "next build",
7    "start": "next start"
8  },
9  "dependencies": {
10    "next": "14.0.0",
11    "react": "18.2.0",
12    "react-dom": "18.2.0"
13  }
14}

Scripts are commands you can run via

npm run

:

• npm run dev

  → runs

  next dev

• npm run build

  → runs

  next build

node_modules - The Libraries Folder

When you run

npm install

, npm creates a

node_modules

folder with all installed packages.

⚠️ IMPORTANT:

• node_modules

  can be hundreds of MB or more
• DO NOT commit

  node_modules

  to Git
• Add

  node_modules/

  to

  .gitignore

• Each person downloads the project and runs

  npm install

Summary 🎓

✅ Node.js - runtime for executing JavaScript ✅ npm - package manager ✅ package.json - list of dependencies and scripts ✅ node_modules - folder with installed packages ✅ npm install - installs dependencies ✅ npm run dev - starts development server ✅ npx - runs tools without installation

In the next exercise we'll create our first Next.js project!

See you there! 🚀