Tworzenie strony wizytówki w Next.js

Strony wizytówki wyświetlają informacje przydatne dla odwiedzających — o właścicielu, jego portfolio i kontakcie. Jeśli nie chcesz pokazywać adresu e-mail w otwartej formie, możesz dodać formularz kontaktowy.

Budowa strony

1. 1.

   Przejdź w PowerShellu do folderu projektu i utwórz aplikację Next.js:

   D:cd D:\projektymkdir nextjscd nextjsnpx create-next-app@latest
2. 2.

   Ustaw nowo utworzony folder w Claude Desktop w Filesystem MCP — patrz poprzednia lekcja.

3. 3.

   Przejdź do Claude Desktop i napisz prompt, aby stworzyć stronę wizytówkę. Pamiętaj aby wskazać Clade, że ma korzystać z Filesystem MCP. Przykład promptu:

   Korzystając z filesystem MCP, stwórz stronę wizytówkę w NextJS. Potrzebuję cztery oddzielne strony: home, o mnie, portfolio i kontakt. Poniżej dane do wizytówki: Jan Kowalski. Full-stack developer. Projektuję i wdrażam aplikacje webowe — od backendu i integracji po interfejs użytkownika. O mnie Pracuję end-to-end: od analizy wymagań i architektury po wdrożenie oraz utrzymanie. W projektach komercyjnych stawiam na czytelny kod, stabilne integracje i rozwiązania dopasowane do realnych potrzeb biznesowych, a nie do mody technologicznych. Rozwijam własne narzędzia i prototypy, głównie w ekosystemie React, co pozwala mi szybciej testować pomysły i przenosić sprawdzone wzorce do pracy zespołowej. Technologie: JavaScript, TypeScript, React, NextJS, HTML, CSS Współpraca Pomagam w realizacji aplikacji webowych, narzędzi wewnętrznych i prototypów produktowych. Chętnie omówię zakres, harmonogram i wycenę. Kontakt email: jan.kowalski@example.com telefon: +48 123 456 789 Portfolio: Aplikacja KSeF Narzędzie do obsługi Krajowego Systemu e-Faktur. Edytor CSV/ODS online Przeglądarkowy edytor arkuszy i plików CSV. Trening szachowy Interaktywne ćwiczenia taktyki szachowej. Notes Lekka aplikacja do notatek w przeglądarce. English Native Speaker AI Ćwiczenie konwersacji w języku angielskim z asystentem głosowym. Kasa gra — rozliczenia między przyjaciółmi Uproszczone rozliczanie wspólnych wydatków w grupie. AutoB2B Automatyczna klasyfikacja faktur z KSeF. Zarządzanie długoterminowym portfelem inwestycyjnym Narzędzie do śledzenia długoterminowych inwestycji. Speak Hook Agent AI dla WearOS. Szkoła programistów Jeśli chciałbyś zostać programistą - to dla Ciebie miejsce! Transkrypcja mowy na tekst Pomocne gdy rozmawiasz z kimś po angielsku. Przygotowanie do partii szachowej Wpisujesz nick do lichess albo chess.com i masz informacje co przeciwnik gra Pgn2Video Zestaw narzędzi wspomagających generowanie video o tematyce szachowej
4. 4.

   Wykonaj npm run dev w PowerShell'u i otwórz http://localhost:3000 w przeglądarce i sprawdź, czy strona działa.

Gdy strona wygląda dobrze lokalnie, wrzuć kod na GitLab i zaimportuj repozytorium na Vercel.

1. 1.

   Zapisz projekt w lokalnym repozytorium i wyślij go na GitLab (najpierw utwórz puste repozytorium): poprzednia lekcja

   git initgit add --allgit commit -m "Moj commit"#pamiętaj żeby zmienić poniższy url na swoje repozytorium, które utworzyłeś na gitlab.comgit remote add origin https://gitlab.com/twoj-nick/2-tworzenie-strony-wizytowki.gitgit push -u origin master
2. 2.

   Dla kolejnych zmian wystarczy:

   git add --allgit commit -m "Moj commit"git push
3. 3.

   Wejdź na vercel.com, zaimportuj repozytorium z GitLaba i sprawdź swoją stronę pod przydzielonym adresem. poprzednia lekcja