Jak podpiąć domenę pod stronę z Claude Code — Vercel, GitHub i darmowa baza danych krok po kroku

Dlaczego Vercel to najlepszy hosting dla stron zrobionych w Claude Code

Jeśli zbudowałeś stronę lub aplikację przy pomocy Claude Code, z dużym prawdopodobieństwem dostałeś projekt w Next.js. To nie przypadek — Claude domyślnie sięga po Next.js, bo to framework stworzony i utrzymywany przez Vercel. A Vercel to platforma hostingowa zaprojektowana dokładnie pod ten stack. Połączenie jest tak naturalne, że cały proces od kodu do działającej domeny zajmuje mniej niż 30 minut — nawet jeśli nigdy wcześniej nie deployowałeś żadnej strony.

Vercel działa na modelu serverless — nie wynajmujesz serwera, nie konfigurujesz nginxa, nie martwiasz się certyfikatami SSL. Wgrywasz kod, Vercel buduje projekt i serwuje go z globalnej sieci CDN. Certyfikat HTTPS jest automatyczny i bezpłatny. Każdy push na GitHuba generuje preview deployment z unikalnym URLem, zanim cokolwiek trafi na produkcję. Darmowy plan (Hobby) jest wystarczający dla zdecydowanej większości projektów osobistych, portfolio i stron firmowych.

Alternatywą są Netlify, Railway, Render czy Fly.io — wszystkie działają podobnie i obsługują Next.js. Ale Vercel ma jedną przewagę nie do podważenia: Next.js to ich własny framework. Wsparcie jest natywne, edge functions działają bez dodatkowej konfiguracji, a nowe funkcje Next.js są dostępne na Vercelu natychmiast po premierze. Jeśli nie masz powodu, żeby wybrać inaczej — wybierz Vercel.

Krok 1 — Wgraj projekt na GitHub zanim cokolwiek zrobisz na Vercelu

Vercel nie przyjmuje plików bezpośrednio — deployuje z repozytorium. GitHub jest tu standardem, choć Vercel obsługuje też GitLab i Bitbucket. Jeśli jeszcze nie masz konta na GitHub, stwórz je na github.com — to bezpłatne i zajmie dwie minuty.

Jeśli Claude Code pracował w twoim lokalnym katalogu, projekt jest już na dysku. Teraz potrzebujesz go wysłać na GitHub. Otwórz terminal w folderze projektu i wykonaj po kolei: git init inicjuje repozytorium lokalnie. git add . dodaje wszystkie pliki do staging area. git commit -m "init" tworzy pierwszy commit. Następnie wejdź na github.com, kliknij "New repository", nadaj mu nazwę i skopiuj komendę git remote add origin z adresem swojego repo — wykonaj ją w terminalu. Na koniec git push -u origin main wyśle kod na GitHub.

Jeden plik musisz sprawdzić zanim to zrobisz — .gitignore. Powinien zawierać przynajmniej node_modules, .next i .env.local. Ten ostatni wpis jest krytyczny: plik .env.local zawiera klucze API, hasła do bazy danych i inne tajne dane. Nigdy nie może trafić na publiczne repozytorium. Claude Code zazwyczaj tworzy poprawny .gitignore automatycznie, ale zawsze warto to sprawdzić przed pierwszym pushem.

Krok 2 — Pierwszy deploy na Vercel w pięciu kliknięciach

Wejdź na vercel.com i zarejestruj się używając konta GitHub — to jeden przycisk, żadnych formularzy. Po zalogowaniu kliknij "Add New Project". Vercel poprosi o dostęp do twoich repozytoriów — możesz dać dostęp do wszystkich lub wybrać konkretne. Znajdź projekt, który właśnie wgrałeś na GitHub, i kliknij "Import".

Vercel automatycznie wykrywa framework — jeśli to Next.js, zobaczy to bez żadnej konfiguracji z Twojej strony. Komenda build (next build), katalog wyjściowy i root directory są ustawiane automatycznie. Jedyne, co musisz zrobić na tym etapie, to uzupełnić zmienne środowiskowe jeśli projekt ich wymaga — o tym za chwilę. Kliknij "Deploy" i poczekaj około minuty. Vercel zbuduje projekt i da Ci automatycznie wygenerowany URL w domenie vercel.app — coś w stylu twoj-projekt.vercel.app. Strona już działa. Teraz trzeba podpiąć własną domenę.

Krok 3 — Jak podpiąć własną domenę pod Vercel

