Next.js wykonuje wiele optymalizacji w aplikacji React, więc Ty już nie musisz
Next.js to sprawdzona platforma React z szeregiem optymalizacji wydajności. Głównym założeniem tej platformy jest zadbanie o to, aby aplikacje uruchamiały się i utrzymywały maksymalną wydajność przez domyślne włączenie tych funkcji.
W tym wprowadzeniu omówimy pokrótce wiele funkcji dostępnych w ramach platformy. W innych przewodnikach w tej kolekcji znajdziesz więcej informacji o tych funkcjach.
Czego się nauczysz?
Chociaż Next.js domyślnie oferuje wiele metod optymalizacji wydajności, te przewodniki wyjaśniają je bardziej szczegółowo i pokazują, jak można z nich korzystać, aby zapewnić szybkie i skuteczne działanie.
Do witryn React można ogólnie dodać wiele optymalizacji, które sprawdzą się również w aplikacjach utworzonych przy użyciu Next.js. Nie będziemy ich omawiać, ponieważ skoncentrowaliśmy się na funkcjach Next.js. Więcej informacji o ogólnych optymalizacji React znajdziesz w kolekcji React.
Czym Next.js różni się od React?
React to biblioteka, która ułatwia tworzenie interfejsów użytkownika za pomocą metody opartej na komponentach. Chociaż React jest bardzo przydatne, jest przede wszystkim biblioteką UI. Wielu programistów dołącza dodatkowe narzędzia, takie jak pakiet modułów (np. webpack) i transpiler (np. Babel), aby uzyskać kompletny łańcuch narzędzi do kompilacji.
W kolekcji React wykorzystaliśmy funkcję Create React App (CRA), aby szybko uruchomić aplikacje React. CRA upraszcza konfigurowanie aplikacji React, ponieważ udostępnia kompletny łańcuch narzędzi do kompilacji za pomocą jednego polecenia.
Chociaż w CRA umieszczono kilka domyślnych optymalizacji, celem narzędzia jest zapewnienie prostej i prostej konfiguracji. Deweloperzy mają wybór, aby zdecydować, czy samodzielnie wyrzucić i zmodyfikować konfiguracje.
Next.js, którego można również użyć do utworzenia nowej aplikacji React, działa inne podejście. Udostępnia on szereg typowych optymalizacji, które wielu programistów chce przeprowadzić, ale są trudne do skonfigurowania. Należą do nich:
- Renderowanie po stronie serwera
- Automatyczne dzielenie kodu
- Wstępne pobieranie tras
- Routing systemu plików
- Style CSS-in-JS (
styled-jsx)
Konfiguracja
Aby utworzyć nową aplikację Next.js, uruchom to polecenie:
npx create-next-app new-app
Następnie przejdź do katalogu i uruchom serwer programistyczny:
cd new-app
npm run dev
Poniższy fragment przedstawia strukturę katalogu nowej aplikacji Next.js.
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
- Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran
.
Zwróć uwagę, że tworzony jest katalog pages/ z pojedynczym plikiem: index.jsx. Next.js działa w oparciu o routing systemu plików, w którym każda strona w danym katalogu jest świadczona jako osobna trasa. Utworzenie nowego pliku w tym katalogu, na przykład about.js, spowoduje automatyczne utworzenie nowej trasy (/about).
Komponenty można też tworzyć i używać tak samo jak innych aplikacji React. Katalog components/ został już utworzony z jednym komponentem nav.js, który jest już zaimportowany w pliku index.js. Domyślnie każdy import używany w Next.js jest pobierany tylko podczas wczytywania strony, co zapewnia korzyści związane z automatycznym podziałem kodu.
Co więcej, każde wstępne wczytanie strony w Next.js jest renderowane po stronie serwera. Jeśli otworzysz panel Network w Narzędziach deweloperskich, zobaczysz, że wstępne żądanie dokumentu zwraca stronę w pełni wyrenderowaną przez serwer.
To tylko kilka z wielu funkcji udostępnianych automatycznie przez Next.js. Wiele z nich można dostosować i dostosować do różnych zastosowań.
Co dalej?
Zamierzam celować 😛
W pozostałych przewodniku z tej kolekcji szczegółowo opisaliśmy konkretną funkcję Next.js:
- Pobieranie tras z wyprzedzeniem przyspiesza nawigację na stronie
- wyświetlanie stron hybrydowych i tylko AMP, które przyspieszają ładowanie stron w wyszukiwarkach;
- Komponenty do podziału kodu z dynamicznym importowaniem, które pozwalają zmniejszyć ilość danych w JavaScript