Next.js: Pengertian, Cara Kerja, dan Tutorial Project Next.js

Konten [Tampil]

Next.js: Pengertian, Cara Kerja, dan Tutorial Project Next.js
Next.js: Pengertian, Cara Kerja, dan Tutorial Project Next.js

Next.js adalah framework berbasis JavaScript yang kini banyak digunakan untuk membuat website. Nah, kalau Anda sedang mencari framework terbaik untuk mempermudah proses development, Next.js bisa dijadikan pilihan.

Kenapa begitu? Bagi Anda yang belum mengenal Next js, framework ini ternyata punya segudang fitur unggulan yang membuatnya tak kalah dibanding framework lain. Mulai dari berbagai optimasi yang ditawarkan hingga dukungan CSS yang baik.

Bagaimana penjelasan lengkapnya? Penasaran dengan cara kerja Next.js?

Temukan jawabannya di artikel kali ini. Kami  akan mengulas tentang Next.js, mulai dari pengertian hingga tutorial Next.js yang bisa Anda praktikkan. Baca sampai selesai, ya!

Pengertian Next.js

Next.js adalah sebuah framework yang dibuat khusus untuk React.js. Framework ini bisa dibilang sebagai penyempurna React.js karena berhasil memperbaiki kekurangan React.js, terutama dalam hal rendering.

Next.js adalah framework yang siap untuk membangun sebuah project dengan mudah (production ready). Artinya, ketika Anda melakukan setup project Next.js untuk pertama kali, project tersebut siap untuk dijalankan.

Dengan demikian, Anda tidak perlu mengubah dari mode development ke mode production terlebih dahulu.

Disamping itu, Next.js adalah framework full-stack. Artinya, Next.js merupakan framework front-end untuk membangun tampilan website sekaligus framework back-end untuk menangani proses rendering dan pengelolaan database.

Dengan begitu, Anda tidak perlu menggunakan dua framework berbeda ketika membangun website. 

Tak heran, banyak perusahaan yang memakai Next.js untuk website mereka karena dianggap praktis dan efisien. Contohnya adalah TikTok, Hulu, Nike, AT&T, Ticketmaster, dan Marvel.

Anda telah mengetahui apa yang dimaksud dengan Next.js. Berikutnya mari memahami cara kerja Next.js secara detail.

Baca juga: 5 Framework Front-End Terbaik untuk Developer

Cara Kerja Next.js

Cara kerja Next.js adalah melakukan proses rendering website pada server (pre-rendering) sehingga ketika browser meminta sebuah halaman, server langsung merespon dengan memunculkan halaman berformat HTML.

Kenapa bisa begitu? Server Next.js sudah menyiapkan bundle package berisi React, JavaScript, dan HTML. Jadi, browser tidak perlu memanipulasi Document Object Model (DOM) terhadap package React dan JavaScript agar menampilkan HTML.

Hasilnya, konten website bisa ditampilkan secara instan dan pengguna tidak perlu menunggu proses rendering.

Hal tersebut berbeda dengan React.js di mana proses rendering website terjadi pada browser (client-side rendering). Artinya, jika ukuran website cukup besar, otomatis proses rendering akan memakan waktu yang lama.

Baca juga: Pengenalan Node.js Lengkap bagi Pemula

Nah, pre-rendering pada Next.js terbagi menjadi dua jenis, yaitu server-side rendering dan static-side generator.

Server Side Rendering (SSR)

Cara kerja Next.js pada server side rendering adalah server mengubah package React dan JavaScript menjadi HTML setiap kali browser memanggil halaman tersebut.

Static Site Generator (SSG)

Pada sistem static site generator, setiap browser memanggil halaman tersebut, server tidak perlu men-generate HTML lagi. Alasannya, server melakukan generate halaman HTML pada tahap build, yaitu tahap konversi kode program menjadi website utuh. 

Penggunaan SSG lebih direkomendasikan karena bisa mempercepat proses loading halaman pada browser.

Pun demikian, Anda sebenarnya bisa menggunakan jenis pre-rendering yang berbeda untuk tiap halaman website. Misalnya, SSG digunakan untuk Landing Page, sementara SSR digunakan untuk Homepage.

Fitur-fitur Next.js

Lantas, apa fitur-fitur Next.js yang membuat cara kerjanya jadi lebih efisien?

1. Routing Pages

Pada Next.js, semua file halaman pada folder pages juga merupakan file routingnya. Artinya, Anda tidak perlu membuat file routing yang berbeda untuk setiap halaman.

Dengan demikian, waktu yang diperlukan untuk menulis kode program jadi lebih singkat. Dampak positifnya, project yang dibangun akan cepat selesai.

2. Built-in CSS Support

Pada Next.js, Anda bisa mengimpor CSS dari file JavaScript karena karena Next.js memiliki fitur build in CSS support yang canggih.

Next.js menggunakan tag <style.jsx> secara default sehingga semua skrip CSS di dalam tag tersebut dapat dipisahkan untuk halaman tertentu. Dengan begitu, Anda tidak perlu menulis ulang skrip CSS pada file halaman.