W panelu Vercela wejdź w swój projekt, przejdź do zakładki "Settings", a potem "Domains". Kliknij "Add" i wpisz swoją domenę — na przykład mojafirma.pl. Vercel natychmiast pokaże Ci, co musisz skonfigurować po stronie DNS u swojego rejestratora domen. To najważniejszy krok i największe źródło pomyłek — dlatego opiszę go dokładnie.

Vercel poprosi cię o dodanie rekordu DNS. W przypadku domeny głównej (mojafirma.pl) będzie to rekord A wskazujący na IP Vercela (76.76.21.21) lub rekord ALIAS/ANAME wskazujący na cname.vercel-dns.com — zależy od możliwości rejestratora. W przypadku subdomeny (www.mojafirma.pl albo app.mojafirma.pl) będzie to rekord CNAME wskazujący na cname.vercel-dns.com. Dokładne wartości Vercel pokazuje wprost w panelu — nie musisz ich zapamiętywać.

Jeśli chcesz obsługiwać zarówno mojafirma.pl jak i www.mojafirma.pl, dodaj obie domeny w Vercelu. Możesz ustawić jedną jako główną (primary) i przekierować drugą automatycznie. Vercel robi to jednym togglem.

Krok 4 — Konfiguracja DNS u rejestratora — OVH, nazwa.pl, home.pl, GoDaddy

DNS konfiguruje się w panelu firmy, u której kupiłeś domenę. Każdy rejestrator wygląda inaczej, ale logika jest wszędzie taka sama — szukasz sekcji o nazwie "Strefa DNS", "Zarządzanie DNS" lub po prostu "DNS".

W OVH wejdź w panel klienta, wybierz domenę, kliknij zakładkę "Strefa DNS". Dodaj nowy rekord przyciskiem "Dodaj wpis". Wybierz typ (A lub CNAME), wpisz wartości podane przez Vercel i zapisz. W nazwa.pl znajdziesz zarządzanie DNS w sekcji "Domeny" po wybraniu konkretnej domeny — zakładka "DNS". W home.pl to sekcja "Moje usługi" → "Domeny" → "Zarządzaj" → "Edytuj strefę DNS". W GoDaddy wejdź w "My Products", wybierz domenę i kliknij "DNS".

Po zapisaniu zmian DNS musisz poczekać na propagację — może to potrwać od kilku minut do 48 godzin, choć w praktyce większość zmian jest widoczna w ciągu 15–30 minut. Vercel w swoim panelu na bieżąco pokazuje status weryfikacji domeny. Gdy pojawi się zielony znacznik — domena działa, certyfikat SSL jest automatycznie wystawiony i aktywny.

Darmowa baza danych dla aplikacji z Claude Code — Supabase, Neon i PlanetScale

Większość stron zrobionych w Claude Code, które wymagają przechowywania danych — formularze kontaktowe, konta użytkowników, treści CMS — potrzebuje bazy danych. Dobra wiadomość: najlepsze platformy mają hojne darmowe plany, które wystarczają do startu i przez długi czas potem.

Supabase to najpopularniejszy wybór dla projektów Next.js i to właśnie ten stos Claude Code generuje najchętniej. Darmowy plan (Free) daje Ci PostgreSQL z 500 MB miejsca, autentykację użytkowników gotową do użycia, storage na pliki (1 GB), edge functions i wbudowany panel administracyjny. Projekt na Free jest aktywny tak długo, jak regularnie z niego korzystasz — po dwóch tygodniach bez aktywności Supabase usypia projekt, ale wystarczy jedno kliknięcie żeby go obudzić. Zakładasz konto na supabase.com, tworzysz nowy projekt, kopiujesz URL bazy i klucz API do zmiennych środowiskowych w Vercelu — gotowe.

Neon to PostgreSQL serverless — baza uruchamia się na żądanie i usypia gdy nie jest używana, co oznacza, że darmowy plan (0,5 GB storage) jest praktycznie nieograniczony dla małego ruchu. Neon ma natywną integrację z Vercel dostępną w Vercel Marketplace jednym kliknięciem — to najprostsza możliwa konfiguracja. Jeśli projekt robi Claude Code w oparciu o Drizzle ORM, Neon jest naturalnym wyborem.

