Next.js zajmuje się wieloma optymalizacjami w aplikacji React, dzięki czemu nie musisz:
Next.js to framework React z wbudowanymi optymalizacjami pod kątem wydajności. Głównym założeniem tej platformy jest zapewnienie, aby aplikacje uruchamiały się i działały z największą możliwą wydajnością dzięki domyślnemu włączeniu tych funkcji.
W tym wprowadzeniu omówimy pokrótce wiele funkcji oferowanych przez ten framework. W innych przewodnikach w tej kolekcji znajdziesz więcej informacji o tych funkcjach.
Czego się nauczysz?
Chociaż Next.js zapewnia domyślnie kilka optymalizacji wydajności, te przewodniki mają na celu bardziej szczegółowe omówienie tych optymalizacji i pokazywanie, jak można ich używać do tworzenia szybkich i wydajnych aplikacji.
Do stron opartych na React można dodać wiele optymalizacji, które będą działać również w przypadku aplikacji utworzonych za pomocą Next.js. Nie będziemy ich omawiać, ponieważ skupiamy się na funkcjach oferowanych przez 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ą komponentów. Chociaż React jest bardzo wydajny, jest to biblioteka interfejsu użytkownika. Wielu deweloperów używa dodatkowych narzędzi, takich jak moduł agregator (np. webpack) i transpilator (np. Babel), aby mieć kompletną platformę kompilacji.
W przypadku kolekcji React zastosowaliśmy podejście polegające na użyciu narzędzia Create React App (CRA) do szybkiego uruchamiania aplikacji React. CRA ułatwia konfigurowanie aplikacji React, udostępniając kompletną platformę kompilacji za pomocą jednego polecenia.
W CRA jest dostępnych kilka domyślnych opcji optymalizacji, ale narzędzie ma na celu zapewnienie prostej i łatwej konfiguracji. Deweloperzy mają wybór, aby zdecydować, czy samodzielnie wyrzucić konfiguracje i je zmodyfikować.
Next.js, którego można też używać do tworzenia nowych aplikacji React, stosuje 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
- Stylizacja 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 katalog pages/ został utworzony z jednym plikiem: index.jsx. Next.js stosuje podejście do kierowania oparte na systemie plików, w którym każda strona w tym katalogu jest wyświetlana jako osobna ścieżka. 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ć jak każdą inną aplikację React. Katalog components/ został już utworzony z jednym komponentem nav.js, który został już zaimportowany do index.js. Domyślnie każdy import używany w Next.js jest pobierany tylko wtedy, gdy strona jest wczytywana, co zapewnia korzyści płynące z automatycznego dzielenia kodu.
Co więcej, każde początkowe 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 automatycznie udostępnianych przez Next.js. Wiele z nich można dostosowywać do różnych zastosowań.
Co dalej?
Niech żyje dowcip 😛
W każdym kolejnym przewodniku z tej kolekcji znajdziesz szczegółowe informacje o konkretnej funkcji Next.js:
- Przedwczytywanie tras w celu przyspieszenia nawigacji po stronach
- Wyświetlanie stron hybrydowych i tylko AMP, aby szybciej wczytywać strony z wyszukiwarek
- dzielenie kodu komponentów za pomocą importów dynamicznych, aby zmniejszyć ślad JavaScript;