Bemutatkozik a Next.js 13

Az elhangzott főbb pontok

• 'app' könyvtár (béta): Könnyebb, gyorsabb, kevesebb kliens oldali JS.
• • Layout-ok
  • React Server Component-ek
  • Streaming
• Turbopack (alfa): Akár 700* gyorsabb Rust alapokon nyugvó Webpack helyettesítő.
• Új next/image: Gyorsabb, mint valaha, natív böngészős lazy loading-gal.
• Új next/font (béta): Automatikus self-hosted betűtípusok nulla layout eltolódással.
• Feljavított next/link: Egyszerűsített API, automatikus <a> taggal

Az új 'app' könyvtár

Célja ennek a fejlesztésnek, hogy a fejlesztők könnyebben tudjanak route-olni, layout-okat építeni az új 'app' könyvtár használatával.

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Layout-ok

Használatukkal könnyen megoszthatjuk a felhasználói felületet a route-ok között, miközben azok megőrzik a state-et és így elkerülhetővé válnak a költséges rerendering-ek. Itt, ebben a mappában így egy helyen lakhatnak a route-ok, component-ek, tesztek, style-ok.

// app/blog/layout.tsx
export default function BlogLayout({ children }: { children: ReactNode }) {
  return <section>{children}</section>;
}

React Server Component-ek

A server first alkalmazások lettek az alapértelmezettek a React 18 Server Component-ek használatának köszönhetően. A Server Component-ek érkeztét és használatát azért is figyelte feszült várakozás, mert a kliensnek leküldött JavaScript mennyiségét jelentősen csökkenti ezáltal a kezdeti betöltés gyorsasága nagyságrendekkel gyorsabbá válhat.

Streaming

Az adott útvonalra lépve azonnali betöltéssel lehetséges loading state-eket megjeleníteni és azonnali stream-elésre képes a Next.js a felület kisebb részeibe, amint azok felhasználható állapotba kerülnek. Ezzel a módszerrel nem kell a teljes oldalbetöltésre várni felhasználóinknak, hanem azonnali interakcióba is léphet az oldallal, a backend kérés sosem késik. És korán se jön soha. Pontosan akkor érkezik, amikor akar.

Adatlekérés támogatása

Az async React 18-al bejött Server Component-ek és kiterjesztett fetch API lehetővé teszi a component szintű adat lekérdezést.

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}

És ami talán a legfontosabb. Az app könyvtár használatát fokozatosan lehet bevezetni a már létező page könyvtárakból, így lépésenként lehetséges az appok migrálása, ami egy nagyon kedves gesztus a véleményem szerint.

Turbopack

Abban az időben amikor írom ezt a cikket akkor még a Vite frissnek számít, természetesen nem teljesen újnak, de a Redditen özönlenek most is a cikkek, kérdések, hogy a Vite megfelelő-e production környezetben való használatra. Sikeres Webpack helyettesítőként tűnt fel, gyors volt annyira, hogy a fejlesztők örömmel kezdték használni. A Webpack szerves része volt a webfejlesztős életnek, 3 milliárd letöltése is erről tesz tanúbizonyságot. Azonban ez a JavaScript alapú Webpack elérte potenciálját és az öröklési procedúra mozgó fázisba került.

Erre itt van EZ! Még ki sem hűlt a trón, még csak újra fel sem melegedett, de itt az új Rust alapokon nyugvó Webpack helyettesítő, igen erős trónigénnyel.

A Next.js, hogy a Turbopack-ot használja a következő eredményeket hozta:

• 700* gyorsabb a Webpack-nél
• 10* gyorsabb a Vite-nél
• 4* gyorsabb hidegindításra képes, mint a Webpack

Az adatok a Turbopack hivatalos oldaláról származnak.

Most már elég a tömjénezésből, lássuk az adatokat

Hidegindítási idő - 100050001000030000 React Component esetében

File update-ek (HMR) - 100050001000030000 React Component esetében