3. Layout Component

Next.js memungkinkan Anda untuk memecah konstruksi halaman menjadi sekumpulan komponen. Nantinya, setiap komponen dapat digunakan kembali pada halaman lain dengan mudah.

Contohnya, Anda bisa menggunakan komponen header yang sama untuk semua halaman website tanpa perlu menulis skrip header berulang kali.

4. Image Optimization

Next.js menggunakan komponen gambar next/image, yang merupakan penyempurna dari komponen HTML <img>. Hal ini menyebabkan Next.js 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, Next.js 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 memuat teks hingga akhirnya semua konten dapat dimunculkan jadi lebih singkat.

6. Script Optimization

Komponen script pada Next.js memungkinkan Anda mengatur prioritas loading pada script pihak ketiga. 

Sebagai contoh, Anda punya tiga script yaitu analisis konten, pengelola iklan, dan widget media sosial. Anda 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

Next.js dapat menyiapkan file statis pada folder public. Gunanya, untuk memudahkan Anda ketika memanggil dan menggunakan file statis tersebut pada halaman tertentu.

Contohnya, pada file gambar, Anda bisa langsung memanggil bahkan mengatur ukuran gambar tersebut di setiap halaman yang dikehendaki. Jadi, Anda tidak perlu mengunggah beberapa gambar yang sama dalam berbagai ukuran.

8. Fast Refresh

Fast Refresh adalah fitur Next.js 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.

Selain delapan fitur yang disebutkan di atas, Next.js juga membawa fitur-fitur bawaan React.js yang bisa Anda gunakan tanpa adanya permasalahan dukungan sama sekali.

Baca juga: Belajar AngularJS: Pengertian dan Panduan Lengkap

Kelebihan Next.js

Dengan semua fitur yang dimiliki, Next.js punya kelebihan yang tidak bisa dianggap remeh, yaitu:

1. Lebih SEO Friendly

Pada Next.js, HTML sudah terbentuk saat browser memuat halaman website. Hal ini memudahkan Google melakukan crawling konten website dalam format HTML.

Hal itu membantu pemahaman Google lebih baik sehingga proses indeks bisa lebih mulus. Pada akhirnya, website akan cepat meranking di mesin pencari. 

Kalau mudah ditemukan pengunjung, potensi traffic website juga lebih besar, bukan? Itulah sebabnya Next.js adalah framework yang SEO Friendly.

2. Setup Project Mudah

Cara setup project menggunakan Next.js sangat mudah, bahkan untuk pemula sekalipun. Anda hanya perlu menyiapkan environment Node.js, lalu menjalankan sebuah script, tak perlu menyiapkan plugin ataupun library lain. 

Cara setup project Next.js ini bisa dilakukan pada platform Mac, Windows, atau Linux.

Bahkan, Anda bisa mensetup Next.js di layanan hosting yang mendukung environment Node.js.

Baca juga: Cara Setting Node.js di cPanel

3. Performa yang Baik

Next.js punya performa yang dapat diandalkan karena menerapkan dua fungsi yaitu code splitting dan client side navigation.

Berkat adanya Code Splitting, Next.js akan melakukan rendering JavaScript pada halaman yang akan dimuat di browser, bukan semua halaman. Dengan begitu, waktu yang dibutuhkan untuk memuat halaman jadi lebih cepat.

Dengan Client-Side Navigation, Anda bisa menggunakan komponen link untuk membuat navigasi antar halaman seperti pada Single-Page Application. Artinya, Anda tidak akan merasakan jeda loading ketika berpindah-pindah halaman di browser.

Baca juga: Mengenal Progressive Web App untuk Website Lebih Cepat

4. Deploy Project Mudah

Proses deploy project Next.js sangat mudah berkat integrasi Vercel, sebuah platform deployment berbasis cloud dengan dukungan kelas pertama (first-class support) terhadap Next.js.

Nah, platform deployment yang satu ini punya beberapa kelebihan, yaitu:

• Setiap halaman website bebas menggunakan antara SSG atau SSR.
• Halaman yang menggunakan SSG akan memakai server terpisah dari Vercel, sehingga meningkatkan kecepatan loading.
• Halaman yang menggunakan SSR akan menjadi Serverless Function, sehingga meringankan beban kerja server utama.

Dengan keunggulan-keunggulan di atas, Next.js sangat cocok digunakan di berbagai jenis website, mulai dari toko online, portal berita, blog, media sosial, hingga layanan streaming.

Baca juga: JSON: Pengertian, Fungsi, dan Cara Menggunakannya

Tutorial Next.js

Nah, setelah paham apa itu Next.js, cara kerja, dan kelebihannya, saatnya tutorial menggunakan Next.js. Tapi sebelumnya, persiapkan hal-hal hal berikut:

• Installer Node.js – Download Node.js sesuai dengan Operating System yang Anda gunakan. Di sini kami menggunakan installer untuk Windows.
• Software Code Editor – Kali ini kami menggunakan Visual Studio Code.
• Software Terminal – Kami menggunakan Command Prompt.

