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”.

Użytkownik, Next.js 13

@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.

Czy szukasz wykonawcy projektów IT ?
logo

Nasza oferta

Powiązane artykuły

Zobacz wszystkie artykuły powiązane z #front end