Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Next.js 13 wprowadził nowy system routingu wykorzystujący katalog aplikacji. Next.js 12 zapewniał już łatwy sposób obsługi tras za pomocą tras opartych na plikach. Dodanie komponentu do folderu stron automatycznie uczyniłoby go trasą. W tej nowej wersji router oparty na systemie plików ma wbudowaną konfigurację układów, zagnieżdżonych szablonów routingu, interfejs ładowania, obsługę błędów oraz obsługę komponentów serwera i przesyłania strumieniowego.

W tym artykule wyjaśniono te nowe funkcje i dlaczego są one ważne.

Pierwsze kroki z Next.js 13

Utwórz własny projekt Next.js 13, uruchamiając następujące polecenie w terminalu.

npx tworzyć-Następny-app@najnowsza następna13 --eksperymentalna-aplikacja

To powinno utworzyć nowy folder o nazwie next13 z nowym katalogiem aplikacji.

Zrozumienie nowego katalogu aplikacji

Next.js 12 użył strony katalog do routingu, ale jest zastępowany przez

instagram viewer
aplikacja/ katalog w Next.js 13. The strony/ katalog nadal działa w Next 13, aby umożliwić przyrostową adopcję. Musisz tylko upewnić się, że nie tworzysz plików w dwóch katalogach dla tej samej trasy, ponieważ pojawi się błąd.

Oto aktualna struktura katalogu aplikacji.

W katalogu aplikacji używasz folderów do definiowania tras, a pliki w tych folderach są używane do definiowania interfejsu użytkownika. Istnieją również specjalne pliki, takie jak:

  • strona.tsx — Plik używany do tworzenia interfejsu użytkownika dla określonej trasy.
  • układ.tsx - Zawiera definicję układu trasy i można ją udostępniać na wielu stronach. Są idealne do menu nawigacyjnych i pasków bocznych. Podczas nawigacji układy zachowują stan i nie renderują się ponownie. Oznacza to, że podczas nawigowania między stronami, które mają wspólny układ, stan pozostaje taki sam. Należy zauważyć, że najwyższy układ (układ główny) musi zawierać wszystkie znaczniki HTML i body współdzielone w całej aplikacji.
  • szablon.tsx - Szablony są jak układy, jednak nie zachowują stanu i są ponownie renderowane za każdym razem, gdy są używane do tworzenia strony. Szablony są idealne w sytuacjach, w których potrzebny jest określony kod do uruchomienia za każdym razem, gdy komponent jest montowany, na przykład animacje wejścia i wyjścia.
  • błąd.tsx - Ten plik służy do obsługi błędów w aplikacji. Otacza trasę klasą React error w taki sposób, że gdy w tej trasie lub jej elementach potomnych wystąpi błąd, próbuje się z niej wydostać, renderując przyjazną dla użytkownika stronę błędu.
  • ładowanie.tsx - Interfejs ładowania jest natychmiast ładowany z serwera, gdy interfejs użytkownika trasy ładuje się w tle. Ładowanie UI może być pokrętłem lub szkieletem ekranu. Po załadowaniu zawartości trasy zastępuje ona ładowany interfejs użytkownika.
  • nie znaleziono.tsx - Nieznaleziony plik jest renderowany, gdy plik Next.js napotka plik Błąd 404 dla tej strony. W Next.js 12 musiałbyś ręcznie utworzyć i skonfigurować stronę 404.
  • głowa.tsx - Ten plik określa tag head dla segmentu trasy, w którym jest zdefiniowany.

Jak stworzyć trasę w Next.js 13

Jak wspomniano wcześniej, trasy są tworzone przy użyciu folderów w aplikacja/ informator. W tym folderze musisz utworzyć plik o nazwie strona.tsx który definiuje interfejs użytkownika tej konkretnej trasy.

Na przykład, aby utworzyć trasę ze ścieżką /products, musisz utworzyć plik app/products/page.tsx plik.

Dla zagnieżdżonych tras, takich jak /products/sale, zagnieżdż foldery jeden w drugim, tak aby wyglądała struktura folderów app/products/sale/page.tsx.

