Wprowadzenie do Next.js 13 i jego nowości
12/12/2023
10 min min
Bartosz Lewandowski
Wprowadzenie do Next.js 13 i jego nowości
12/12/2023
10 min min
Bartosz Lewandowski
Spis treści
- Co to jest Next.js?
- Nowości w Next.js 13
- Dlaczego nowa wersja Next.js jest rewolucją?
- Przyszłość Next.js
- Podsumowanie
Zapraszam Cię do odkrycia Next.js 13 – nowej wersji popularnego frameworka, która zmienia zasady gry w tworzeniu stron internetowych. To prawdziwa rewolucja dla deweloperów i entuzjastów technologii webowych. Dowiedz się, jak nowe funkcje, takie jak ulepszony system routingu i wprowadzenie Turbopack, przekładają się na niespotykaną dotąd wydajność i możliwości. Poznaj sekrety tej innowacyjnej platformy, która otwiera nowe horyzonty w świecie web developmentu. Czy jesteś gotowy na tę ekscytującą podróż po najnowszych trendach w projektowaniu sklepów internetowych?
Co to jest Next.js?
Next.js to framework wykorzystujący bibliotekę React, który zyskał popularność dzięki swojej wszechstronności i wydajności. Najnowsza wersja wykorzystuje app router, który przynosi ze sobą przełomowe zmiany, które sprawiają, że jest on jeszcze bardziej atrakcyjny dla twórców sklepów internetowych. Umożliwia tworzenie szybkich, responsywnych i interaktywnych interfejsów użytkownika. Szybkie ładowanie stron i płynna interakcja to podstawa dla zapewnienia dobrego doświadczenia klienta i potencjalnie wyższej konwersji. Ale co dokładnie sprawia, że jest tak wyjątkowy i dlaczego programiści na całym świecie chętnie po niego sięgają?
Dowiedz się więcej o podstawach Next.js w naszym przewodniku Konfiguracja projektu z Next.js - Przewodnik dla Początkujących.
Rozwój Next.js – od początków do dzisiaj
Rozwój Next.js to fascynująca podróż w świecie technologii webowych, rozpoczynająca się w 2016 roku. Framework ten zyskał uznanie dzięki umożliwieniu łatwego tworzenia aplikacji wykorzystujących renderowanie po stronie serwera (SSR - Server-Side Rendering). Ta metoda przyczyniła się do znacznej poprawy szybkości i wydajności aplikacji, co jest kluczowe w dzisiejszym dynamicznym świecie internetu. Co więcej, aplikacje tworzone przy użyciu Next.js charakteryzują się doskonałą optymalizacją pod kątem SEO, co umożliwia im lepsze pozycjonowanie w wynikach wyszukiwania.
Warto podkreślić, że Next.js od samego początku kładł silny nacisk na prostotę użytkowania i elastyczność, umożliwiając programistom tworzenie zarówno statycznych, jak i dynamicznych stron internetowych z łatwo dostępnymi narzędziami. W kolejnych latach framework ten nieustannie się rozwijał, wprowadzając nowe funkcje i integracje, które umożliwiały tworzenie jeszcze bardziej zaawansowanych i skomplikowanych aplikacji internetowych.
Kluczowym momentem w ewolucji Next.js było wprowadzenie funkcji takich jak generowanie statycznych stron (Static Site Generation - SSG) oraz automatyczne dzielenie kodu (Automatic Code Splitting), co znacząco poprawiło wydajność aplikacji. Inną istotną cechą Next.js jest jego integracja z różnymi technologiami i narzędziami, takimi jak React, Webpack czy Babel, co czyni go jeszcze bardziej elastycznym i przystępnym dla szerszego grona programistów.
Dlaczego Next.js jest wyborem wielu deweloperów?
Next.js zyskał popularność wśród deweloperów ze względu na szereg istotnych zalet, które sprawiają, że jest on wyborem dla wielu różnorodnych projektów internetowych.
Po pierwsze, wszechstronność Next.js jest jednym z jego największych atutów. Framework ten umożliwia deweloperom tworzenie zarówno statycznych stron internetowych (SSG - Static Site Generation), jak i dynamicznych aplikacji renderowanych po stronie serwera (SSR - Server-Side Rendering). Ta elastyczność sprawia, że Next.js jest odpowiedni dla szerokiej gamy projektów – od prostych blogów i stron portfolio po złożone platformy e-commerce i aplikacje korporacyjne.
Po drugie, Next.js jest oparty na React, jednej z najpopularniejszych bibliotek do tworzenia interfejsów użytkownika. Dzięki temu deweloperzy, którzy już znają React, mogą łatwo przejść na Next.js, wykorzystując swoje dotychczasowe doświadczenie i wiedzę. Co więcej, integracja z React umożliwia tworzenie interaktywnych i responsywnych interfejsów użytkownika z wykorzystaniem komponentów, co znacznie przyspiesza proces tworzenia aplikacji.
Kolejnym atutem Next.js jest wbudowane optymalizacje dotyczące wydajności i SEO. Dzięki automatycznemu dzieleniu kodu i optymalizacji obrazów, aplikacje stworzone w Next.js ładują się szybciej, co przekłada się na lepsze doświadczenie użytkownika i wyższą pozycję w wyszukiwarkach internetowych.
Next.js oferuje również wsparcie dla serwerowego renderowania i generowania statycznych stron, co jest kluczowe dla SEO i poprawy wydajności. SSR pozwala na szybsze ładowanie stron, co jest szczególnie ważne dla użytkowników mobilnych i osób z wolniejszym połączeniem internetowym. Z kolei SSG umożliwia generowanie stron w czasie budowy aplikacji, co zapewnia błyskawiczne czasy ładowania.
Ponadto, Next.js jest stale rozwijany i wspierany przez aktywną społeczność oraz firmę Vercel, co zapewnia regularne aktualizacje, nowe funkcje i wsparcie. Dostępność bogatych zasobów edukacyjnych, dokumentacji i gotowych do użycia przykładów również znacznie ułatwia naukę i implementację tego frameworka.
Nowości w Next.js 13
Next.js 13 wprowadza szereg nowych funkcji i ulepszeń, które znacząco wpływają na sposób tworzenia aplikacji. Ale co dokładnie nowa wersja ma do zaoferowania i jakie są jej największe atuty?
Nowy Katalog app/
Katalog app w Next.js 13 wprowadza nową metodę organizacji plików i kierowania funkcjonalności w aplikacji. Jest to znaczące ulepszenie w stosunku do poprzednich wersji Next.js, które polegało głównie na użyciu katalogu pages do routingu. Oto niektóre z kluczowych plików, które możesz umieścić w katalogu app i ich zastosowania:
- page.tsx: Ten plik odpowiada za renderowanie konkretnej strony w aplikacji. Jego nazwa i położenie w katalogu app określają ścieżkę URL, do której jest przypisana. Na przykład, app/about/page.tsx odpowiada URL yourdomain.com/about. W tym pliku definiujesz główną treść strony.
- layout.tsx: Plik layoutu definiuje wspólny układ dla grupy stron lub całej aplikacji. Możesz tworzyć zagnieżdżone układy, gdzie każdy podkatalog w app może mieć swój własny layout.tsx, który obejmuje zarówno tę stronę, jak i wszystkie jej podrzędne strony. Layouty mogą zachowywać swój stan podczas przejść między stronami.
- error.tsx: Ten plik służy do obsługi błędów w aplikacji. Możesz go użyć do definiowania niestandardowej strony błędu, która zostanie wyświetlona, gdy aplikacja napotka nieoczekiwany błąd.
- loading.tsx: Plik loading.tsx działa jak komponent <Suspense> dla danej sekcji trasy. Definiuje, co ma być wyświetlane podczas ładowania właściwej zawartości strony, co jest szczególnie przydatne w przypadku operacji asynchronicznych.
- not-found.tsx: Jest to specjalny plik używany do definiowania niestandardowej strony dla błędu 404 - Nie Znaleziono. Dzięki niemu możesz stworzyć bardziej spersonalizowaną stronę dla użytkowników, którzy próbują uzyskać dostęp do nieistniejącej ścieżki w Twojej aplikacji.
- template.tsx: Pełni rolę podobną do pliku układu (layout), otaczając każdy podrzędny układ lub stronę. Różnica polega na tym, że w przeciwieństwie do układów, które są stałe na przestrzeni różnych tras i zachowują swój stan, template.tsx tworzy nową instancję dla każdego z podrzędnych elementów podczas nawigacji. Oznacza to, że przy każdym przejściu do nowej strony, template.tsx zostaje odświeżony, tworząc nową instancję swojego wnętrza, bez zachowania poprzedniego stanu. To podejście jest przydatne, gdy chcesz, aby każda strona lub komponent miał swój własny, unikalny kontekst i stan, który nie jest przechowywany między nawigacjami.
Turbopack - następca Webpack
Next.js 13 jest zbudowany na bazie Turbopack, natywnego kompilatora napisanego w Rust, będącego następcą Webpack. Oto kilka kluczowych informacji na temat Turbopacka:
- Wydajność: Jednym z głównych celów Turbopacka jest zwiększenie wydajności procesu budowania aplikacji. Jest on znacznie szybszy niż Webpack, co znacząco skraca czas potrzebny na kompilację i pakowanie kodu, zwłaszcza w dużych projektach.
- Optymalizacja czasu uruchomienia: Turbopack zoptymalizował czas uruchomienia, co jest szczególnie korzystne podczas rozwoju aplikacji, gdy deweloperzy często uruchamiają i ponownie kompilują projekt.
- Szybsze aktualizacje: Oprócz szybkiego czasu uruchomienia, Turbopack oferuje również znacznie szybsze aktualizacje w trakcie tworzenia. Oznacza to, że zmiany w kodzie są szybciej odzwierciedlane w aplikacji, co poprawia ogólną wydajność pracy programisty.
- Technologia Alpha: Należy zauważyć, że Turbopack został wprowadzony jako wersja alpha, co oznacza, że nadal jest w trakcie rozwoju i doskonalenia. Mimo to, już teraz pokazuje obiecujące wyniki w zakresie poprawy wydajności.
- Zmiana w procesie budowania: Wprowadzenie Turbopacka oznacza zmianę w sposobie, w jaki Next.js obsługuje proces budowania aplikacji. Oferuje on nowe możliwości i potencjalnie zmienia sposób, w jaki deweloperzy pracują nad projektami w Next.js.
Ulepszone renderowanie w Next.js 13
Nowy sposób pisania Server Components w Next.js 13 przynosi kilka znaczących zmian i ulepszeń, które wpływają na sposób tworzenia i renderowania aplikacji:
- Rendering po stronie serwera: Podstawową ideą Server Components jest to, że są one renderowane po stronie serwera, co oznacza, że kod JavaScript dla tych komponentów nie jest wysyłany do przeglądarki. Dzięki temu zmniejsza się rozmiar pakietu przesyłanego do klienta, co prowadzi do szybszego ładowania strony.
- Automatyczne odróżnianie: W Next.js 13, system automatycznie odróżnia między Client Components i Server Components. Komponenty w folderze app są domyślnie traktowane jako Server Components.
- Wykorzystanie dyrektywy "use client": Jeśli komponent zawiera logikę strony klienta, taką jak hooki useState lub useEffect, musi zostać oznaczony specjalną dyrektywą "use client" na początku pliku. To oznacza, że ten konkretny komponent będzie traktowany jako Client Component.
- Optymalizacja wysyłania danych: Dzięki renderowaniu po stronie serwera, dane są przetwarzane na serwerze, co zmniejsza ilość przetwarzania wymaganego po stronie klienta. To znacznie poprawia wydajność, zwłaszcza w przypadku urządzeń o ograniczonej mocy obliczeniowej.
- Strumieniowanie i Suspense: Next.js 13 wykorzystuje funkcje strumieniowania i Suspense do optymalizacji ładowania komponentów. Komponenty mogą być ładowane stopniowo, co pozwala na szybsze wyświetlanie treści i lepsze zarządzanie stanem ładowania.
- Zmniejszenie kodu klienta: Ponieważ wiele komponentów jest teraz renderowanych po stronie serwera, ilość kodu JavaScript potrzebnego do wykonania na stronie klienta jest znacznie zmniejszona. To zmniejsza obciążenie przeglądarki i poprawia ogólną wydajność. Bardziej szczegółowo na ten temat rozpisujemy się we wpisie Renderowanie w Next.js - server i client components w pigułce.
Szybsze pobieranie danych
W Next.js 13 wprowadzono kilka istotnych zmian dotyczących pobierania danych. Oto główne punkty, które warto znać:
- Rozszerzony fetch na serwerze: Next.js rozszerza natywny interfejs Fetch API, pozwalając konfigurować zachowanie cache'owania i rewalidacji dla każdego żądania fetch na serwerze. Możesz używać fetch z async/await w komponentach serwerowych, w obsłudze tras oraz w akcjach serwera (server actions).
- Cache'owanie danych: Domyślnie, Next.js automatycznie cache'uje wartości zwracane przez fetch w Data Cache na serwerze. Oznacza to, że dane mogą być pobierane w czasie budowania aplikacji lub w czasie żądania, a następnie ponownie wykorzystywane przy każdym żądaniu danych.
- Rewalidacja danych: Rewalidacja to proces czyszczenia Data Cache i ponownego pobierania najświeższych danych. Jest to użyteczne, gdy dane ulegają zmianie i chcesz upewnić się, że wyświetlasz najaktualniejsze informacje. Rewalidacja może być czasowa (automatyczne rewalidowanie danych po określonym czasie) lub na żądanie (manualne rewalidowanie danych na podstawie jakiegoś zdarzenia).
- Rewalidacja na żądanie: Możesz rewalidować dane na żądanie, korzystając z ścieżek (revalidatePath) lub tagów cache'u (revalidateTag).Next.js oferuje system tagowania cache'u dla żądań fetch, dzięki czemu można rewalidować wszystkie wpisy cache'u skojarzone z danym tagiem.Więcej o pobieraniu danych przeczytasz w naszym dedykowanym temu wpisie Pobieranie danych w Next.js - Przewodnik dla początkujących
Server Actions
Server Actions w Next.js 13 to asynchroniczne funkcje wykonujące się na serwerze, używane w komponentach serwerowych i klienckich do obsługi przesyłania formularzy oraz mutacji danych. Można je definiować w dwojaki sposób:
- Bezpośrednio w komponencie serwerowym: Poprzez dodanie dyrektywy "use server" na początku funkcji asynchronicznej.
- W oddzielnym pliku: Aby umożliwić ponowne wykorzystanie, można zdefiniować Server Actions w oddzielnym pliku, dodając dyrektywę "use server" na początku pliku. Takie akcje mogą być następnie importowane zarówno do komponentów serwerowych, jak i klienckich.
Zastosowanie Server Actions obejmuje:
- Obsługa formularzy: Można je wywoływać za pomocą atrybutu action w elemencie <form>. Komponenty serwerowe umożliwiając wysyłanie formularza nawet gdy JavaScript nie jest załadowany lub jest wyłączony. W komponentach klienckich, formularze wywołujące Server Actions kolejkują zgłoszenia do momentu załadowania klienta.
- Mutacja danych i ponowna walidacja: Server Actions pozwalają na modyfikację danych i ich ponowną walidację.
- Obsługa błędów: Możliwe jest łatwe zarządzanie zarówno komunikatami o sukcesie, jak i o błędach.
- Aktualizacje z useOptimistic: Pozwalają aktualizowanie interfejsu użytkownika przed zakończeniem Server Action, co może zapewnić płynniejsze wrażenia użytkownika.
Dodatkowe funkcjonalności:
- Ustawianie i odczytywanie ciasteczek: Server Actions umożliwiają zarządzanie ciasteczkami w trakcie działania akcji.
- Zaawansowana personalizacja formularzy: Możliwość dostosowania zachowania, układu i wyglądu formularzy według wymagań aplikacji, w tym zaawansowane stylowanie CSS.
- Obsługa złożonych struktur danych: Server Actions nie są ograniczone do prostych formularzy, mogą efektywnie obsługiwać złożone struktury danych, w tym obiekty i tablice.
Server Actions są integralną częścią architektury Next.js i współpracują z jego systemem cache'owania i rewalidacji danych. Dzięki temu, gdy akcja jest wywołana, Next.js może zwrócić zarówno zaktualizowany interfejs użytkownika, jak i nowe dane.
Dlaczego nowa wersja Next.js jest rewolucją?
Next.js 13 jest uważany za rewolucyjny ze względu na szereg innowacji, które znacząco wpływają na sposób tworzenia aplikacji internetowych. Przede wszystkim wprowadza on nową architekturę, znaną jako "app directory", która upraszcza strukturę projektu i pozwala na bardziej intuicyjne zarządzanie komponentami i ścieżkami. To stanowi dużą zmianę w porównaniu do tradycyjnego podejścia opartego na stronach.
Server Components
Next.js 13 wprowadza znaczące ulepszenia w obsłudze Server Components, co stanowi ważny krok w dalszym rozwoju frameworka. Ta funkcja pozwala komponentom React na renderowanie po stronie serwera, co ma istotny wpływ na wydajność i doświadczenie użytkownika.
Server Components w Next.js 13 umożliwiają oddzielenie cięższych, bardziej zasobożernych komponentów od tych, które są renderowane po stronie klienta. W praktyce oznacza to, że pewne części aplikacji mogą być przetwarzane na serwerze, co redukuje obciążenie przeglądarki klienta. To ma bezpośredni wpływ na szybkość ładowania stron, co jest szczególnie korzystne dla użytkowników z wolniejszymi połączeniami internetowymi lub mniej wydajnymi urządzeniami.
Korzystanie z Server Components w Next.js 13 pozwala również na optymalizację wykorzystania pasma sieciowego. Ponieważ część kodu jest wykonywana na serwerze, mniejsza ilość danych musi być przesłana do przeglądarki klienta. To przekłada się na szybsze czasy ładowania stron i mniejsze zużycie danych, co jest ważne zwłaszcza w kontekście mobilnych użytkowników internetu.
Dodatkowo, Server Components pozwalają na lepszą separację logiki biznesowej od interfejsu użytkownika. Komponenty te mogą zawierać logikę związaną z dostępem do bazy danych, autoryzacją czy obliczeniami, która tradycyjnie wymagałaby użycia dodatkowych API lub funkcji serwerowych. Dzięki temu deweloperzy mogą tworzyć bardziej efektywne i bezpieczne aplikacje, redukując ryzyko wystąpienia problemów związanych z bezpieczeństwem na stronie klienta.
Optymalizacja obrazów
Optymalizacja obrazów w Next.js 13 stanowi jedno z kluczowych ulepszeń, mających ogromny wpływ na wydajność aplikacji internetowych, zwłaszcza w kontekście urządzeń mobilnych. W dzisiejszym świecie, gdzie szybkość ładowania i optymalizacja są niezbędne dla zapewnienia dobrej jakości użytkowania i pozycjonowania w wyszukiwarkach, te zmiany są szczególnie istotne.
Automatyczna optymalizacja obrazów w Next.js 13 polega na inteligentnym skalowaniu, kompresowaniu i konwertowaniu obrazów do formatów, które są bardziej efektywne pod względem rozmiaru, nie tracąc przy tym na jakości. To znacząco redukuje czas ładowania strony, ponieważ obrazy często stanowią znaczną część danych ładowanych przez aplikację.
Dodatkowo, Next.js 13 wprowadza obsługę nowoczesnych formatów obrazów, takich jak WebP, które oferują lepszą kompresję przy zachowaniu wysokiej jakości obrazu w porównaniu do tradycyjnych formatów, jak JPG czy PNG. Wykorzystanie tych formatów może znacząco zmniejszyć rozmiar plików obrazowych, co jest kluczowe dla użytkowników mobilnych oraz osób korzystających z wolniejszych połączeń internetowych.
Next.js 13 także implementuje leniwe ładowanie obrazów ("lazy loading"), które oznacza, że obrazy są ładowane tylko wtedy, gdy są potrzebne (na przykład gdy użytkownik przewija stronę i zbliża się do danego obrazu). To podejście zapobiega ładowaniu wszystkich obrazów na stronie naraz, co może znacząco obciążyć przeglądarkę i spowolnić czas ładowania strony.
Wydajność i SEO
W Next.js 13, rozwój w zakresie wydajności i SEO jest szczególnie ważny, ponieważ framework ten kontynuuje wprowadzanie i udoskonalanie różnych technik optymalizacyjnych, które są kluczowe dla nowoczesnych aplikacji internetowych.
Lazy Loading: Wprowadzenie i doskonalenie leniwego ładowania (lazy loading) to jeden z ważnych aspektów Next.js 13. Ta technika pozwala na ładowanie zasobów, takich jak obrazy i skrypty, dopiero gdy są one potrzebne, czyli zazwyczaj gdy użytkownik przewija stronę i zbliża się do danego elementu. To znacząco redukuje początkowy czas ładowania strony, co jest szczególnie ważne dla użytkowników mobilnych i osób z wolniejszym połączeniem internetowym.
Prefetching: Inną istotną funkcją jest prefetching, czyli wcześniejsze ładowanie zasobów, które mogą być potrzebne w przyszłości. Dzięki temu, gdy użytkownik klika link czy przechodzi do innej części strony, większość zasobów jest już załadowana, co znacznie przyspiesza czas ładowania i poprawia ogólne wrażenie z korzystania z aplikacji.
Optymalizacja SEO: Next.js 13 kontynuuje również skupienie na optymalizacji pod kątem wyszukiwarek internetowych (SEO). Dzięki technikom takim jak SSR (Server-Side Rendering) i SSG (Static Site Generation), strony są lepiej indeksowane przez wyszukiwarki. To, w połączeniu z szybszym czasem ładowania i lepszą dostępnością treści, przyczynia się do lepszego rankingu w wynikach wyszukiwania.
Poprawa Ogólnej Wydajności: Całościowe podejście do wydajności, które obejmuje optymalizację obrazów, zarządzanie skryptami i zasobami, a także efektywne wykorzystanie cache, znacząco poprawia szybkość i responsywność aplikacji stworzonych w Next.js 13. Te ulepszenia mają bezpośredni wpływ na doświadczenia użytkownika, co jest niezwykle ważne w świecie, gdzie oczekiwania odnośnie szybkości i płynności działania stron internetowych są coraz wyższe.
Przyszłość Next.js
Next.js ciągle się rozwija, a jego twórcy, czyli firma Vercel, nieustannie pracują nad wprowadzaniem nowych funkcji i ulepszeń. Jakie są zatem plany na przyszłość i w jakim kierunku będzie się rozwijał ten framework?
Planowane nowości i ulepszenia
Twórcy Next.js zapowiadają dalsze ulepszenia zarówno w zakresie wydajności, jak i elastyczności frameworku. Możemy spodziewać się nowych narzędzi i funkcji, które jeszcze bardziej ułatwią tworzenie zaawansowanych aplikacji internetowych.
Wizja przyszłości Next.js
Wizja przyszłości Next.js to nie tylko rozwój technologiczny, ale także wsparcie dla społeczności deweloperów. Twórcy frameworku planują intensywnie współpracować z programistami, aby dostosować Next.js do ciągle zmieniających się potrzeb rynku i trendów w tworzeniu aplikacji internetowych.Chcesz dowiedzieć się więcej o optymalizacji? Sprawdź nasz wpis blogowy Optymalizacje w Next.js - Jak przyspieszyć swoją stronę?
Podsumowanie
Next.js 13 wprowadza wiele znaczących zmian i ulepszeń, które otwierają nowe możliwości dla deweloperów. Od ulepszonego systemu routingu po server actions – te zmiany mają pozytywny wpływ na proces tworzenia aplikacji, ich wydajność oraz SEO. Next.js ciągle się rozwija i jego przyszłość zapowiada się bardzo obiecująco.
Często zadawane pytania
- Czym różni się Next.js 13 od poprzednich wersji? Next.js 13 wprowadza ulepszony system routingu, pobierania danych, renderowania oraz narzędzia, które różnią się od tych dostępnych w poprzednich wersjach.
- Jak nowości w Next.js 13 wpływają na wydajność aplikacji? Ulepszenia w Next.js 13, takie jak lepsze zarządzanie ścieżkami i optymalizacje w renderowaniu stron, przekładają się na szybsze ładowanie i lepsze pozycjonowanie w wyszukiwarkach.
- Jakie są plany rozwoju Next.js? Planowane są dalsze ulepszenia w zakresie wydajności i elastyczności frameworku, a także współpraca z społecznością deweloperów.
- Dla jakich projektów jest najlepszy Next.js? Next.js jest idealnym wyborem dla wielu różnych projektów - od prostych stron internetowych po skomplikowane sklepy internetowe.
Bartosz Lewandowski
CEO