Jika sudah siap, mari ikuti tutorial yang meliputi cara setup dan cara membuat project Next.js.

Baca juga: Cara Install Node.js dan NPM di Ubuntu

Cara Setup Project Next.js

Untuk melakukan setup project Next.js, langkah pertama adalah Install Node.js yang telah Anda download. 

Kemudian, buka Command Prompt, kemudian jalankan perintah cd\ untuk menempatkan project pada directory C: dan lanjutkan dengan menjalankan perintah npx create-next-app helloworld.

Baca juga: 50 Perintah Command Prompt dan Fungsinya

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

Catatan: Anda bisa mengganti directory dan nama project sesuai keinginan.

Untuk masuk ke folder project, jalankan perintah cd helloword. Lanjutkan dengan perintah npm run dev untuk mulai proses running project. Tunggu hingga muncul tampilan berikut:

Terakhir, ketikkan URL: localhost/3000 pada browser. Berikut tampilan yang akan muncul, itu artinya proses setup project Next.js telah berhasil.

Mari lanjutkan dengan membuat project Next.js.

Baca juga: Pengertian dan Cara Install Vue.js

Cara Membuat Project Next.js

Setelah membuat project Next.js, saatnya membuat halaman baru dan melakukan navigasi antar halaman. 

Langkah-langkahnya sebagai berikut:

Pertama, Buka Visual Studio Code, klik File > Open Folder, lalu arahkan ke project helloworld. Berikut tampilan struktur project pada Visual Studio Code:

Selanjutnya, klik kanan pada folder pages > New File. Beri nama blog.js dan salin source code berikut:

export default function blog() {
    return (
      <>
        <h1>Niagahoster Blog</h1>
        <p>
          Niagahoster Blog menyajikan berbagai artikel tutorial, digital marketing, web development, dan insight bisnis.
        </p>
      </>
    );
  }

Kemudian, buka file index.js, hapus semua isinya dan ganti dengan source code berikut:

import Head from "next/head";
import Link from "next/link";
import styles from "../styles/Home.module.css";
 
export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>Hello World</h1>
        <div className={styles.grid}>
          <div className={styles.card}>
              <h3>Niagahoster Blog</h3>
            <Link href="blog">
              <p>
              Klik di sini!
            </p>
            </Link>
          </div>
        </div>
      </main>
      <footer className={styles.footer}>
      </footer>
    </div>
  );
}

Berikut ini hasil yang akan  ditampilkan pada browser:

Jika Anda menekan ‘Klik di sini!’, maka akan menuju halaman blog.

Selamat! Proses membuat project Next.js telah selesai. Mudah sekali bukan? Selama Anda mengikuti setiap langkah dengan teliti, project ini akan berjalan dengan lancar.

Baca juga: Cara Upload File Nuxt.js di Hosting

Yuk, Bangun Website dengan Next js!

Next.js adalah framework untuk React.js yang cocok untuk membuat website dengan berbagai fitur unggulan seperti Routing Pages dan Fast Refresh. Proses membangun website jadi lebih mudah dan mampu menghasilkan performa yang optimal.

Selain itu, Next.js juga merupakan salah satu pilihan framework terbaik bagi Anda yang butuh website SEO Friendly untuk menjaring pengunjung. Dengan kemampuan menampilkan HTML ketika initial load akan memudahkan Google dalam proses crawling website.

Next.js membutuhkan environment Node.js untuk bisa berjalan, baik secara lokal maupun online menggunakan layanan hosting. Namun, pastikan layanan hosting tersebut sudah mendukung Node.js.

Nah, Niagahoster bisa menjadi pilihan layanan hosting untuk project Anda karena sudah mendukung Node.js. Anda bisa memilih Paket Bisnis Unlimited Hosting atau layanan Cloud Hosting yang sesuai kebutuhan Anda.

Fitur yang ditawarkan pun cukup lengkap. Ada web server LiteSpeed untuk akses website super cepat. Ada juga Advance for Web Developer untuk kemudahan mengelola website lewat cPanel. Ditambah lagi Malware & DdoS Protection yang menjamin keamanan website Anda.

Tunggu apalagi, yuk bangun website dengan Next.js menggunakan layanan hosting Niagahoster sekarang juga!

Pilih Paket Bisnis Hosting Niagahoster!

Pilih Paket Cloud Hosting Niagahoster!

Demikian artikel kali ini, semoga bermanfaat. Jika masih ada pertanyaan, tak perlu sungkan untuk bertanya melalui kolom komentar. Sampai jumpa lagi!

The post Next.js: Pengertian, Cara Kerja, dan Tutorial Project Next.js appeared first on Niagahoster Blog.

source https://www.niagahoster.co.id/blog/next-js-adalah/
via Blogger https://ift.tt/3FunENs
November 18, 2021 at 11:28AM
via Blogger https://ift.tt/3wVP3Vc
November 18, 2021 at 11:28AM