NextJs adalah sebuah framework JavaScript yang dibuat khusus untuk ReactJs. Framework ini bisa dibilang sebagai penyempurna ReactJs karena berhasil memperbaiki kekurangan ReactJs, terutama dalam hal rendering. Jika kalian sedang mencari framework terbaik untuk mempermudah proses development, NextJs bisa dijadikan pilihan. 

Framework ini ternyata punya banyak fitur unggulan yang membuatnya tak kalah dibanding framework lain. Mulai dari berbagai optimasi yang ditawarkan hingga dukungan CSS yang baik. NextJs adalah framework yang siap untuk membangun sebuah project dengan mudah (production ready). Artinya, ketika Kalian melakukan setup project NextJs untuk pertama kali, project tersebut siap untuk dijalankan. 
<h2>Fitur Unggulan NextJs </h2>
1. Routing Pages
Pada NextJs, semua file halaman pada folder pages juga merupakan file routingnya. Artinya, kalian tidak perlu membuat file routing yang berbeda untuk setiap halaman. Dengan demikian, waktu yang diperlukan untuk menulis kode program jadi lebih singkat. 
2. Built-in CSS Support
Pada NextJs, Kalian bisa mengimpor CSS dari file JavaScript karena karena NextJs memiliki fitur build in CSS support yang canggih. NextJs menggunakan tag &lt;style.jsx&gt; secara default sehingga semua skrip CSS di dalam tag tersebut dapat dipisahkan untuk halaman tertentu. Dengan begitu, Kalian tidak perlu menulis ulang skrip CSS pada file halaman. 
3. Layout Component NextJs memungkinkan Kalian untuk memecah konstruksi halaman menjadi sekumpulan komponen. Nantinya, setiap komponen dapat digunakan kembali pada halaman lain dengan mudah. Contohnya, Kalian bisa menggunakan komponen header yang sama untuk semua halaman website tanpa perlu menulis skrip header berulang kali. 4. Image Optimization
NextJs menggunakan komponen gambar next/image, yang merupakan penyempurna dari komponen HTML &lt;img&gt;. Hal ini menyebabkan NextJs lebih cocok untuk ekosistem website modern. Pasalnya, komponen tersebut dapat melakukan resize gambar sesuai dengan konfigurasi yang ditetapkan browser. Ukuran gambar jadi lebih responsif terhadap perangkat yang digunakan untuk membuka website. 5. Font Optimization
Secara default, NextJs akan mengatur inline font CSS secara otomatis pada tahap build. Hal tersebut dapat mempercepat proses mengenalkan (deklarasi) font. Hasilnya, waktu yang dibutuhkan sebuah halaman untuk memproses teks hingga akhirnya semua konten dapat dimunculkan jadi lebih singkat. 6.Script Optimization
Komponen script pada NextJs memungkinkan Kalian mengatur prioritas loading pada script pihak ketiga. Sebagai contoh, Kalian punya tiga script yaitu analisis konten, pengelola iklan, dan widget media sosial. Kalian bisa mengatur analisis konten yang jadi prioritas utama dengan menempatkannya pada baris teratas. Hal tersebut dapat mempercepat loading website dan mencegah konten tidak muncul di website. 7. Static File Serving NextJs dapat menyiapkan file statis pada folder public. Gunanya, untuk memudahkan Kalian ketika memanggil dan menggunakan file statis tersebut pada halaman tertentu. Contohnya, pada file gambar, Kalian bisa langsung memanggil bahkan mengatur ukuran gambar tersebut di setiap halaman yang dikehendaki. Jadi, Kalian tidak perlu mengunggah beberapa gambar yang sama dalam berbagai ukuran. 8. Fast Refresh Fast Refresh adalah fitur NextJs yang memungkinkan sebuah halaman melakukan refresh sesaat setelah mendeteksi perubahaan script. Fitur ini bermanfaat bagi developer, karena Anda tidak perlu lagi merefresh browser untuk melihat hasil setiap menulis atau mengubah script. Cara Setup NextJs Untuk Setup Project NextJs hampir sama seperti ReactJs berikut caranya: 1. Pastikan telah menginstall <a href="https://nodejs.org/en/download/" target="_blank">NodeJs</a> pada Device Kalian
2. Buka terminal/command prompt 3. Buat directory/folder untuk menyimpan project menggunakan cd dan mkdir.
4. Pastikan kalian telah berada di directory project kemudian ketik “npx create-next-app hellonext”, hellonext merupakan nama project yang dapat disesuaikan dengan keinginan kalian. 
<div style="text-align:left;"><img src="https://ewr1.vultrobjects.com/lmsbzzbx/userFile/14y80n1.png" alt="undefined" style="height: auto;width: auto"/></div>

5. Tunggu hingga proses setup selesai. Jika berhasil, tampilan yang muncul seperti berikut:

<div style="text-align:left;"><img src="https://ewr1.vultrobjects.com/lmsbzzbx/userFile/1ljhrb2.png" alt="undefined" style="height: auto;width: auto"/></div>
6. Jalankan perintah “cd hellonext” untuk masuk ke project NextJs. Kemudian jalankan perintah “npm run dev” untuk running project.

<img src="https://ewr1.vultrobjects.com/lmsbzzbx/userFile/vptpis3.png" alt="undefined" style="height: auto;width: auto"/>

7.Kemudian ketikkan “localhost:3000” pada Web Browser untuk mengakses project kalian.

<img src="https://ewr1.vultrobjects.com/lmsbzzbx/userFile/7m4occ4.png" alt="undefined" style="height: auto;width: auto"/>

NextJs adalah sebuah framework JavaScript yang dibuat khusus untuk ReactJs. Framework ini bisa dibilang sebagai penyempurna ReactJs karena berhasil memperbaiki kekurangan ReactJs, terutama dalam hal rendering. Jika kalian sedang mencari framework terbaik untuk mempermudah proses development, NextJs bisa dijadikan pilihan.


Berkenalan dengan NextJs