Oprócz nowego sposobu kierowania, inne interesujące funkcje obsługiwane przez katalog aplikacji to komponenty serwera i przesyłanie strumieniowe.

Korzystanie ze składników serwera w katalogu aplikacji

Katalog aplikacji domyślnie korzysta ze składników serwera. Takie podejście zmniejsza ilość kodu JavaScript wysyłanego do przeglądarki podczas renderowania komponentu na serwerze. Poprawia to wydajność.

Zobacz ten artykuł dot różne metody renderowania w Next.js o dokładniejsze wyjaśnienie.

Komponent serwera oznacza, że ​​możesz bezpiecznie uzyskiwać dostęp do tajnych środowisk bez ujawniania ich po stronie klienta. Na przykład możesz użyć proces.env.

Możesz także bezpośrednio wchodzić w interakcje z backendem. Nie ma potrzeby używania getServerSideProps Lub getStaticProps ponieważ możesz użyć async/await w komponencie serwera do pobierania danych.

Rozważ tę funkcję asynchroniczną, która pobiera dane z interfejsu API.

asynchronicznyfunkcjonowaćotrzymać dane() {
próbować{
konst res = czekać na aportować(' https://api.example.com/...');
powrót res.json();
 } złapać(błąd) {
rzucićnowyBłąd(„Nie można pobrać danych”)
 }
}

Możesz wywołać go bezpośrednio na stronie w następujący sposób:

eksportdomyślnyasynchronicznyfunkcjonowaćStrona() {
konst dane = czekać na otrzymać dane();
powrót<dz>dz>;
}

Komponenty serwerowe doskonale nadają się do renderowania treści nieinteraktywnych. Jeśli potrzebujesz użyj haków React, detektory zdarzeń lub interfejsy API działające tylko w przeglądarce używają komponentu klienckiego, dodając dyrektywę „use client” na górze komponentu przed importem.

Przyrostowe przesyłanie strumieniowe komponentów w katalogu aplikacji

Przesyłanie strumieniowe odnosi się do stopniowego wysyłania części interfejsu użytkownika do klienta, aż wszystkie komponenty zostaną wyrenderowane. Dzięki temu użytkownik może przeglądać część treści, podczas gdy reszta jest renderowana. Aby zapewnić użytkownikom lepsze wrażenia, renderuj wczytujący się komponent, taki jak pokrętło, dopóki serwer nie zakończy renderowania zawartości. Robisz to na dwa sposoby:

  • Tworząc ładowanie.tsx plik, który będzie renderowany dla całego segmentu trasy. 
eksportdomyślnyfunkcjonowaćŁadowanie() {
powrót<P>Ładowanie...P>
}
  • Zawijanie poszczególnych komponentów za pomocą granicy React Suspense i określanie awaryjnego interfejsu użytkownika. 
import { Suspens } z"reagować";
import { Produkty } z"./Składniki";
eksportdomyślnyfunkcjonowaćSprzedaż() {
powrót (
<Sekcja>
Produkty...
}>
<Produkty />
Niepewność>
Sekcja>
 );
}

Zanim komponent Produkty zostanie wyrenderowany, użytkownik zobaczy „Produkty…”. Jest to lepsze niż pusty ekran pod względem doświadczenia użytkownika.

Aktualizacja do Next.js 13

Nowy katalog aplikacji jest zdecydowanie ulepszeniem w stosunku do poprzedniego katalogu stron. Zawiera specjalne pliki, takie jak układ, nagłówek, szablon, błąd, nie znaleziono i ładowanie, które obsługują różne stany podczas renderowania trasy bez konieczności ręcznej konfiguracji.

Ponadto katalog aplikacji obsługuje również przesyłanie strumieniowe i komponenty serwera, co prowadzi do poprawy wydajności. Chociaż te funkcje są świetne zarówno dla użytkowników, jak i programistów, większość z nich jest obecnie w fazie beta.

Jednak nadal możesz uaktualnić do Next.js 13, ponieważ katalog stron nadal działa, a następnie zacznij korzystać z katalogu aplikacji we własnym tempie.