Strony w Next.js: szybkie strony firmowe z headless CMS

Większość podstron strony firmowej nie zmienia się przy każdej wizycie, więc Next.js generuje je raz — przy publikacji — i wysyła z serwerów CDN najbliższych odwiedzającemu. Nie ma zapytań do bazy danych ani składania motywu przy każdym kliknięciu.

• po zmianie w CMS podstrona przebudowuje się w tle, a odwiedzający zawsze dostaje gotową wersję
• zdjęcia są automatycznie zmniejszane do rozmiaru ekranu i zapisywane w nowoczesnych formatach
• fonty są hostowane razem ze stroną i nie przesuwają układu przy ładowaniu
• przeglądarka pobiera tylko ten JavaScript, którego potrzebuje dana podstrona

Strona DJ-a i producenta, którą zbudowałem w Next.js 14 z projektu w Figmie, ładuje się w niecałą sekundę. Zastąpiła wolne podstrony z kreatora i ma galerię wideo, dyskografię i formularz rezerwacji.

W WordPressie SEO zwykle obsługuje wtyczka, w Next.js — kod strony. Ustawiam to raz, tak żeby redakcja nie mogła tego przypadkiem zepsuć:

• tytuł, opis i obrazek do udostępnień tworzą się dla każdej podstrony z pól w CMS, a gdy pole jest puste, działa wartość zastępcza
• mapa strony XML powstaje z treści, więc nowy artykuł trafia do niej w chwili publikacji
• wersje językowe mają znaczniki hreflang, a każda podstrona — adres kanoniczny
• dane strukturalne JSON-LD opisują firmę, usługi, artykuły, FAQ i ścieżkę nawigacji
• przekierowania 301 są w jednym pliku, a nieistniejące adresy zwracają prawdziwy błąd 404

Analizę dużych serwisów — indeksację, budżet crawlowania, Core Web Vitals na tysiącach adresów — opisuję na stronie SEO techniczne.

Headless CMS przechowuje treści osobno od wyglądu. W Sanity marketing wypełnia pola — nagłówek, cenę, listę korzyści, pytania i odpowiedzi — a Next.js decyduje, jak je pokazać. Wklejenie tekstu z Worda czy zbyt dużego zdjęcia nie rozsypie układu.

• typy treści projektuję pod Waszą firmę: usługa, realizacja, artykuł, członek zespołu
• podgląd pokazuje podstronę przed publikacją
• na zdjęciu zaznacza się najważniejszy punkt, a kadry na telefon i komputer dopasowują się do niego
• wersje językowe są połączone, więc widać, której podstronie brakuje tłumaczenia

Wybieram Sanity, bo panel redakcji jest kodem w tym samym repozytorium i rozwija się razem ze stroną. Inne systemy CMS i połączenia z narzędziami, których już używacie, opisuję na stronie integracja CMS i API.

Polska firma, która sprzedaje do Niemiec czy Wielkiej Brytanii, potrzebuje wersji językowych, które Google traktuje jak osobne strony. Moja strona działa po polsku, angielsku i rosyjsku, serwis konsultantki ds. analityki handlu ma 153 podstrony w tych samych trzech językach, a strona psychoterapeuty z Mediolanu — po włosku i angielsku. W każdym przypadku język ma własne adresy z przetłumaczonymi slugami, hreflang i przełącznik, który prowadzi na tę samą podstronę w innym języku. Szczegóły są na stronie tworzenie stron wielojęzycznych.

Next.js wykonuje kod po stronie serwera obok samych podstron, więc formularze i płatności działają bez osobnego zaplecza do utrzymywania:

• formularz wysyła zapytanie na e-mail, WhatsApp albo do CRM, z ochroną przed spamem i zdarzeniem w analityce
• klauzula RODO jest przy formularzu, a baner cookies uruchamia Google Analytics 4 dopiero po zgodzie
• Stripe Checkout przyjmuje karty, BLIK i Przelewy24 za kurs, konsultację lub zaliczkę
• po opłaceniu klient dostaje dostęp do płatnych materiałów

Dla Landi Room, salonu kosmetycznego z Warszawy, zbudowałem landing kursu online w Next.js i Sanity ze Stripe Checkout: po płatności kupująca dostaje zabezpieczony link do nagrania. Pierwsza kampania Google Ads na ten landing przyniosła ponad 100 sprzedanych kursów.