PlanetScale to MySQL serverless od twórców Vitess (technologia używana w YouTube). Darmowy plan Hobby daje 5 GB storage i obsługuje do 1 miliarda odczytów miesięcznie — z dużym zapasem dla większości projektów. PlanetScale wyróżnia się systemem branchy dla schematu bazy danych — zmiany w strukturze tabel wprowadzasz jak kod, z pull requestami i review. Jeśli Claude Code wygenerował projekt z Prisma ORM, PlanetScale jest naturalnym partnerem.

Dla projektów niewymagających relacyjnej bazy danych — prosta kolekcja danych, liczniki, sesje — sprawdzi się Upstash (Redis serverless, darmowy plan 10 000 komend dziennie) albo Vercel KV (Redis zintegrowany bezpośrednio z Vercel, 30 MB free) lub Vercel Blob do przechowywania plików (darmowe 500 MB).

Zmienne środowiskowe (.env) — jak bezpiecznie przenieść je do Vercela

Claude Code tworzy plik .env.local z kluczami API, hasłami i innymi danymi, których strona potrzebuje do działania — URL bazy danych, klucz Supabase, API key do Resend czy reCAPTCHA. Ten plik nigdy nie idzie na GitHub (jest w .gitignore), więc Vercel go nie widzi. Musisz te wartości wprowadzić ręcznie w panelu Vercela.

W projekcie na Vercelu wejdź w "Settings" → "Environment Variables". Dla każdej zmiennej z pliku .env.local kliknij "Add New", wpisz nazwę (np. NEXT_PUBLIC_SUPABASE_URL) i wartość, wybierz środowiska (Production, Preview, Development) i zapisz. Zmienne zaczynające się od NEXT_PUBLIC_ są dostępne po stronie przeglądarki — wszystkie pozostałe są widoczne tylko po stronie serwera, co jest bezpieczniejsze dla kluczy API.

Po dodaniu zmiennych środowiskowych musisz wykonać nowy deploy — Vercel nie restartuje automatycznie przy zmianie ENV. Kliknij "Redeploy" w zakładce "Deployments" i wybierz ostatni commit. Tym razem build przebiegnie z dostępem do wszystkich kluczy i aplikacja powinna działać w pełni.

Automatyczny deploy przy każdym pushu — jak działa CI/CD w Vercelu

Jedną z największych wartości Vercela jest automatyzacja, której nie musisz konfigurować — po prostu działa. Gdy połączysz repozytorium GitHub z projektem Vercel, każdy push na dowolny branch automatycznie generuje deployment. Push na branch main (lub master) idzie na produkcję i aktualizuje Twoją domenę. Push na dowolny inny branch generuje preview deployment z unikalnym URLem — możesz sprawdzić jak wygląda zmiana zanim wpłynie na produkcję.

Dla projektów robionych z Claude Code oznacza to workflow bez żadnego DevOps: poprawiasz coś lokalnie, Claude Code nanosi zmiany, robisz git add . && git commit -m "poprawka" && git push i w ciągu minuty zmiana jest na żywo. Żadnego FTP, żadnego SSH, żadnego ręcznego uploadowania plików.

Co jest za darmo, a za co zapłacisz — limity Vercel Hobby 2026

Darmowy plan Vercel (Hobby) jest szczodry jak na hosting, ale ma swoje granice. Dostajesz 100 GB transferu miesięcznie, 6 000 minut build time, 500 000 wywołań Edge Functions dziennie i nieograniczoną liczbę projektów. Dla typowej strony firmowej, portfolio, bloga czy małej aplikacji te limity są praktycznie nieosiągalne.

Gdzie się potykasz o limity? Projekty komercyjne na darmowym planie są formalnie niedozwolone — Vercel wymaga planu Pro (20 dolarów miesięcznie) jeśli projektem zarabiasz. Serverless Functions mają limit 10 sekund czasu wykonania na planie Hobby (60 sekund na Pro). Brak ochrony hasłem dla preview deployments — jeśli chcesz ukryć preview przed klientem, potrzebujesz Pro. I brak zespołów — Hobby to jedno konto, jeden użytkownik.

Plan Pro za 20 dolarów miesięcznie usuwa większość ograniczeń: 1 TB transferu, 24 000 minut build, ochrona password dla preview, wsparcie dla środowisk Staging. Dla poważnych projektów to rozsądna cena. Plan Enterprise to oddzielne negocjacje dla dużych organizacji.

Najczęstsze błędy przy pierwszym deploymencie strony z Claude Code

