Nadchodzi Next.js 13!

Pod koniec października, a dokładnie 25 podczas konferencji została wydana 13 wersja Next JS. W tym artykule omówię najważniejsze zmiany. Uwaga, musimy mieć na uwadze to, że niektóre funkcjonalności dalej są w fazie beta, twórcy odradzają stosowania niektórych z nich na produkcji.

Zanim przejdę do omówienia nowych funkcjonalności chciałbym podzielić za pomocą listy funkcjonalności, które dalej znajdują się w fazie beta oraz te, które są już stabilne:

Funkcjonalności w fazie beta:

• Nowa struktura /app
  - layouts
  - server components
  - streaming
• @next/font
• Turbopack

Funkcjonalności stabilne:

• next/image
• next/link

Co nowego?

W nowej wersji katalog pages został zastąpiony folderem app. Nowa struktura ułatwia nam korzystanie z layoutów, pozwala nam na tworzenie serwer komponentów, a także na stworzenie widoku ładowania kontentu, który będzie się wyświetlać w przypadku np. długiego czasu oczekiwania danych z serwera.

Zmiany w routingu:

W poprzedniej wersji to pliki definiowały routing, lecz w nowej strukturze to foldery definiują routing, a folder app odpowiada ścieżce /. Jeżeli chcemy utworzyć podstronę kontakt to należy utworzyć następującą strukturę: app > kontakt > page.tsx

// app/kontakt/page.tsx
export default function Page() {
 return <h1>Strona kontaktu</h1>;
}

Zmiany w layoucie:

W wersji nexta komponent odpowiadający za layout aplikacji tworzymy w folderze app i nazywamy go layout.tsx. Ponadto teraz jesteśmy w stanie tworzyć zagnieżdżone layouty w prostszy sposób. Jeżeli potrzebujemy, aby strona kontakt miała zagnieżdżony layout wystarczy, że w katalogu kontakt utworzymy plik layout.tsx i tam zdefiniujemy nasz layout.

// app/kontakt/layout.tsx
export default function ContactLayout({ children }) {
 return <section>{children}</section>;
}

Serwer komponent:

Dzięki komponentom renderowanych po stronie serwera zmniejsza się ilość kodu wysyłanego do klienta co umożliwia szybsze ładowanie strony. Ponadto teraz już nie musimy korzystać z getServerSideProps, ponieważ wszystkie komponenty domyślnie są renderowane po stronie serwera. Jeśli chcemy, aby nasz komponent renderował się po stronie klienta należy użyć składni “use client”.

@next/font - nowy system korzystania ze czcionek Google

Teraz czcionki i pliki css będą pobierane w czasie kompilacji z resztą zasobów statycznych, dzięki czemu przeglądarka nie będzie wysyłać żadnych zapytań do Google.

@next/link - usprawnienie komponentu <Link>

W nowej wersji nexta nie jest już wymagane przekazywanie taga html <a>.

@next/image - usprawnienie komponentu <Image>

Komponent <Image> jest teraz łatwiejszy w stylizowaniu, a także nie jest już wymagane podania właściwości fill, gdy nie chcemy ustalać wysokości oraz szerokości zdjęcia, a także tag alt nie jest już wymagany.

Turbopack

Next js dodał Turbopack, który jest następcą Webpacka, opartego na Rust.

Turbopack ma być 700x szybszy niż webpack, a także 10x szybszy niż Vite.