Next.js 13 istifadəyə verildi
Next.js 13 versiyasını çıxardı
- app/ Directory (beta): Daha asan, daha sürətli, daha az müştəri JS.
- Layouts
- React Server Components
- Streaming
- Turbopack (alfa): 700 dəfəyə qədər daha sürətli Rust əsaslı Veb paketinin dəyişdirilməsi.
- New next/image (stable): Faster with native browser lazy loading.
- New @next/font (beta): Sıfır layout yerdəyişməsi ilə avtomatik öz-özünə yerləşdirilən şriftlər.
- Improved next/link: Avtomatik <a> ilə sadələşdirilmiş API.
Çalışdırmaqla bu gün yeniləyin:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
app/ Directory (beta)
Next.js-in ən çox sevilən xüsusiyyətlərindən biri fayl sistemi yönləndiricisidir. Faylı qovluğun içərisinə buraxın və siz dərhal tətbiqinizdə routerlər yarada bilərsiniz. Konfiqurasiya tələb olunmur.
Bu gün app/directory (beta) tətbiqi ilə Next.js-də routing və layouts təcrübəsini təkminləşdirir. Bu, icma rəyi üçün əvvəllər dərc edilmiş Layouts RFC-nin nəticəsidir. Yeni router aşağıdakıları dəstəkləyir:
- Layouts: Vəziyyəti (state) qoruyaraq və re-render'dən (təkrar yenilənmədən) qaçaraq, UI-ni routerlərinin arasında asanlıqla paylaşır
- Server Components (Server Komponentləri): Ən dinamik tətbiqlər üçün ilk olaraq serveri default (standart) edir.
Turbopack (alpha)
Next.js 13-ə Webpack-in Rust əsaslı yeni varisi Turbopack daxildir.
Webpack 3 milyard dəfə yüklənib. Vebin qurulmasının ayrılmaz hissəsi olsa da, JavaScript-ə əsaslanan alətlərlə mümkün olan maksimum performans həddinə çatmaq istəyirlər.
Next.js 13 ilə Turbopack alfanın istifadəsi aşağıdakı nəticələrə gətirib çıxarır:
- Webpack-dən 700 dəfə daha sürətli yeniləmələr.
- Vite ilə müqayisədə 10 dəfə daha sürətli yeniləmə.
- Webpack ilə müqayisədə 4 dəfə daha sürətli işləyir.
Turbopack yalnız development məkanında tələb olunan minimum özəllikləri birləşdirir, ona görə də başlanğıc vaxtı çox sürətlidir. 3000 modulu olan proqramda Turbopack-in işə düşməsi 1,8 saniyə çəkir. Vite 11,4 saniyə, Webpack isə 16,5 saniyə çəkir.
Bunların üzərinə Evan You Twitter-də Turbo ilə Viteni müqayisə edən bir Tweet mövzusu yaratdı.
next/image
Next.js-in yeni versiyası güclü yeni Image komponentini təqdim edir. Bu, bizə şəkilləri dəyişmədən asanlıqla göstərməyə və artan performans üçün faylları optimallaşdırmağa imkan verir.
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" />;
}Yeni Şəkil komponenti:
- Daha az client-side JavaScript göndərir.
- Stil vermək və konfiqurasiya etmək daha asandır.
- Varsayılan olaraq alt teqlərin tələbləri daha əlçatandır.
- Veb platforması ilə uyğunlaşır.
- Daha sürətlidi, çünki navtive lazy loading hydration tələb etmir.
next/image Next.js 13-ə yenilə:
npx @next/codemod next-image-to-legacy-image ./pages
next/link
Yeni next/link komponenti artıq child kimi əl ilə <a> etiketinin əlavə edilməsini tələb etmir.
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>next/link Next.js 13-ə yenilə:
npx @next/codemod new-link ./pages
next/font
Next.js 13 yeni şrift sistemini təqdim edir:
- Xüsusi şriftlər daxil olmaqla, şriftlərinizi avtomatik olaraq optimallaşdırır.
- Təkmilləşdirilmiş məxfilik və performans üçün xarici şəbəkə sorğularını silir.
- İstənilən şrift faylı üçün daxili avtomatik hostinq.
- CSS ölçüsünü tənzimləmə xassəsindən istifadə edərək avtomatik olaraq sıfır düzülüş sürüşməsi.
import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>Next.js 13 sistem tələbləri:
Node.js 14.6.0 və ya daha yeni,
MacO, Windows və Linux dəstəklənir.
Next.js 13 haqqında framework təkmilləşdirmələri bu Tweetdən tapa bilərsiniz.
Next.js 13 haqqında framework təkmilləşdirmələri bu Tweetdən tapa bilərsiniz
Next.js Konf 2022 Youtube Videosu
Müəllif
