Next.js: co to jest i kiedy go wybrać

Najkrótsza odpowiedź brzmi: Next.js to framework do budowy aplikacji internetowych oparty na bibliotece React. Jego twórcą i głównym opiekunem jest Vercel, a kod źródłowy projektu jest dostępny na otwartoźródłowej licencji MIT.

React odpowiada przede wszystkim za budowanie interfejsu z komponentów. Next.js tworzy wokół niego szerszą strukturę aplikacji. Programista dostaje między innymi system routingu i możliwość decydowania, gdzie oraz kiedy dana część strony ma zostać wyrenderowana. Dzięki temu nie trzeba traktować całego serwisu w jeden sposób.

To ważne rozróżnienie również z perspektywy właściciela firmy. Wybór Next.js nie oznacza po prostu wyboru kolejnej technologii do wyświetlania strony. Framework daje możliwość zbudowania zarówno publicznego serwisu z treściami, jak i aplikacji z panelem użytkownika, danymi pobieranymi z bazy czy integracjami z innymi usługami.

W mojej pracy używam Next.js między innymi do aplikacji i serwisów, w których klasyczna strona informacyjna jest tylko częścią większej całości. Przykładem jest Galabau Darius, gdzie powstał konfigurator wyceny ogrodzeń działający razem z panelem administracyjnym. Innym jest projekt Ceny Notarialne, który łączy dane o cenach transakcyjnych, mapy i dużą liczbę stron lokalizacyjnych.

Jeżeli interesuje Cię samo wykonanie takiego projektu, szerzej opisuję tworzenie stron i aplikacji Next.js.

W nowszych wersjach Next.js podstawą architektury jest App Router. To system organizujący strukturę aplikacji i routing, czyli reguły określające, jaki widok użytkownik zobaczy pod konkretnym adresem.

Dla programisty oznacza to, że struktura projektu i struktura adresów są ze sobą ściśle powiązane. Poszczególne fragmenty aplikacji mogą mieć własne układy, widoki oraz stany związane z ładowaniem danych. Z punktu widzenia osoby zamawiającej stronę szczegóły plików nie są najważniejsze. Istotniejsze jest to, że framework daje spójny sposób organizowania zarówno prostych podstron, jak i bardziej rozbudowanych części aplikacji.

Drugim ważnym elementem są React Server Components, czyli komponenty React działające po stronie serwera. Next.js wykorzystuje ten standard w swojej współczesnej architekturze. Pozwala to wykonywać część pracy na serwerze zamiast przenosić całą logikę do przeglądarki użytkownika.

Nie oznacza to, że wszystko musi działać na serwerze. Element wymagający interakcji w przeglądarce nadal może być komponentem klienckim. Programista może dzięki temu rozdzielić część odpowiedzialną za pobieranie i przygotowanie danych od elementów, z którymi użytkownik bezpośrednio wchodzi w interakcję.

W środowisku programistycznym proces budowania aplikacji wspiera także Turbopack, narzędzie oparte na języku Rust. To element warsztatu programisty, a nie funkcja, którą użytkownik strony widzi bezpośrednio, ale jest częścią współczesnego ekosystemu Next.js.

Jedną z najważniejszych cech Next.js jest to, że poszczególne części serwisu nie muszą być generowane w ten sam sposób. Framework obsługuje statyczne generowanie, renderowanie na serwerze, przyrostową regenerację treści oraz streaming komponentów.

SSG, czyli statyczne generowanie, polega na przygotowaniu gotowej wersji strony przed jej wyświetleniem użytkownikowi. Takie podejście pasuje do treści, które nie muszą być obliczane od nowa przy każdym wejściu. Mogą to być na przykład strony informacyjne lub artykuły, których zawartość pozostaje taka sama do czasu kolejnej publikacji albo aktualizacji.

SSR oznacza renderowanie na serwerze. W tym wariancie serwer przygotowuje odpowiedź w momencie obsługi żądania. Ten sposób działania może być potrzebny tam, gdzie zawartość zależy od aktualnych danych albo od kontekstu konkretnego użytkownika.

ISR, czyli przyrostowa regeneracja statyczna, pozwala łączyć statycznie przygotowaną treść z możliwością jej późniejszego odświeżania. Nie trzeba więc sprowadzać wyboru do dwóch skrajności: strony całkowicie statycznej albo generowanej od nowa przy każdym wejściu.

Streaming komponentów umożliwia natomiast przesyłanie części widoku w miarę ich przygotowywania. Zamiast uzależniać pojawienie się całej strony od jednego procesu, aplikacja może stopniowo dostarczać jej elementy.

W praktyce najważniejsze jest to, że sposób renderowania dobiera się do potrzeb konkretnej części aplikacji. Publiczna treść, panel po zalogowaniu i element oparty na zmiennych danych mogą działać inaczej, mimo że znajdują się w jednym projekcie. To jedna z przyczyn, dla których Next.js sprawdza się nie tylko przy klasycznych stronach, ale również przy bardziej rozbudowanych aplikacjach.

Next.js warto rozważyć wtedy, gdy projekt wykracza poza zestaw podstron z tekstem i zdjęciami. Framework daje mi wspólną podstawę do stworzenia publicznej części serwisu oraz funkcji wymagających danych, logowania, panelu użytkownika lub integracji.

