Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Instalacja i konfiguracja środowiska programistycznego

W Metropolii Quantum, zanim inżynier może rozpocząć pracę nad systemami miasta, musi przygotować swoje biometryczne stanowisko kwantowe. Podobnie, jako programista Next.js, musisz najpierw skonfigurować swoje środowisko deweloperskie. W tym module nauczysz się, jak zainstalować i skonfigurować wszystkie niezbędne narzędzia do tworzenia aplikacji w Next.js 15.

Wymagania systemowe

Zanim rozpoczniemy instalację, upewnij się, że Twój komputer spełnia minimalne wymagania. Podobnie jak kwantowe terminale w Metropolii Quantum wymagają określonych specyfikacji energetycznych, tak środowisko Next.js potrzebuje odpowiednich wersji oprogramowania:

  • Node.js - wersja 18.17 lub nowsza
  • macOS, Windows (w tym WSL) lub Linux
  • Minimum 1GB RAM (zalecane 4GB lub więcej dla większych projektów)
  • Edytor kodu - zalecane Visual Studio Code z rozszerzeniami dla React/Next.js

Instalacja Node.js i npm

Node.js to jak generator energii kwantowej dla Twojego środowiska deweloperskiego - zasila wszystkie procesy i narzędzia.

Windows i macOS

  1. Odwiedź oficjalną stronę Node.js
  2. Pobierz i zainstaluj najnowszą wersję LTS (Long Term Support)
  3. Sprawdź instalację, otwierając terminal i wpisując:
1node -v
2npm -v

Powinieneś zobaczyć numery wersji Node.js i npm (Node Package Manager).

Linux (Ubuntu/Debian)

1sudo apt update
2sudo apt install nodejs npm
3# Alternatywnie, aby uzyskać najnowszą wersję:
4curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
5sudo apt install nodejs

Zarządzanie wersjami Node.js

Dla bardziej zaawansowanych użytkowników, podobnie jak inżynierowie Metropolii Quantum używają systemów wirtualizacji do testowania różnych konfiguracji energetycznych, możesz użyć narzędzi do zarządzania wersjami Node.js:

  • nvm (Node Version Manager) dla macOS/Linux
  • nvm-windows dla Windows
1# Instalacja nvm (macOS/Linux)
2curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
3
4# Instalacja określonej wersji Node.js
5nvm install 18.17.0
6nvm use 18.17.0

Instalacja edytora kodu

W Metropolii Quantum, holograficzne edytory kodu są zintegrowane z neuronowymi implantami inżynierów. Na szczęście w naszym świecie wystarczy zainstalować dobry edytor kodu na komputerze. Visual Studio Code to obecnie jeden z najpopularniejszych edytorów dla programistów Next.js.

  1. Pobierz i zainstaluj Visual Studio Code
  2. Zainstaluj przydatne rozszerzenia:
    • ES7+ React/Redux/React-Native snippets - szablony kodu
    • ESLint - analiza statyczna kodu
    • Prettier - formatowanie kodu
    • Tailwind CSS IntelliSense (jeśli planujesz używać Tailwind CSS)
    • GitHub Copilot (opcjonalnie) - asystent AI dla programistów

Tworzenie nowego projektu Next.js

Teraz, gdy masz już zainstalowane niezbędne narzędzia, możesz stworzyć swój pierwszy projekt Next.js 15. Vercel udostępnia wygodne narzędzie 

create-next-app
, które automatycznie konfiguruje projekt z najlepszymi praktykami.

1npx create-next-app@latest my-quantum-app

Podczas instalacji zostaniesz poproszony o odpowiedź na kilka pytań konfiguracyjnych:

1Would you like to use TypeScript? Yes
2Would you like to use ESLint? Yes
3Would you like to use Tailwind CSS? Yes
4Would you like to use src/ directory? Yes
5Would you like to use App Router? (recommended) Yes
6Would you like to customize the default import alias (@/*)? No

Zalecamy odpowiedź "Yes" na większość pytań, zwłaszcza dotyczących TypeScript i App Router, które są kluczowe dla nowoczesnych aplikacji Next.js 15.

Po zakończeniu instalacji, przejdź do katalogu projektu i uruchom serwer deweloperski:

1cd my-quantum-app
2npm run dev

Twoja aplikacja powinna być teraz dostępna pod adresem http://localhost:3000.

Alternatywne metody instalacji

Yarn

Jeśli wolisz używać Yarn zamiast npm:

1npm install -g yarn
2yarn create next-app my-quantum-app

pnpm

PNPM to alternatywny menedżer pakietów, który może zaoszczędzić miejsce na dysku:

1npm install -g pnpm
2pnpm create next-app my-quantum-app

Konfiguracja TypeScript

TypeScript to jak system bezpieczeństwa w Metropolii Quantum - zapobiega błędom przed ich wystąpieniem. Next.js ma wbudowane wsparcie dla TypeScript, a najnowsze wersje 

create-next-app
skonfigurują go automatycznie. Jeśli tworzysz projekt ręcznie, możesz dodać TypeScript później:

1touch tsconfig.json
2npm run dev

Next.js wykryje plik 

tsconfig.json
i zaproponuje instalację niezbędnych zależności.

Struktura projektu Next.js 15 z App Router

Po utworzeniu nowego projektu, zobaczysz następującą strukturę katalogów:

1my-quantum-app/
2├── node_modules/      # Zainstalowane zależności
3├── public/            # Statyczne pliki (obrazy, czcionki)
4├── src/               # Kod źródłowy aplikacji
5│   ├── app/           # Katalog App Router
6│   │   ├── layout.tsx # Główny układ
7│   │   ├── page.tsx   # Strona główna
8│   │   └── globals.css # Style globalne
9├── .eslintrc.json     # Konfiguracja ESLint
10├── next.config.js     # Konfiguracja Next.js
11├── package.json       # Zależności i skrypty
12├── postcss.config.js  # Konfiguracja PostCSS
13├── tailwind.config.js # Konfiguracja Tailwind CSS
14└── tsconfig.json      # Konfiguracja TypeScript

Konfiguracja ESLint

ESLint to jak system monitorowania jakości powietrza w Metropolii Quantum - dba o czystość i jakość kodu. Next.js zawiera podstawową konfigurację ESLint, ale możesz ją rozszerzyć:

1npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Następnie zaktualizuj plik 

.eslintrc.json
:

1{
2  "extends": [
3    "next/core-web-vitals",
4    "prettier"
5  ],
6  "plugins": ["prettier"],
7  "rules": {
8    "prettier/prettier": "error",
9    "no-unused-vars": "warn"
10  }
11}

Konfiguracja Prettier

Prettier to jak automatyczny system organizacji przestrzeni w Metropolii Quantum - dba o spójny wygląd kodu. Utwórz plik 

.prettierrc
w katalogu projektu:

1{
2  "semi": true,
3  "trailingComma": "all",
4  "singleQuote": true,
5  "printWidth": 80,
6  "tabWidth": 2
7}

Konfiguracja VSCode dla projektu

Aby edytor VS Code był w pełni zintegrowany z Twoim projektem, utwórz katalog 

.vscode
w katalogu głównym projektu, a następnie plik 
settings.json
wewnątrz:

1{
2  "editor.formatOnSave": true,
3  "editor.defaultFormatter": "esbenp.prettier-vscode",
4  "editor.codeActionsOnSave": {
5    "source.fixAll.eslint": true
6  },
7  "typescript.tsdk": "node_modules/typescript/lib",
8  "typescript.enablePromptUseWorkspaceTsdk": true
9}

Konfiguracja zmiennych środowiskowych

W Metropolii Quantum, każdy system ma swoje specjalne parametry dostępu. W Next.js używamy zmiennych środowiskowych do przechowywania wrażliwych informacji i konfiguracji specyficznych dla środowiska. Utwórz plik 

.env.local
w katalogu głównym projektu:

1# Przykładowe zmienne środowiskowe
2DATABASE_URL=your_database_url
3API_KEY=your_api_key
4NEXT_PUBLIC_API_URL=https://api.example.com

Zmienne z prefiksem 

NEXT_PUBLIC_
będą dostępne również w przeglądarce.

Testowanie instalacji

Aby upewnić się, że wszystko działa prawidłowo, zmodyfikuj trochę kod w pliku 

src/app/page.tsx
i zobacz, czy zmiany są widoczne w przeglądarce. Jeśli tak, Twoje środowisko jest poprawnie skonfigurowane!

Najczęstsze problemy i rozwiązania

Problem z portami

Jeśli port 3000 jest już zajęty, możesz uruchomić Next.js na innym porcie:

1npm run dev -- -p 3001

Problemy z Node.js

Jeśli napotkasz błędy związane z kompatybilnością wersji Node.js, upewnij się, że używasz wymaganej wersji:

1node -v
2# Jeśli wersja jest za stara, zaktualizuj Node.js lub użyj nvm

Problemy z TypeScript

Jeśli napotkasz błędy TypeScript, sprawdź czy masz zainstalowane odpowiednie typy:

1npm install --save-dev @types/react @types/node

Zaawansowana konfiguracja

Dla bardziej zaawansowanych projektów, podobnie jak zaawansowane systemy w Metropolii Quantum wymagają dodatkowej konfiguracji, możesz dostosować swoje środowisko Next.js:

Dodanie aliasów ścieżek

Zmodyfikuj 

tsconfig.json
, aby dodać aliasy ścieżek:

1{
2  "compilerOptions": {
3    "baseUrl": ".",
4    "paths": {
5      "@/components/*": ["src/components/*"],
6      "@/lib/*": ["src/lib/*"],
7      "@/styles/*": ["src/styles/*"],
8      "@/utils/*": ["src/utils/*"]
9    }
10  }
11}

Konfiguracja testów

Dodaj Jest lub React Testing Library do projektu:

1npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Utwórz plik 

jest.config.js
:

1const nextJest = require('next/jest');
2
3const createJestConfig = nextJest({
4  dir: './',
5});
6
7const customJestConfig = {
8  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
9  testEnvironment: 'jest-environment-jsdom',
10};
11
12module.exports = createJestConfig(customJestConfig);

Następnie utwórz plik 

jest.setup.js
:

1import '@testing-library/jest-dom';

Podsumowanie

Gratulacje! Tak jak inżynier w Metropolii Quantum, który ukończył konfigurację swojego stanowiska roboczego, Ty również masz teraz w pełni skonfigurowane środowisko deweloperskie dla Next.js 15. Twoje holograficzne terminale (czyli edytor kodu) są gotowe, reaktor kwantowy (Node.js) jest uruchomiony, a systemy bezpieczeństwa (TypeScript, ESLint) są aktywne.

W następnym module dowiemy się więcej o inicjalizacji projektu i dostępnych starterach, które pozwolą Ci szybciej rozpocząć pracę nad konkretnymi typami aplikacji.

Przejdź do CodeWorlds→