Pierwsza rzecz, która psuje deploy, to brakujące zmienne środowiskowe. Aplikacja buduje się lokalnie bo ma plik .env.local, ale na Vercelu build wylatuje z błędem undefined is not an object albo połączenie z bazą danych nie działa. Zawsze sprawdź, czy wszystkie zmienne z .env.local masz dodane w panelu Vercel przed pierwszym deployem.

Drugi częsty problem to błędy TypeScript, które Claude Code czasem zostawia jako ostrzeżenia — lokalnie się buduje, ale Vercel domyślnie traktuje błędy TS jako blokujące build. Rozwiązanie to albo poprawienie błędów (lepiej), albo dodanie ignoreBuildErrors: true w next.config.ts (szybciej, ale to dług techniczny). Claude Code poprawi błędy TS jeśli go o to poprosisz.

Trzeci błąd to ścieżki do plików case-sensitive. Na Windowsie (gdzie Claude Code zazwyczaj pracuje) import import Component from "./component" zadziała nawet jeśli plik nazywa się Component.tsx. Na serwerach Vercela (Linux) ta sama operacja zwróci błąd 404. Zawsze używaj dokładnie tych samych wielkich i małych liter w importach co w nazwach plików.

Czwarty problem to duże pliki w repozytorium — zdjęcia, fonty, wideo wgrane bezpośrednio do public/. GitHub ma limit 100 MB na plik, a duże repo spowalnia każdy deploy. Pliki medialne trzymaj w Vercel Blob, Cloudinary lub zewnętrznym CDN, a w kodzie odwołuj się do ich URL.

Własna domena na Vercelu z poczty e-mail — MX rekordy i Google Workspace

Wielu właścicieli stron chce mieć nie tylko mojafirma.pl jako stronę, ale też kontakt@mojafirma.pl jako adres email. Vercel zarządza stroną, ale pocztą zarządza osobna usługa — Google Workspace, Zoho Mail, ProtonMail for Business albo po prostu forwarding przez domenę.

Jeśli przenosisz nameservery do Vercela, musisz dodać rekordy MX ręcznie w panelu DNS Vercela — inaczej poczta przestanie działać. Rekordy MX otrzymasz od dostawcy poczty. Jeśli zostawiasz DNS u rejestratora i dodajesz tylko rekord A lub CNAME do Vercela, rekordy MX zostają nienaruszone i poczta działa bez żadnych zmian.

Dla nowych domen bez poczty najprostszą opcją jest Zoho Mail — darmowy plan dla jednej domeny, do 5 kont, 5 GB storage. Konfiguracja zajmuje 10 minut i wymaga dodania kilku rekordów MX i TXT do strefy DNS. Alternatywa to Resend — jeśli Claude Code wygenerował formularz kontaktowy z API do wysyłki maili, Resend ma darmowy plan 3 000 maili miesięcznie i działa przez API bez konfiguracji serwera pocztowego.

Cały proces od kodu do działającej domeny — podsumowanie w 8 krokach

Zanim zaczniesz, upewnij się że masz: gotowy projekt z Claude Code na dysku, kupioną domenę u dowolnego rejestratora, konto GitHub i przeglądarkę. To wszystko czego potrzebujesz.

Krok pierwszy — sprawdź .gitignore i upewnij się że .env.local i node_modules są wykluczone. Krok drugi — zainicjuj repozytorium Git i wypchnij projekt na nowe repo na GitHub. Krok trzeci — wejdź na vercel.com, zaloguj się przez GitHub i zaimportuj repozytorium. Krok czwarty — dodaj zmienne środowiskowe z pliku .env.local w panelu Vercel przed kliknięciem Deploy. Krok piąty — kliknij Deploy i poczekaj na zielony status. Twoja strona działa pod adresem *.vercel.app. Krok szósty — w zakładce Domains dodaj własną domenę i skopiuj wartości DNS. Krok siódmy — zaloguj się do panelu rejestratora domeny i dodaj podane rekordy A lub CNAME. Krok ósmy — poczekaj na propagację DNS (5–30 minut) i sprawdź czy zielony znacznik pojawił się w panelu Vercela. Certyfikat SSL aktywuje się automatycznie.

Jeśli projekt wymaga bazy danych — załóż konto na Supabase lub Neon, stwórz projekt, skopiuj URL połączenia do zmiennych środowiskowych w Vercelu i wykonaj redeploy. Cały stack — strona, domena, SSL, baza danych — za 0 złotych miesięcznie na start. Gdy projekt zacznie zarabiać, przejście na płatne plany jest kwestią jednego kliknięcia.