Dobrym przykładem jest konfigurator, w którym użytkownik podaje dane i od razu otrzymuje wynik wynikający z jego wyborów. Podobnie działa aplikacja z panelem klienta, dostępem wymagającym uwierzytelnienia lub informacjami pobieranymi z bazy danych.

Next.js może być też podstawą serwisu z dużą liczbą stron generowanych z uporządkowanych danych. W Kantorymapie wykorzystuję go w projekcie obejmującym kantory, miasta oraz codziennie aktualizowane kursy NBP. Ceny Notarialne korzystają natomiast z danych o cenach transakcyjnych i map MapLibre, a serwis ma tysiące podstron lokalizacyjnych.

Nie oznacza to jednak, że Next.js jest właściwą odpowiedzią na każdy projekt internetowy. Prosty statyczny serwis bez funkcji aplikacyjnych może nie potrzebować tak rozbudowanego frameworka. Podobnie wewnętrzny interfejs działający wyłącznie po zalogowaniu i niewymagający publicznych stron może zostać zbudowany przy użyciu prostszej konfiguracji React.

Wybór technologii powinien więc wynikać z funkcji strony. Jeśli potrzebujesz aplikacji lub serwisu, który łączy treści z logiką biznesową, bazą danych i interakcjami, Next.js daje narzędzia do umieszczenia tych elementów w jednej architekturze.

Pytanie „Next.js czy WordPress?” pojawia się często, ale nie jest to porównanie dwóch identycznych produktów. Next.js jest frameworkiem programistycznym opartym na React. WordPress jest systemem zarządzania treścią, w którym panel administracyjny jest integralną częścią rozwiązania.

Jeżeli najważniejszym elementem projektu jest wygodna edycja klasycznej strony firmowej, WordPress może być prostszym wyborem organizacyjnym. W nowych projektach na WordPressie tworzę własny motyw i korzystam z ACF, dzięki czemu sekcje dostępne w panelu odpowiadają zaprojektowanemu układowi. Nie używam przy tym Elementora, Divi, Avady ani innych kreatorów stron.

Next.js nie wymaga natomiast, żeby treści były edytowane bezpośrednio w kodzie. Można połączyć aplikację z zewnętrznym systemem CMS. W takich sytuacjach korzystam między innymi z Sanity lub Strapi. Zarządzasz wtedy treścią w panelu, a Next.js odpowiada za jej prezentację oraz pozostałe funkcje aplikacji.

Granica przebiega więc raczej przez potrzeby projektu niż przez prosty podział na technologię lepszą i gorszą. Jeśli głównym zadaniem serwisu jest publikowanie i edycja typowych treści firmowych, WordPress może wystarczyć. Jeśli strona ma jednocześnie realizować funkcje aplikacyjne, przetwarzać dane, obsługiwać użytkowników albo niestandardową logikę, Next.js daje większą swobodę w zaprojektowaniu całego rozwiązania.

Bardziej szczegółowo oba podejścia zestawiam we wpisie Next.js czy WordPress.

Aplikacja Next.js nie jest przypisana wyłącznie do infrastruktury Vercel. Można uruchomić ją na środowisku obsługującym Node.js, wdrożyć w kontenerze Docker albo przygotować jako w pełni statyczny eksport.

To istotne, ponieważ wymagania hostingowe zależą od tego, z których funkcji frameworka korzysta projekt. Jeżeli aplikacja wykonuje kod po stronie serwera, infrastruktura musi zapewniać odpowiednie środowisko uruchomieniowe. Jeżeli cały projekt można wyeksportować statycznie, sposób hostowania może być prostszy.

Sam korzystam z Vercel albo własnego serwera VPS, zależnie od projektu. W przypadku komercyjnego wdrożenia na Vercel właściwym planem jest Pro. Plan Hobby jest przeznaczony do zastosowań niekomercyjnych. Aktualne warunki, limity i cennik trzeba sprawdzać bezpośrednio u dostawcy.

Możliwość hostowania Next.js poza Vercel ma znaczenie również wtedy, gdy firma ma własne wymagania infrastrukturalne. Sam framework nie zamyka aplikacji w jednym modelu wdrożenia.

Z perspektywy właściciela firmy najważniejsze pytanie nie brzmi „czy Next.js jest nowoczesny?”, lecz „co moja strona ma właściwie robić?”. Framework jest szczególnie użyteczny, gdy publiczny serwis łączy się z elementami aplikacji, danymi, integracjami albo funkcjami dostępnymi po zalogowaniu.

Dla programisty Next.js zapewnia architekturę opartą na React, App Router, Server Components oraz kilka sposobów renderowania. Pozwala zdecydować, które treści mogą być przygotowane statycznie, które wymagają działania serwera, a które powinny pozostać interaktywne po stronie przeglądarki.

Dla firmy konsekwencją tych decyzji jest możliwość zbudowania jednego rozwiązania obejmującego różne rodzaje widoków i funkcji. Nie trzeba jednak korzystać ze wszystkich możliwości frameworka tylko dlatego, że są dostępne. Prostszy projekt może uzasadniać prostszą technologię, a strona skupiona przede wszystkim na edycji treści może dobrze pasować do WordPressa.

W publicznym serwisie osobnym zagadnieniem jest też sposób przygotowania treści dla wyszukiwarek, struktura strony i jej indeksowanie. Ten temat opisuję szerzej we wpisie Next.js a SEO.