Co nowego w Next.js 10

Pojawiła się właśnie najnowsza wersja Next.js, czyli frameworku webowego typu open-source opartego na React i napisanego w JavaScript. Twórcy zaznaczyli tutaj, że ich głównym celem w Next.js 10 była poprawa dwóch obszarów: doświadczenia w programowaniu oraz UX. Mamy zatem ponad 20 nowych funkcji, które poprawiają wydajność frameworku i zwiększają komfort pracy. Co więcej, w najnowszej wersji Next.js zredukowano ilość wewnętrznego kodu JavaScript o 16%.

Zobaczmy teraz, jakie nowości twórcy przygotowali tym razem.

Komponent next/image

Nowy komponent ma zastąpić przestarzały tag HTML-a <img>, który nie nadaje się już trochę do współczesnego developmentu webowego. Używając next/image, obrazy są automatycznie ładowane w sposób leniwy, co oznacza, że renderują się one tylko, kiedy użytkownik jest blisko ich zobaczenia. 

Wymiary takiego obrazu są znane przed wyrenderowaniem go, a więc przeglądarki są w stanie automatycznie renderować przestrzeń, której dany obraz potrzebuje. Co więcej, podczas gdy width i height z HTML-owego <img> mogą spowodować problemy przy responsywnych layoutach, to, jak twierdzą twórcy, nie ma to racji bytu w przypadku next/image. 

Podczas używania nowego komponentu obraz jest odpowiada automatycznie na podstawie proporcji przekazanych przez width i height. 

Automatyczna optymalizacja obrazów

Next.js zawiera teraz wbudowaną automatyczną optymalizację, która rozwiązuje problem bardzo dużych obrazków, wysyłanych na telefony, gdzie potrzeba ułamka rozdzielczości. Wcześniej wspomniany komponent next/image wyrenderuje w tym przypadku automatycznie mniejszy obraz. 

Nowa funkcja obsługuje nowocześniejsze i mniejsze formaty od JPEG, takie jak WebP. Co więcej, użytkownicy Next.js mogą w tym kontekście automatycznie adaptować przyszłe formaty i dodawać je do obsługiwanych przeglądarek.

Twórcy spodziewają się tutaj, że zarówno nowy komponent next/image, jak i automatyczna optymalizacja obrazów znacznie polepszą komfort korzystania z ich frameworku i zwiększą jego wydajność.

Zinternacjonalizowany routing

Zespół Next.js zaznacza, jak ważna jest dla nich internacjonalizacja. Na przykład, twierdzą oni, że 72% użytkowników jest skłonna pozostać na danej stronie internetowej, jeśli jest ona przetłumaczona, a 55% kupuje przez internet tylko na stronach, które wyświetlają ich ojczysty język.  

Jeśli ktoś planuje więc wystartować na obcym rynku, to internacjonalizacja projektu jest niezwykle istotna dla jego sukcesu. Mamy więc tutaj dwa filary: tłumaczenie i routing. Wiele bibliotek Reacta przygotowuje aplikacje do przetłumaczenia, ale większość z nich oczekuje ręcznej obsługi routingu i generalnie działa tylko z jedną strategią renderowania.

To dlatego Next.js 10 zawiera obsługę wykrywania języków i międzynarodowego routingu. Ma to pomóc w decydowaniu się, jakie treści wyświetlać, na podstawie preferencji językowych swoich użytkowników.

Next.js Analytics

Jest to nowa funkcja, która zapewnia ciągły wgląd w działania użytkowników, tak aby developerzy mogli lepiej zrozumieć, w jakich obszarach poprawić wydajność danej strony internetowej. Widzą oni dzięki temu narzędziu, jak dana strona sobie ogólnie radzi i jak mogą polepszyć wyniki Web Vitals.  

Inne zmiany

Next.js również zawiera pakiet o nazwie Next.js Commerce — jest zbiór narzędzi, które pomogą ulepszyć funkcjonowanie stron e-commerce. Co więcej, w Next.js można teraz importować CSS z zewnętrznych komponentów React. Jeżeli już jesteśmy przy React, to warto również wspomnieć, że jego najnowsza wersja, czyli React 17, jest w pełni kompatybilna z getStaticProps i getServerSideProps w Next.js. 

Pełna lista zmian wraz z ich opisem znajduje się tutaj.