Najczęściej zaczynamy od strony na WordPressie, która zwolniła albo której aktualizacje stały się ryzykowne. Przeprowadzka musi zachować treści i pozycje w Google. Stronę Giuseppe, psychoterapeuty z Mediolanu, przebudowałem w Next.js 16 i Sanity: 468 wpisów blogowych przeniesionych, każdy stary adres przekierowany 301 na nowy, dodane dane strukturalne i reguły dla botów AI. Od startu do przekazania minęły 44 dni robocze.

Kolejność prac przy migracji z WordPressa do Next.js

1. Eksport wpisów, podstron, zdjęć i pól SEO oraz zamiana ich na uporządkowane treści w CMS.
2. Mapa wszystkich starych adresów, łącznie z kategoriami, tagami i stronami załączników.
3. Przeniesienie tytułów i opisów, test przekierowań na wersji podglądowej.
4. Po starcie kontrola błędów 404 i indeksacji w Google Search Console.

Przejście z innych platform wygląda tak samo — opis jest na stronie migracja strony na inną platformę.

WordPress lepiej sprawdzi się, gdy potrzebujecie wielu gotowych wtyczek, gdy zespół zna już jego panel albo gdy mała strona ma szybko i tanio ruszyć i nie planujecie jej rozbudowy. Next.js wygrywa przy wielu językach, dużej ilości treści, wysokich wymaganiach co do szybkości i integracjach. Robię strony w obu technologiach; spojrzenie od strony WordPressa opisuję na stronie strona na WordPress.

Asystenci AI i ich roboty czytają kod HTML, a wiele z nich nie uruchamia JavaScriptu. Strona, która składa tekst dopiero w przeglądarce, wygląda dla nich na prawie pustą. Strona w Next.js oddaje pełną treść już w pierwszej odpowiedzi serwera.

• HTML z prawdziwymi nagłówkami, listami i tabelami, czytelny bez uruchamiania skryptów
• dane strukturalne z nazwą firmy, usługami i autorami tekstów
• reguły w robots.txt dla GPTBot, OAI-SearchBot, PerplexityBot i Google-Extended — decydujecie, kto czyta, a kto może trenować model
• plik llms.txt z krótką mapą serwisu tam, gdzie ma to sens

Giuseppe znalazł mnie przez ChatGPT, a nowe podstrony jego przebudowanej strony już pojawiają się w odpowiedziach ChatGPT. Obecność w odpowiedziach AI to dalsza, stała praca — opisuję ją na stronie pozycjonowanie w AI i ChatGPT.

Software house przydziela do projektu kierownika, projektanta i kilku programistów. Przy stronie firmowej to zwykle więcej osób, niż wymaga praca. U mnie projekt, kod, konfiguracja CMS, SEO i uruchomienie są w jednych rękach. W marketingu internetowym pracuję od 2010 roku — najpierw jako copywriter, potem w SEO, potem w programowaniu — więc stronę planuję od tego, czego szukają Wasi klienci, a nie od komponentów.

1. Brief: podstrony, języki, integracje i typy treści, na końcu stała cena.
2. Projekt strony głównej i jednej podstrony, uzgodniony na telefonie i komputerze.
3. Budowa w Next.js i Sanity z SEO i analityką, z podglądem postępów pod osobnym adresem.
4. Treści, migracja i przekierowania, podpięcie domeny.
5. Przekazanie: krótka instrukcja do CMS, repozytorium i konta założone na Was.

Stronę zwykle hostuję na Vercelu, platformie twórców Next.js, która buduje podgląd każdej zmiany; możliwy jest też inny hosting Node.js. Aktualizacje i drobne zmiany po starcie opisuję na stronie utrzymanie strony internetowej.

Ceny są w cenniku, projekt graficzny jest wliczony w obu wariantach:

• Strona lub landing page w Next.js z Sanity CMS, kilka podstron i formularz zgodny z RODO: od 3000 do 6000 zł.
• Strona w Next.js z headless CMS, kilkoma językami, integracjami z CRM lub Stripe albo migracją z WordPressa: od 8500 zł.

O cenie decyduje liczba szablonów i typów treści, a nie liczba podstron: blog z 400 wpisami korzysta z jednego szablonu artykułu. Migracja dokłada pracę przy mapie adresów i konwersji treści. Hosting i plan CMS opłacacie bezpośrednio u dostawców, a przewidywany koszt podaję przed startem.