devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›Next.js 9.5 z przyrostowym generowaniem statycznym

Next.js 9.5 z przyrostowym generowaniem statycznym

By Bernadeta Zapała
30 lipca 2020
203
0
Share:

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.

Next.js 9.5

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:

  1. 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/.
  2. Końcowe adresy URL z ukośnikiem przekierują się na adres bez końcowego ukośnika – /news/ do /news.
  3. 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.

TagsNextjsReact Fast RefreshStatic Site Generation

Share:

  • Systemy i przeglądarki

    Google Chrome – prace nad uwierzytelnianiem i baterią

  • Informacje

    Software house’y sięgają po venture capital – Raport

  • Narzędzia

    Container Registry – nowa obsługa kontenerów w GitHub

  • 3 marca 2021

    Vite 2.0 wydane z nowymi wtyczkami

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT