Co nowego w Next.js | Frontend Weekly vol. 127

1. Szybki przegląd nowości w Next.js

Pod koniec października zeszłego roku do Next.js przyszła prawdziwa rewolucja. Po wielu miesiącach iteracji nad RFC, wraz z Next.js 13 zaprezentowany został zupełnie nowy router. Wprowadzał on między innymi Layouts i odświeżoną obsługę błędów i ładowania. Największą nowością było jednak oparcie routera o React Server Components – technologii wciąż mocno eksperymentalnej. Od debiutu Next.js 13 minie niedługo pół roku – w tym czasie przygotowane zostały dwie duże aktualizacje i najwyższy czas, żebyśmy przyjrzeli się im dokłądniej.

Źródło: https://twitter.com/housecor/status/1631296202409902086

Jeśli checie nadrobić temat Next.js 13 i React Server Components, to polecam:

The future is now – Next.js 13 | Frontend Weekly vol. 110
Make use of `use` in React – a new hook is coming | Frontend Weekly vol. 109
React 18 | Frontend Weekly vol. 81
How React server components work: an in-depth guide

Metadata API

Po Server Side Rendering zazwyczaj sięgamy, kiedy potzebujemy zaopiekować się tematem SEO. Aż dziwi, że Next.js dopiero teraz postanowił należycie zaopiekować się generowaniem metadanych, które są kluczowe dla tego tematu. Nowe Metadata API umożliwia eksportowania zmiennej metadata na dowolnym poziomie routingu, a framework odpowiednio zajmie się połączeniem ich w całość wszystkich znalezionych zmiennych w całość.

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
    ],
    locale: 'en-US',
    type: 'website',
  },
};

Statycznie typowane linki

Ciekawie wygląda też wsparcie dla typów w komponencie <Link />. W trakcie kompilacji na podstawie aktualnej struktury katalogów Next.js wygeneruje typ odpowiadający wszystkim możliwym ścieżkom w naszej aplikacji. W efekcie o literówkach i innych drobnych błędach dowiemy się już na pierwszym etapie testowania aplikacji. Również modyfikacja struktury katalogów będzie bezpieczniejsza niż kiedykolwiek wcześnie.

import type { Route } from 'next';
import Link from 'next/link'

// ✅
<Link href="/about" />
// ✅
<Link href="/blog/nextjs" />
// ✅
<Link href={`/blog/${slug}`} />

// ❌ TypeScript errors if href is not a valid route
<Link href="/aboot" />

Rest API

Jednym z najczęściej wymienianych braków nowego routera była obsługa zapytań REST. Next.js 13.2 przyniósł rozwiązanie i tego problemu. Kod obsługujący zapytania REST umieszczamy w pliku route.js i eksportujemy z niego metody nazwane odpowiednio GET, HEAD, OPTIONS, POST, PUT, DELETE, lub PATCH.

import { cookies } from 'next/headers';

export async function GET(request: Request) {
  const cookieStore = cookies();
  const token = cookieStore.get('token');

  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token}` },
  });
}

Walka z bundle size trwa

Aplikacje w całości oparte o React Server Components obiecywały prawie zerowy bundle-size wysyłany do klienta. W teorii więc, ilość kodu wysyłanego do klienta w Next.js 13 powinien bić na głowę zarówno Next.js 12 jak i całą konkurencję. W praktyce okazało się, że budnle size wzrósł…Na szczęście Next.js 13.1 przyniósł pierwszą dużą paczkę opytmalizacji. Co ważne, autorzy podkreślają, że nie powiedzieli w tej kwestii jeszcze ostatniego słowa.

Źródła

Next.js 13
Next.js 13.1
Next.js 13.2

2. Chrome optymalizuje baterie dla MacOS

Safari znane jest z bycia Internentem Explorer naszych czasów. Firefox znany jest z tego, że tak naprawdę nikt z niego nie korzysta. Chrome znany jest z pożerania RAM’u i baterii. Niestety wygląda na to, że żaden z tych stereotypów nie jest prawdziwy.

W poprzedniej edycji naszego raportu informowaliśmy Was o dużych zmianach zmierzających do Safari. W tym tygodniu przyszedł czas na nowości w przeglądarce od Google. Do najnowszego Chrome trafiła właśnie paczka optymalizacji, która skupia się na zmniejszeniu zużycia energii, a co za tym idzie wydłużeniu czasu pracy na baterii. Benchmarki przeprowadzone przez Google pokazują, że MacBook Pro z M2 na pokładzie wytrzyma 17 godzin korzystania z Chrome. Jeśli jesteście ciekawi na czym dokładnie polegają wprowadzone optymalizacje, to informacje znajdziecie w poniższym artykule.

Do more with Chrome on a single charge on MacBooks

3. O tym jak Sentry przeszedł z Encyme na React Testing Library

Na zakończenie dzisiejszej wyjątkowo krótkiej edycji weekly, mamy dla Was małą polecajkę. Sentry na przestrzeni ostatnich kilku miesięcy zmigrował się z Enzyme do React Testing Library. Jeśli jesteście ciekawi jakie przeszkody napotkali na swojej drodze i jak przebiegał cały proces, to odpowiedzi znajdziecie w poniższym artykule.

Sentry’s Frontend Tests: Migrating from Enzyme to React Testing Library