Node.js i npm - Fundamenty

Witaj @name! 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
2. Zobaczysz dwa przyciski:
   • LTS (Long Term Support) - stabilna wersja ← Wybierz tę!
   • Current - najnowsza, ale mniej stabilna
3. Kliknij LTS i pobierz instalator

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):

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

Krok 3: Weryfikacja

Otwórz terminal w Cursorze (Cmd/Ctrl + `) i wpisz:

1node --version

Powinieneś zobaczyć coś jak:

v20.10.0

lub wyższą wersję.

Sprawdź npm:

1npm --version

Powinieneś zobaczyć:

10.2.3

lub wyższą.

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:

1npm install

To pobiera wszystkie biblioteki wymienione w

package.json

.

2. npm run dev - Development server

To uruchamia serwer deweloperski Next.js:

1npm 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 deploym entu:

1npm run build

4. npx - Uruchamianie narzędzi bez instalacji

npx

pozwala uruchomić narzędzia bez globalnej instalacji:

1npx 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
• ℹ️ Metadata (autor, opis, licencja)

Przykład

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 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! 🚀