Performa sebagai default dengan Next.js

Next.js menangani banyak pengoptimalan di aplikasi React sehingga Anda tidak perlu melakukannya

Djirdeh Houssein

Next.js adalah framework React yang tidak dapat berubah dengan sejumlah pengoptimalan performa yang disertakan. Ide utama di balik framework ini adalah untuk memastikan aplikasi dimulai dan tetap berperforma sebaik mungkin dengan menyertakan kemampuan ini secara default.

Pengantar ini akan secara singkat membahas banyak fitur yang disediakan oleh framework pada tingkat tinggi. Panduan lain dalam koleksi ini akan mempelajari fitur-fitur ini secara lebih mendetail.

Apa yang akan Anda pelajari?

Meskipun Next.js menyediakan sejumlah pengoptimalan performa secara default, panduan ini bertujuan untuk menjelaskannya secara lebih mendetail dan menunjukkan cara menggunakannya untuk membangun pengalaman yang cepat dan berperforma baik.

Ada banyak pengoptimalan yang dapat ditambahkan ke situs React secara umum yang juga berfungsi untuk aplikasi yang dibangun dengan Next.js. Hal ini tidak akan dibahas karena fokusnya adalah pada hal yang secara khusus disediakan Next.js. Untuk mempelajari lebih lanjut pengoptimalan React umum, lihat kumpulan React kami.

Apa perbedaan Next.js dengan React?

React adalah library yang mempermudah pembuatan antarmuka pengguna menggunakan pendekatan berbasis komponen. Meskipun canggih, React secara khusus merupakan library UI. Banyak developer menyertakan alat tambahan seperti pemaket modul (misalnya webpack) dan transpiler (misalnya Babel) untuk memiliki toolchain build yang lengkap.

Dalam koleksi React, kami menggunakan pendekatan Create React App (CRA) untuk menjalankan aplikasi React dengan cepat. CRA memudahkan penyiapan aplikasi React dengan menyediakan toolchain build lengkap menggunakan satu perintah.

Meskipun ada beberapa pengoptimalan default yang dimasukkan ke dalam CRA, alat ini bertujuan untuk memberikan penyiapan yang sederhana dan mudah. Pilihan ini diberikan kepada developer untuk memutuskan apakah akan mengeluarkan dan mengubah konfigurasinya sendiri.

Next.js, yang juga dapat digunakan untuk membuat aplikasi React baru, menggunakan pendekatan yang berbeda. Solusi ini langsung memberikan sejumlah pengoptimalan umum yang ingin dimiliki banyak developer tetapi sulit disiapkan, seperti:

  • Rendering sisi server
  • Pemisahan kode otomatis
  • Pengambilan data rute
  • Pemilihan rute sistem file
  • Gaya visual CSS-in-JS (styled-jsx)

Menyiapkan

Untuk membuat aplikasi Next.js baru, jalankan perintah berikut:

npx create-next-app new-app

Kemudian buka direktori dan mulai server pengembangan:

cd new-app
npm run dev

Penyematan berikut menunjukkan struktur direktori aplikasi Next.js yang baru.

  • Klik Remix untuk Mengedit agar project dapat diedit.
  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.

Perhatikan bahwa direktori pages/ dibuat dengan satu file: index.jsx. Next.js mengikuti pendekatan pemilihan rute sistem file, dengan setiap halaman dalam direktori ini berfungsi sebagai rute terpisah. Membuat file baru dalam direktori ini, seperti about.js, akan otomatis membuat rute baru (/about).

Komponen juga dapat dibuat dan digunakan seperti aplikasi React lainnya. Direktori components/ telah dibuat dengan satu komponen, nav.js, yang sudah diimpor di index.js. Secara default, setiap impor yang digunakan di Next.js hanya diambil saat halaman tersebut dimuat, sehingga memberikan manfaat pemisahan kode otomatis.

Selain itu, setiap pemuatan halaman awal di Next.js dirender sisi server. Jika membuka panel Jaringan di DevTools, Anda dapat melihat permintaan awal karena dokumen menampilkan halaman yang sepenuhnya dirender server.

Tab Preview pada panel Network menunjukkan bahwa Next.js menampilkan HTML yang lengkap secara visual saat ada halaman yang diminta.
Tab Pratinjau di panel Jaringan menunjukkan bahwa Next.js menampilkan HTML yang lengkap secara visual saat halaman diminta.

Ini hanyalah sedikit dari banyak fitur yang disediakan secara otomatis oleh Next.js. Banyak yang dapat disesuaikan dan diubah untuk berbagai kasus penggunaan.

Apa langkah selanjutnya?

Kata-kata semuda mungkin 😝

Setiap panduan lain dalam koleksi ini akan menjelajahi fitur spesifik Next.js secara mendetail: