Następny.js
Oryginalni autorzy | Guillermo Raucha |
---|---|
Deweloperzy | Vercel i społeczność open source |
Pierwsze wydanie | 25 października 2016 |
Wersja stabilna | |
Wersja podglądu | v13.0.3-kanarek.0 |
Magazyn | |
Napisane w | JavaScript , TypeScript i Rust |
Platforma | Platforma internetowa |
Rozmiar | 17,0 MB |
Typ | Ramy aplikacji internetowych |
Licencja | Licencja MIT |
Strona internetowa |
Next.js to framework do tworzenia stron internetowych typu open source stworzony przez Vercel , umożliwiający tworzenie aplikacji internetowych opartych na React z renderowaniem po stronie serwera i generowaniem statycznych stron internetowych .
Dokumentacja Reacta wymienia Next.js wśród „Zalecanych łańcuchów narzędzi”, polecając go programistom jako rozwiązanie podczas „Budowania witryny renderowanej na serwerze za pomocą Node.js”. Tam, gdzie tradycyjne aplikacje React mogą renderować swoją zawartość tylko w przeglądarce po stronie klienta, Next.js rozszerza tę funkcjonalność o aplikacje renderowane po stronie serwera.
Prawa autorskie i znaki towarowe dla Next.js są własnością Vercel, która również utrzymuje i prowadzi rozwój open source.
Tło
Next.js to framework React , który udostępnia kilka dodatkowych funkcji, w tym renderowanie po stronie serwera i generowanie statycznych stron internetowych . React to biblioteka JavaScript , która jest tradycyjnie używana do budowania aplikacji internetowych renderowanych w przeglądarce klienta za pomocą JavaScript. Programiści dostrzegają jednak kilka problemów związanych z tą strategią, takich jak brak obsługi użytkowników, którzy nie mają dostępu do JavaScript lub go wyłączyli, potencjalne problemy z bezpieczeństwem, znacznie wydłużony czas ładowania strony i szkody dla ogólnej optymalizacji witryny pod kątem wyszukiwarek . Frameworki, takie jak Next.js, omijają te problemy, umożliwiając renderowanie części lub całości witryny po stronie serwera przed wysłaniem do klienta. Next.js to jeden z najpopularniejszych frameworków dla Reacta. Jest to jeden z kilku zalecanych „łańcuchów narzędzi” dostępnych podczas uruchamiania nowej aplikacji, z których wszystkie zapewniają warstwę abstrakcji pomocną w typowych zadaniach. Next.js wymaga Node.js i można go zainicjować za pomocą Menedżera pakietów Node .
Google wniósł wkład w projekt Next.js, wysyłając 43 żądania ściągnięcia w 2019 r., w których pomogli w oczyszczeniu nieużywanego kodu JavaScript, skróceniu czasu ładowania i dodaniu ulepszonych wskaźników. Od marca 2022 r. platforma jest używana przez wiele dużych witryn internetowych, w tym Walmart , Apple , Nike , Netflix , TikTok , Uber , Lyft i Starbucks . Na początku 2020 roku ogłoszono, że Vercel zabezpieczył dwadzieścia jeden milionów dolarów w ramach finansowania serii A na wsparcie ulepszeń oprogramowania. Pierwotny autor frameworka, Guillermo Rauch, jest obecnie dyrektorem generalnym Vercel, a głównym opiekunem projektu jest Tim Neutkens.
Historia rozwoju
Next.js został po raz pierwszy wydany jako projekt open source na GitHub 25 października 2016 r . Pierwotnie został opracowany w oparciu o sześć zasad: gotową funkcjonalność nie wymagającą konfiguracji, JavaScript wszędzie, wszystkie funkcje są napisane w JavaScript, automatyczne dzielenie kodu i renderowanie serwera, konfigurowalne pobieranie danych, przewidywanie żądań i uproszczenie zastosowanie.
Next.js 2.0 został ogłoszony w marcu 2017 roku i zawierał kilka ulepszeń, które ułatwiły pracę z małymi stronami internetowymi. Zwiększyło to również wydajność kompilacji i poprawiło skalowalność funkcji wymiany modułów na gorąco.
Wersja 7.0 została wydana we wrześniu 2018 roku z ulepszoną obsługą błędów i obsługą kontekstowego interfejsu API React w celu ulepszenia dynamicznej obsługi tras. Była to również pierwsza wersja zaktualizowana do pakietu internetowego 4.
Wersja 8.0 została wydana w lutym 2019 roku i była pierwszą wersją oferującą bezserwerowe wdrażanie aplikacji, w której kod jest podzielony na funkcje lambda uruchamiane na żądanie. Wersja zmniejszyła również czas i zasoby wymagane do statycznego eksportu oraz poprawiła wydajność pobierania wstępnego.
Wersja 9.3, ogłoszona w marcu 2020 r., zawierała różne optymalizacje oraz globalną obsługę modułów Sass i CSS.
27 lipca 2020 roku ogłoszono wersję Next.js 9.5, która dodaje nowe możliwości, w tym przyrostową regenerację statyczną, przepisywanie i obsługę przekierowań.
15 czerwca 2021 została wydana wersja 11 Next.js, wprowadzająca m.in.: obsługę Webpack 5, podgląd funkcjonalności wspólnego kodowania w czasie rzeczywistym „Next.js Live” oraz eksperymentalną funkcję automatycznej konwersji z Create React App do Next.js zgodny formularz „Create React App Migration”.
26 października 2021 r. Wydano Next.js 12, dodając kompilator Rust, przyspieszający kompilację, obsługę AVIF , Edge Functions & Middleware oraz Native ESM & URL Imports.
26 października 2022 r. Vercel wypuścił Next.js 13. To główne wydanie przyniosło nowy wzorzec routingu z dodaniem katalogu aplikacji
, który obejmuje obsługę układów, komponentów serwera React, przesyłania strumieniowego i nowego zestawu metod pobierania danych. Co więcej, Vercel ogłosił nową generację łańcucha narzędzi Blazingly Fast™ do programowania front-end o nazwie Turbo, napisaną w języku Rust, składającą się z trzech części: Turbopack (następca Webpack), Turborepo (system kompilacji przyrostowej) oraz silnik Turbo (Blazingly Fast™ low -poziomowy przyrostowy silnik obliczeniowy i zapamiętujący). Główne wydanie zawiera również wiele dodatkowych zmian w interfejsie API Next.js, ale przede wszystkim wprowadzenie nowego @next/font
, zmiany w next/image
i ulepszenia w next/link
.
Stylizacja i funkcje
Next.js obsługuje stylizację za pomocą CSS , a także prekompilowanych Scss i Sass , CSS-in-JS i stylizowany JSX . Ponadto jest zbudowany z języka TypeScript i inteligentnym pakietowaniem. Transpiler typu open source Babel służy do przekształcania i kompilowania kodu do języka JavaScript, z którego może korzystać przeglądarka. Webpack , inne narzędzie typu open source, służy do późniejszego łączenia modułów. Wszystkie te narzędzia są używane z npm w terminalu.
Główną cechą Next.js jest wykorzystanie renderowania po stronie serwera w celu zmniejszenia obciążenia przeglądarek internetowych i zapewnienia zwiększonego bezpieczeństwa [ potrzebne źródło ] . Można to zrobić dla dowolnej części aplikacji lub całego projektu, co pozwala wyróżnić bogate w treść strony do renderowania po stronie serwera. Można to również zrobić tylko dla odwiedzających po raz pierwszy, aby zmniejszyć obciążenie przeglądarek internetowych, które jeszcze nie pobrały żadnych zasobów witryny. Funkcja „przeładowywania na gorąco” wykrywa zmiany w trakcie ich wprowadzania i ponownie renderuje odpowiednie strony, dzięki czemu serwer nie musi być ponownie uruchamiany. Pozwala to na natychmiastowe odzwierciedlenie zmian wprowadzonych w kodzie aplikacji w przeglądarce internetowej, chociaż niektóre przeglądarki wymagają odświeżenia strony. Oprogramowanie wykorzystuje routing oparty na stronach dla wygody programistów i obejmuje obsługę routingu dynamicznego. Inne funkcje obejmują wymianę modułów na gorąco, dzięki czemu moduły mogą być wymieniane na żywo, automatyczne dzielenie kodu, które obejmuje tylko kod niezbędny do załadowania strony, oraz wstępne pobieranie stron w celu skrócenia czasu ładowania.
Next.js obsługuje również przyrostową regenerację statyczną i statyczne generowanie witryn — skompilowana wersja witryny jest zwykle budowana w czasie kompilacji i zapisywana jako folder .next. Gdy użytkownik wysyła żądanie, wstępnie zbudowana wersja, która jest statyczną stroną HTML, jest zapisywana w pamięci podręcznej i wysyłana do niego. To sprawia, że czas ładowania jest bardzo szybki, ale nie jest odpowiedni dla każdej witryny, ponieważ witryny interaktywne, które często się zmieniają i wykorzystują wiele danych wprowadzanych przez użytkowników, nie będą odpowiednie.
Zobacz też
- Angular (platforma internetowa)
- Gatsby (platforma JavaScript)
- LAMPA
- Reaguj (biblioteka JavaScript)
- Nuxt.js
- Vue.js
- Ramy JavaScript
Linki zewnętrzne
- „Studium przypadku — Hulu | Next.js” . nextjs.org . Źródło 2020-10-16 .
- Smith, Craig S. „Czy zauważyłeś nową sieć? Jest szybsza i bezpieczniejsza” . Forbesa . Źródło 2020-10-16 .
- Asay, Matt (3 kwietnia 2020). „Front-endowe frameworki wkrótce staną się jeszcze fajniejsze” – mówi szef Google . TechRepublika . Źródło 2020-10-16 .
- Asay, Matt (2020-06-01). „Jak GraphQL wywrócił tworzenie stron internetowych do góry nogami” . InfoŚwiat . Źródło 2020-10-20 .