Next.js 9.5 z przyrostowym generowaniem statycznym
Next.js opublikował nową wersję swojego frameworka. Next.js 9.5 zawiera stabilną przyrostową regenerację statyczną oraz ulepszenia Fast Refresh. Ponadto nowa wersja wspiera pakiet Webpack 5 (beta).
Przyrostowe generowanie statyczne
Metody Static Site Generation pozwalają na czerpanie korzyści ze statycznej strony – szybkiej, zawsze dostępnej online – jednak z doskonałą obsługą dynamicznych danych. Wprowadzone w wersji 9.3, a teraz połączone z przyrostowym generowaniem statycznym. W czasie wykonywania można zarejestrować nowe strony statyczne, korzystając z opcji fallback: true w getStaticPaths.
Dzięki temu Next.js wstępnie renderuje statycznie nieskończoną liczbę stron na żądanie. Wprowadzona w Next.js 9.5 zmiana oferuje ogólną dostępność na przyrostową statyczną regenerację. Jest to mechanizm do aktualizacji istniejących stron, przez ponowne renderowanie w tle.
export async function getStaticProps() { return { props: await getDataFromCMS(), // we will attempt to re-generate the page: // - when a request comes in // - at most once every second revalidate: 1 } }
Przyrostowa regeneracja statyczna zachowuje korzyści statyczne, np.
- Strony nigdy nie przechodzą w tryb offline.
- Brak skoków opóźnienia. Strony są wyświetlane szybko.
- Niskie obciążenie bazy danych i zaplecza.
Zarówno platforma next start, jak i Vercel Edge obsługują już obie funkcje przyrostowe. W ciągu dalszej pracy twórcy będą rozwijać dodatkowe RFC. Celem jest rozwiązanie dodatkowych możliwości przyrostowego generowania statycznego. Mowa o ponownym generowaniu i unieważnianiu kilku stron jednocześnie oraz generowaniu poprzez „słuchanie” zdarzeń, zanim użytkownik zrobi ruch.
Wsparcie dla pakietu Webpack 5 (beta)
Next.js 9.5 oferuje obsługę pakietu Webpack. Nowa wersja Webpack 5 beta zawiera wiele istotnych ulepszeń. Przede wszystkim oferuje trwałe buforowanie. Jest to możliwość ponownego wykorzystania pracy z wcześniejszych kompilacji. Poprawiono także tree-shaking – moduł wewnętrzny oraz CommonJS są wstrząsane.
Jednak aby obsługiwać pakiet, twórcy Next.js musieli przepisać wiele elementów kompilacji. Jedną z ważniejszych zmian jest koniec zależności od webpack-hot-middleware i webpack-dev-middleware. Teraz korzysta się bezpośrednio z Webpack, otrzymując prostszą architekturę i szybszą kompilację programowania. Także React Fast Refresh i Next.js Error Overlay są w pełni kompatybilne z Webpack 5.
Konfigurowalna ścieżka podstawowa w Next.js 9.5
Konfigurowalna ścieżka podstawowa pomaga łatwo hostować projekty Next.js na podścieżkach domeny. Nie zawsze obsługuje się projekty z głównego katalogu, często korzysta się z podścieżek, np. /docs. Odbywało to się jednak kosztem dodatkowej konfiguracji – m.in. dodawaniem przedrostka <Link> do każdego z nich.
W Next.js 9.5 wprowadzono nową opcję konfiguracji – basePath, które właśnie pozwoli na łatwiejsze hostowanie projektu w podścieżce domeny. Aby rozpocząć korzystanie basePath, możesz dodać go do next.config.js:
// next.config.js module.exports = { basePath: '/docs' }
Po skonfigurowaniu basePath projekt automatycznie przekieruje się z podanej ścieżki.
Obsługa rewizji, przekierowań i nagłówków
W Next.js 9.5 wprowadzono opcję konfiguracyjną – rewrites. Pozwala ona na mapowanie ścieżki przychodzącego żądania na inną docelową ścieżkę, także na zewnętrzne adresy URL. Przykładowo – przepisanie określonej trasy do example.com:
// next.config.js module.exports = { async rewrites() { return [ { source: '/backend/:path*', destination: 'https://example.com/:path*' } ] } }
Tutaj każda ścieżka znajdująca się poniżej /backend będzie przekierowana do example.com.
Kolejną wprowadzoną opcją jest redirect. Wiele witryn wymaga kilku przekierowań, np. podczas przechodzenia do /blog czy /news. W nowej wersji Next.js 9.5 użytkownik tworzy listę przekierowań next.config.js pod kluczem redirects:
// next.config.js module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true } ] } }
W związku z renderowaniem po stronie serwera można tworzyć projekty hybrydowe oraz ustawiać nagłówki dla przychodzącego żądania. Jednak dla stron nie było to możliwe. Wraz z nową wersją otrzymujemy właściwość header, dotyczącą wszystkich tras Next.js. Opcja header pozwala ustawić potrzebne nagłówki, np. Feature-Policy i Content-Security-Policy.
// next.config.js module.exports = { async headers() { return [ { source: '/:path*', headers: [ { key: 'Feature-Policy', // Disable microphone and geolocation value: "microphone 'none'; geolocation 'none'" } ] } ] } }
Opcjonalny końcowy ukośnik w URL
Wprowadzono nową opcję trailingSlash do next.config.js. Dzięki niej Next.js automatycznie obsłuży zachowanie końcowego ukośnika:
- Jeśli trailingSlash ma wartość true z adresem bez końcowego ukośnika, będzie przekierowane na adres z końcowym ukośnikiem – /news do /news/.
- Końcowe adresy URL z ukośnikiem przekierują się na adres bez końcowego ukośnika – /news/ do /news.
- W celu uniknięcia niepotrzebnych przekierowań, zapewnia automatyczne usuwanie/stosowanie końcowego ukośnika.
// next.config.js module.exports = { // Force a trailing slash, the default value is no trailing slash (false) trailingSlash: true }
Ulepszenia Fast Refresh w Next.js 9.5
Dzięki wprowadzonym poprawkom zwiększono niezawodność edycji na żywo w Next.js. Zaktualizowano błędy kompilacji i czasu wykonania. Teraz wyświetlają tylko istotne informacje, także ramkę kodu, który spowodował błąd. Nowe wskazówki dotyczące czasu programowania pozwalają zachować stan komponentów. Po zresetowaniu stanu komponentów, jeśli Next.js nie będzie w stanie zachować jego stanu po edycji, otrzymamy ostrzeżenie.