Pierwszy deploy aplikacji Next.js#

Cel: aplikacja w sieci w kilka minut#

W tej lekcji przeprowadzimy projekt Next.js od repozytorium do publicznego adresu. Pokażemy dwie drogi: przez panel Vercel (zalecana na start) i przez Vercel CLI.

Wariant A — import z GitHub (panel)#

1. Wejdź na vercel.com i zaloguj się kontem GitHub organizacji ProfessNet.
2. Add New → Project.
3. Wybierz repozytorium z aplikacją Next.js.
4. Vercel automatycznie wykryje framework (Next.js) i ustawi build.
5. Kliknij Deploy.

Vercel wykrywa ustawienia sam, ale warto je znać:

Ustawienie	Wartość dla Next.js
Framework Preset	Next.js
Build Command	next build
Output Directory	.next (zarządzane automatycznie)
Install Command	npm install
Node.js Version	20.x (lub zgodna z projektem)

Po zakończeniu buildu dostajesz adres typu nazwa-projektu.vercel.app.

Wariant B — Vercel CLI#

CLI przydaje się do szybkich deployów i automatyzacji.

# Instalacja globalna
npm i -g vercel

# Logowanie
vercel login

# Pierwszy deploy z katalogu projektu (interaktywne pytania)
vercel

# Deploy bezpośrednio na produkcję
vercel --prod

Pierwsze vercel zadaje pytania (scope, nazwa projektu, katalog) i tworzy plik .vercel/project.json wiążący folder z projektem na platformie.

Konfiguracja przez vercel.json (opcjonalnie)#

Dla niestandardowych ustawień użyj pliku w korzeniu repo:

{
  "framework": "nextjs",
  "regions": ["fra1"],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

Wskazówka: Region fra1 (Frankfurt) to dobry wybór dla użytkowników z Polski — bliżej niż domyślny region w USA, więc funkcje serverless odpowiadają szybciej.

Sprawdzenie deployu#

Po zakończeniu:

1. Otwórz wygenerowany URL — aplikacja powinna działać.
2. W panelu projektu zajrzyj do zakładki Deployments — widać status, czas buildu i logi.
3. Każdy kolejny push do main automatycznie wywoła nowy deploy produkcyjny.

Gdy build się wywali#

Najczęstsze przyczyny: brak zmiennej środowiskowej, błąd typów TypeScript (next build przerywa na błędach typów) albo niezgodna wersja Node. Logi buildu w panelu pokazują dokładną linię. Lokalnie odtworzysz to przez npm run build — jeśli przejdzie u Ciebie, przejdzie i na Vercelu.

Podsumowanie#

Pierwszy deploy to: połącz repo, potwierdź wykryte ustawienia Next.js, kliknij Deploy. Od tej chwili każdy push do main to nowy deploy produkcyjny. CLI daje tę samą moc z terminala i otwiera drogę do automatyzacji.