Node.js i npm - Fundamenty

Witaj! Zanim zaczniemy budować aplikacje z Next.js, musisz zainstalować dwa kluczowe narzędzia: Node.js i npm.

Co to jest Node.js?

Node.js to środowisko uruchomieniowe JavaScript poza przeglądarką. Dzięki niemu możesz uruchamiać kod JavaScript na swoim komputerze, nie tylko w przeglądarce.

Dlaczego Node.js jest ważny?

• Uruchamianie Next.js wymaga Node.js
• Instalowanie pakietów (bibliotek)
• Narzędzia deweloperskie (build tools)
• Development server (localhost)

Co to jest npm?

npm (Node Package Manager) to menedżer pakietów dla JavaScript. Pozwala instalować biblioteki i narzędzia stworzone przez innych programistów.

Przykłady pakietów npm:

• react - biblioteka do budowania UI
• next - framework Next.js
• tailwindcss - framework CSS
• Miliony innych...

Instalacja Node.js i npm

Node.js i npm są instalowane razem - jeden instalator, dwa narzędzia.

Krok 1: Pobierz instalator

1. Idź na: https://nodejs.org i kliknij Get Node.js®
2. Na stronie pobierania zostaw w menu wersję oznaczoną LTS (Long Term Support, dziś v24) ← Wybierz tę! Wersja Current (dziś v26) ma najnowsze funkcje, ale krótsze wsparcie.
3. Niżej, w części „Or get a prebuilt Node.js®”, kliknij przycisk z instalatorem dla swojego systemu (Windows: .msi, macOS: .pkg)

Krok 2: Zainstaluj

Windows:

• Kliknij dwukrotnie na .msi plik
• Kliknij "Next" → "Next" → "Install"
• Poczekaj ~1-2 minuty

Mac:

• Kliknij dwukrotnie na .pkg plik
• Kliknij "Continue" → "Install"
• Poczekaj ~1-2 minuty

Linux (Ubuntu/Debian):

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

Krok 3: Weryfikacja

Otwórz terminal w Cursorze (Ctrl + `, na Macu też Control, nie Cmd) i wpisz:

node --version

Powinieneś zobaczyć coś jak: v24.21.0 (aktualna wersja LTS). Next.js 16 wymaga co najmniej wersji 20.9.

Sprawdź npm:

npm --version

Powinieneś zobaczyć coś jak: 11.19.0 (npm dołączony do Node.js 24).

Jeśli widzisz wersje - gratulacje! Node.js i npm są zainstalowane.

Podstawowe komendy npm

Teraz, gdy masz npm, możesz instalować pakiety i uruchamiać projekty.

1. npm install - Instalacja pakietów

Gdy otworzysz istniejący projekt Next.js, pierwszym krokiem jest zainstalowanie zależności:

npm install

To pobiera wszystkie biblioteki wymienione w package.json.

2. npm run dev - Development server

To uruchamia serwer deweloperski Next.js:

npm run dev

Po tym, twoja aplikacja będzie dostępna na http://localhost:3000

3. npm run build - Budowanie do produkcji

To przygotowuje aplikację do wdrożenia:

npm run build

4. npx - Uruchamianie narzędzi bez instalacji

npx pozwala uruchomić narzędzia bez globalnej instalacji:

npx create-next-app@latest

To stworzy nowy projekt Next.js.

package.json - Serce projektu

Każdy projekt JavaScript ma plik package.json - to jak karta identyfikacyjna projektu.

Zawiera:

• Nazwę projektu
• Listę zależności (dependencies)
• Skrypty (scripts) - komendy npm
• Metadane (autor, opis, licencja)

Przykład package.json:

{
  "name": "krakens-call",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.3.8",
    "react": "19.2.8",
    "react-dom": "19.2.8"
  }
}

Scripts to komendy, które możesz uruchomić przez npm run:

• npm run dev → uruchamia next dev
• npm run build → uruchamia next build

node_modules - Folder z bibliotekami

Gdy uruchomisz npm install, npm stworzy folder node_modules z wszystkimi zainstalowanymi pakietami.

WAŻNE:

• node_modules może mieć setki MB lub więcej
• NIE commituj node_modules do Git
• Dodaj node_modules/ do .gitignore
• Każda osoba pobiera projekt i uruchamia npm install

Podsumowanie

Node.js - środowisko do uruchamiania JavaScript npm - menedżer pakietów package.json - lista zależności i skryptów node_modules - folder z zainstalowanymi pakietami npm install - instaluje zależności npm run dev - uruchamia development server npx - uruchamia narzędzia bez instalacji

W następnym ćwiczeniu stworzymy pierwszy projekt Next.js!

Do zobaczenia!