Turbopack alapból támogatja a Server Component-eket, TypeScript-et, JSX-et, CSS-t és még sok mást. Azonban itt még alfa állapotban van, nincs minden feature implementálva, de ki lehet próbálni ismerkedés céljábólnext dev --turbo-al.

Az új next/image

A Next.js 13 megújult Image component-tel tér vissza, hogy layout shift nélkül, tudjon könnyedén képeket megjeleníteni és optimalizálni a sebességnövelés érdekében. A fejlesztők akik eddig is a next/image component-et használták már tapasztalhatták a javult Core Web Vitals eredményeket és most mindezt a Next.js következő szintre emeli.

Az új Image component

• Kevesebb JavaScript kódot szállít a kliensre
• Egyszerűbb, könnyebb konfigurálás, mint valaha
• Alapból hozzáférhető alt tag-ok
• Gyorsabb hiszen a natív lazy loading nem igényel hidratálást (React kontextusban hidratálásnak nevezzük, amikor a ReactDOM a szerverről leküldi a HTML-t és a React ehhez csatolja az event listener-eket és rendereli ezt a kliensen.)

import Image from 'next/image';
import avatar from './lee.png';

function Home() {
  // "alt" is now required for improved accessibility
  // optional: image files can be colocated inside the app/ directory
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

Az új next/font

A Next.js 13 egy teljesen új betűtípus rendszert mutat be:

• Automatikusan optimalizált betűtípusok, egyedi betűtípusokat is beleértve
• Külső hálózati kapcsolati kérések teljes eltávolítása, adatvédelmi irányelvek és teljesítmény érdekében
• Nulla layout shift CSS size-adjust használata esetén

Ez az új betűtípus rendszer lehetővé teszi az összes Google Font kényelmes használatát a teljesítmény és az adatvédelem szem előtt tartásával. A CSS és fontfájlokat a rendszer build time-ban tölti le, és a többi statikus asset-tel self-host-olja. Ezután a Google irányába nem lesz több hálózati kérés az oldal/app használatakor.

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

const inter = Inter();

<html className={inter.className}>

Támogatája az egyedi betűtípusokat és azok automatikus self-hosting-ját, caching-jét és preloading-ját.

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

Az új next/link

A next/link használatakor nem szükséges az next/link tagot children-ként mellékelni.

A Next.js 12.2 verziója óta volt ez kísérleti lehetőség, ám mostantól standard. Next.js 13 esetében, <Link> component mindig renderel <Link> tagot és forwardolni lehet props-okat a gyerek component-nek. Például:

import Link from 'next/link';

//Next.js 12: <a> has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

//Next.js 13: <Link> always renders <a>
<Link href="/about">
  About
</Link>

Amennyire én látom ez csupán nekünk fejlesztőknek ez kényelmi szempontból előnyös. Nincs több agyalás, hogy a Link vagy az <a>-ra kerüljön a stílus.

Összefoglalás

Most hogy gyors áttekintettük az újdonságokat és le is vett minket lábunkról felmerül jogosan a kérdés, hogy oké, mikor használhatom ezeket? Alapvetően a Next.js 13 az eddigi 'pages' könyvtárral már kész a production környezetre. Ezt már updatelhetjük is a következők segítségével:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Az 'app' könyvtár és a hozzá tartozó page, layout és loading még azonban prod környezetre nem áll készen, béta állapotban van. Ahogyan már írtam róla a Turbopack még alfa állapotban van.

Jelenlegi kódbázisunk Image component átállásához az alábbi codemont lehet használni

npx @next/codemod next-image-to-legacy-image ./pages

Jelenlegi kódbázisunk Link component átállásához pedig:

npx @next/codemod new-link ./pages

Ezek használatával (és egy minimális egyedi kódrendezéssel) pikk pakk át is migráltam az oldalt és immáron Next.js 13 -alatt fut ez amit olvasol.