Sekilas Update Di Nextjs 12

4 min readNov 8, 2021

Diacara NextJS Conf 2021 pada akhir Oktober 2021 kemarin, ada banyak hal yang disampaikan oleh Vercel selaku pembuat NextJS salah satunya adalah rilisnya versi 12 ini dengan berbagai update, yuk kita bahas satu per satu.

Rust Compiler

Digadang-gadang memiliki proses refresh 3x lebih cepat dan proses build 5x lebih cepat daripdaa Next versi 11. Kompiler Rust dari NEXT ini dibangun di atas SWC, sebuah platform terbuka untuk generasi berikutnya dari fast tooling. Improvement dan fitur lain melliputi :

Peningkatan kecepatan lebih lanjut untuk basis kode yang besar: Kami telah memvalidasi kompiler Rust dengan beberapa basis kode Next.js yang paling besar di dunia.
Peningkatan observabilitas ke dalam kinerja: Next.js sekarang menampilkan waktu refresh lebih cepat di konsol untuk kompilasi klien dan server, termasuk jumlah modul dan file yang dikompilasi (hal ini tidak ditemukan di Next 11 yang hanya menampilkan compiled selesai).
Peningkatan webpack: Next telah membuat banyak peningkatan pada webpack, termasuk mengoptimalkan Fast Refresh dan membuat on-demand entries lebih andal.

By default Rust compiler langsung berjalan di Next JS 12, kamu juga bisa mengaktifkan opsi SWC minification, yang bisa dibilang 7x lebih cepat dari terser, cukup dengan menambahkan config di next.config.js .

// next.config.jsmodule.exports = {
  swcMinify: true
}

Mengenalkan Middleware

Bagi kamu yang sudah terbiasa menggunakan Express JS dan berbagai module Node JS lain, pastika tidak asing dengan istilah middleware ini. Middleware memungkinkan Anda untuk menggunakan kode di atas konfigurasi. Ini memberi Anda fleksibilitas penuh di Next.js karena Anda dapat menjalankan kode sebelum request/response diselesaikan. Berdasarkan request masuk pengguna, Anda dapat mengubah response dengan menulis ulang, mengarahkan ulang, menambahkan header, atau bahkan streaming HTML.

Sample penggunaan middleware ini antara lain :

autentikasi / otorisasi
loging
modifikasi request
dan masih banyak lagi

Cukup dengan menambahkan file baru di directory pages.

// pages/_middleware.jsexport function middleware(req, ev) {
  return new Response('Hello, world!')
}

Persiapan Untuk React18

React 18 akan menambahkan fitur seperti Suspense, pembaruan otomatis, API seperti startTransition, dan API streaming baru untuk rendering server dengan dukungan untuk React.lazy.

Kami telah bekerja sama dengan tim React di Facebook untuk mempersiapkan Next.js untuk React 18 saat bergerak menuju rilis yang stabil. Kami membuat fitur ini tersedia untuk dicoba hari ini di Next.js 12 di bawah bendera eksperimental.

Tapi sejak saat ini kamu juga bisa sih mencoba React18 di next js dengan instal versi alphanya

npm install react@alpha react-dom@alpha

<Image /> Sekarang Support Avif

Avif adalah salah satu next gen image yang kompresinya 20% lebih kecil dari Webp , tapi dengan kualitas yang sama. Secara default tidak disupport oleh banyak browser saat ini, tapi Next dengan component next/image bisa membantu web kamu support dengan dengan ekstensi ini.

Tambahan yang perlu dilakukan adalah menambahkan config di next.config.js sebagai berikut:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

Bot-Aware ISR Fallback

Saat ini, Incremental Static Regeneration dengan fallback: true membuat status fallback sebelum merender konten halaman pada permintaan pertama ke halaman yang belum dibuat. Untuk memblokir halaman agar tidak dimuat (rendering server), Kamu perlu menggunakan fallback: ‘blocking’.

Di Next.js 12, web crawler (misalnya bot pencarian) akan secara otomatis merender halaman ISR server menggunakan fallback: true, sambil tetap menyajikan behaviour yang seperti web biasanya untuk Pengguna non-crawler. Ini mencegah crawler mengindeks status loading (alias nothing).

ES Modules Support

ES Modules adalah standarisasi official untuk module system di Javascript, yang tentu suadh disupport oleh banyak browser bahkan Node JS.

Standar ini mendorong ekosistem web ke depan dengan mengaktifkan ukuran paket dan bunding JavaScript yang lebih kecil , yang pada akhirnya mengarah pada pengalaman pengguna yang lebih baik. Saat ekosistem JavaScript bertransisi dari Common JS (standar lama) ke modul ES, Next berkomitmen untuk membantu pengembang secara bertahap mengadopsi peningkatan ini tanpa merusak perubahan yang tidak perlu.

URL Imports

Next JS juga melakukan eksperimental support untuk import ES Modules melalui URL, no install atau build step yang terpisah.

Jika impor URL terdeteksi, Next.js akan menghasilkan file next.lock untuk melacak sumber daya jarak jauh. Impor URL di-cache secara lokal untuk memastikan Anda tetap dapat bekerja secara offline. Next.js mendukung impor URL klien dan server.

Untuk memulai , tambahkan domain / subdomain yang diizinkan di dalam next.config.js:

// next.config.js
module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}

Sisanya kamu bisa import secara langsung dari URL ditempat yang membutuhkan

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

React Server Components

React Server Components memungkinkan kita untuk merender semuanya, termasuk komponen itu sendiri, di server. Ini pada dasarnya berbeda dari rendering sisi server tempat Anda membuat HTML sebelumnya di server. Dengan Komponen Server, tidak diperlukan JavaScript sisi klien, membuat rendering halaman lebih cepat. Ini meningkatkan pengalaman pengguna aplikasi Anda, memasangkan bagian terbaik dari rendering server dengan interaktivitas sisi klien

Untuk bisa memulainya, kamu memerlukan mengubang konfigurasi next.config.js , menjadi sebagai berikut.

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

Untuk membuat server component, cukup membuat halaman baru di dalam pages dan menggunakan nama akhirnya .server.js, Komponen klien ini akan terhydrate dan menjadi interaktif, jadi Anda menambahkan fungsionalitas seperti upvotes.

Source :

https://maucoding.com/post/Sekilas-Update-di-NextJS-12-61885479f40fd84ec2c6039f