Jak działa katalog aplikacji w Next.js 13

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 create-next-app@latest next13 --experimental-app


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

Zrozumienie nowego katalogu aplikacji

Next.js 12 używał katalogu pages do kierowania, ale został on zastąpiony katalogiem app/ w Next.js 13. Katalog pages/ 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:

• page.tsx — plik używany do tworzenia interfejsu użytkownika dla określonej trasy.
• layout.tsx — zawiera definicję układu trasy i można go 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.
• template.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.
• error.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.
• loading.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.
• not-found.tsx – Nieznaleziony plik jest renderowany, gdy Next.js napotka błąd 404 dla tej strony. W Next.js 12 musiałbyś ręcznie utworzyć i skonfigurować stronę 404.
• head.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 katalogu app/ . W tym folderze musisz utworzyć plik o nazwie page.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 .

W przypadku tras zagnieżdżonych, takich jak /products/sale , zagnieżdżaj foldery w sobie, tak aby struktura folderów wyglądała jak 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ł na temat różnych metod renderowania w Next.js, aby uzyskać bardziej szczegółowe 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ć process.env .

Możesz także bezpośrednio wchodzić w interakcje z backendem. Nie ma potrzeby używania getServerSideProps ani 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.

async function getData() {
  try{
    const res = await fetch('https://api.example.com/...');
    return res.json();
  } catch(error) {
throw new Error('Could not fetch data')
  }
}


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

export default async function Page() {
  const data = await getData();
  return <div></div>;
}


Komponenty serwerowe doskonale nadają się do renderowania treści nieinteraktywnych. Jeśli potrzebujesz użyć haków React, detektorów zdarzeń lub interfejsów API działających tylko w przeglądarce, użyj komponentu klienckiego, dodając dyrektywę „użyj klienta” 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:

• Tworzenie pliku loading.tsx , który będzie renderowany dla całego segmentu trasy.

export default function Loading() {
  return <p>Loading...</p>
}


• Zawijanie poszczególnych komponentów za pomocą granicy React Suspense i określanie awaryjnego interfejsu użytkownika.

import { Suspense } from "react";
import { Products } from "./Components";


export default function Sale() {
  return (
    <section>
      <Suspense fallback={<p>Products...</p>}>
        <Products />
      </Suspense>
    </section>
  );
}


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.