Next.js 13

Vercel, firma stojąca za popularnym frameworkiem React Next.js, wydała najnowszą wersję frameworka 25 października 2022 r. Ta nowa wersja, Next.js 13, zawiera aktualizacje i ulepszenia funkcji, takich jak układ, pobieranie danych i routing , a także szybszy program pakujący. Zmiany te mają na celu ułatwienie programistom tworzenia szybkich, skalowalnych i niezawodnych aplikacji internetowych przy użyciu React.

Jedną z nowych funkcji w Next.js 13 jest wprowadzenie segmentów tras, które umożliwiają programistom tworzenie zagnieżdżonych tras poprzez umieszczanie stron w folderach w katalogu aplikacji. Tworząc trasy w tych folderach, programiści mogą używać page.jsx zamiast index.jsx.

W poprzednich wersjach Next.js programiści musieli utworzyć folder układu, aby udostępnić interfejs użytkownika wielu stronom. Jednak wraz z wydaniem Next.js 13 nie jest to już konieczne, ponieważ układ jest teraz domyślnie dołączany podczas tworzenia nowego projektu. Układ w Next.js 13 jest interaktywny i nie wymaga ponownego renderowania, co ułatwia pracę programistom.

Oprócz włączenia domyślnego układu, Next.js 13 wprowadza również uproszczenia do API do pobierania danych. Stare interfejsy API getServerSideProps , getStaticProps i getInitialProps nie są już obsługiwane i zostały zastąpione nowym interfejsem API, który ma być łatwiejszy w użyciu.

Podobne do „getServerSideProps”

Gdy żądanie wysyłania za pomocą getServerSideProps., powinno być buforowane jako „no-store”.

fetch(URL, { cache: 'no-store' });

Gdy żądanie wysyłania za pomocą getServerSideProps powinno być buforowane „force-cache”.

fetch(URL, { cache: 'force-cache' });

W przypadku buforowania z czasem życia wynoszącym sekundy

fetch(URL, { next: { revalidate: 30 } });

Turbopack to szybszy pakiet w porównaniu do Webpack, Vite. Ponadto Turbopack wykorzystuje sprytne techniki buforowania, aby usprawnić obsługę zmian w źródłach w zoptymalizowany sposób. Turbopack posiada model zmian, które zostały już zbudowane i buduje tylko te na podstawie bieżących zmian. Możesz wypróbować Turbopack, jeśli uruchomisz „ next dev — — turbo”.

Efektem turbopaku jest:

700x szybsze aktualizacje niż Webpack

10x szybsze aktualizacje niż Vite

4x szybszy zimny start niż Webpack

„użyj klienta”

Komponenty mogą być automatycznie renderowane jako komponent serwera i jeśli chcemy używać haków klienckich „useState” i „useEffect”, konieczne jest dopisanie „use client” na początku pliku.

'use client';

import { useState } from 'react';

export default function Navbar() {
  const [title, setTitle] = useState('React');

  return (
    <div>
      <p>{title}</p>
    </div>
  );
}

W poprzednich wersjach Next.js <a> musiało być zagnieżdżone w <Link>, aby poprawnie renderować łącze. Jednak wraz z wydaniem Next.js 13, <Link> teraz zawsze domyślnie renderuje <a>.

import Link from 'next/link'

// Next.js 12: 
<Link href="/checkout">
  <a>About</a>
</Link>

// Next.js 13
<Link href="/checkout">
  About
</Link>

W poprzednich wersjach Next.js wymagane było określenie atrybutu „alt” dla obrazu, aby uniknąć błędu. Jednak wraz z wydaniem Next.js 13 atrybut „alt” nie jest już potrzebny.

import Image from 'next/image';
import logo from './logo.png';

function Navbar() {
  return <Image alt="logo" src={logo} />;
}

Zgodnie z nowym systemem czcionek Next.js 13 możesz optymalizować własne czcionki, a także używać czcionek Google bez żądania ze strony przeglądarki. Jedyne, co musisz zrobić, to zainstalować pakiet @next/font. Możesz użyć tego w ten sposób:

import { Inter } from '@next/font/google';

const inter = Inter();

Dziękuję, do zobaczenia w następnym artykule !!

Tutaj możesz się do mnie odezwać,

LinkedIn:https://www.linkedin.com/in/cerensolpan/

GitHub:https://github.com/cerensolpan

Świergot: https://twitter.com/cerensolpanture