ID
EN
Bitkamp logo
Published on

Membuat Website dengan Nextjs. Panduan Pemula

Membuat website dengan nextjs semakin populer saat ini, terutama di kalangan pengembang yang telah terbiasa bekerja di lingkungan React dan Javascript.

Nextjs adalah salah satu library React, semacam Remix, Gatsby dan lainnya. Library-library tersebut diciptakan untuk memberikan kemudahan dalam pengembangan website yang optimal dan efisien. Fitur-fitur yang canggih dan fleksibilitas yang tinggi menjadi daya tarik bagi para pengembang yang ingin meningkatkan pengalaman pengguna pada website yang mereka bangun.

Tulisan ini mengasumsikan kamu sudah paham sedikit tentang React. Namun demikian, jika belum, kamu bisa langsung ke bagian tentang “menginstal next.js”.

Yang penting untuk kamu pahami dari tulisan ini adalah: 1) Menginstal nextjs, 2) Konsep static-routing, 3) Rendering, dan 4) Cara deploy program ke internet.

Sekilas Tentang React

Sebelum kita belajar membuat website dengan Nextjs, kita akan sedikit membahas tentang React. React adalah sebuah library JavaScript yang dirilis oleh Facebook, saat ini Meta, pada tahun 2013. Belakangan, React semakin populer dan bahkan melampaui Angular, framework JavaScript besutan Google, yang telah hadir lebih dulu.

Salah satu keunggulan React adalah kemudahannya dalam membangun aplikasi web dengan pendekatan komponen. Dengan React, para pengembang dapat mengembangkan aplikasi yang kompleks tanpa kesulitan dalam mengorganisir dan memelihara kode. Penambahan fitur dan debugging juga menjadi lebih mudah daripada sebelumnya.

Kenapa Nextjs?

Membuat website dengan Nextjs merupakan pilihan yang lebih baik dibandingkan membuat langsung dengan React. Hal ini dikarenakan ada satu keterbatasan yang menonjol pada React, yaitu dukungannya yang kurang optimal terhadap pengembangan website yang ramah-mesin-pencari (SEO-friendly).

Ini terjadi karena React awalnya dirancang untuk bekerja pada sisi klien (browser), yang dikenal dengan istilah Client Side Rendering (CSR). Dalam CSR, konten website dihasilkan oleh JavaScript di sisi klien setelah halaman dimuat, yang tidak ideal untuk keperluan SEO.

Untuk mengatasi keterbatasan tersebut, pada tahun 2016, sebuah framework React bernama Next.js, hadir untuk melengkapi kekurangan React, tidak hanya dalam hal optimalisasi SEO, tetapi juga menyediakan fitur-fitur lain yang berguna dalam pengembangan web, yang tidak atau belum tersedia pada React.

Keunggulan Nextjs

Dalam hal pengembangan website, Nextjs memiliki sejumlah keunggulan. Di antara keunggulan tersebut, setidaknya di versi 13, adalah sebagai berikut:

  • Routing berbasis sistem file. Dengan fitur ini, kamu bisa membuat navigasi website hanya dengan membuat file page.js di folder program kamu, tanpa harus menginstal modul apa pun.
  • Optimisasi web bawaan (bult-in). Dengan ini, optimilasasi gambar, font dan script terjadi secara otomatis tanpa kamu harus melakukan pengaturan apa pun atau menginstal modul tambahan apa pun.
  • Render pada sisi server atau pun pada sisi klien yang dapat diatur dengan mudah. Fitur ini memungkinkan pengembang memilih halaman mana yang akan dioptimalkan untuk SEO dan mana yang tidak.
  • Nextjs diperkuat dengan Turbopack dan SWC, yang memungkinkan proses pengembangan aplikasi menjadi lebih cepat.

Betapa pun banyak keunggulan yang dimiliki Next.js dibandingkan React, Nextjs bukanlah kompetitor atau alternatif React semisal Vuejs atau Nuxtjs. Nextjs adalah framework React yang didedikasikan untuk pengembangan website. Ini artinya, jika kamu paham dan mampu bekerja dengan React, semua itu dapat diterapkan di Nextjs. Selain itu, pengembangan Nextjs juga mendapat support dari tim pengembang React sendiri.

Menginstal Nextjs

Sebelum memulai instalasi Next.js, pastikan kamu telah menginstal Node.js di komputer. Next.js membutuhkan Node.js untuk menjalankan lingkungan pengembangannya. Selain itu, pastikan juga npm terinstal. Untuk editornya, kamu bisa menggunakan Visual Studio Code.

Jika semua sudah siap, buka terminal command prompt, lalu buat direktori baru untuk menyimpan proyek Next.js kamu. Untuk membuka command prompt di windows, kamu bisa mengetikkan ‘command prompt’ di menu pencarian windows.

Arahkan ke direktori projek menggunakan perintah cd nama_direktori.

Atau, cara lainnya, kamu buka file explorer dan pilih folder yang akan kamu jadikan sebagai folder projek. Lalu di dalam folder tersebut, kamu tekan shitf+klik kanan untuk menampilkan command prompt.

Di folder projek yang kamu pilih tadi, masukkan perintah berikut ke command prompt. 

npx create-next-app@latest

Nantinya kamu akan melihat tampilan pertanyaan-pertanyaan berikut, yang harus kamu jawab. 

What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes

Baris pertama adalah nama projek kamu. Kamu bisa menamainya dengan bebas, misalnya “my-app”, “cool-web” atau lainnya. Untuk pertanyaan sisanya, jika kamu belum mengerti sepenuhnya, ikuti saja contoh jawaban di atas! Lalu tunggu sampai proses instalasi selesai.

Jika semua proses instalasi selesai, kamu bisa periksa folder projek kamu. Folder yang tadinya kosong, sekarang berisi struktur file seperti gambar di bawah ini.

gambar

Gunakan visual code yang tadi diinstall, lalu buka file package.json! 

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Perhatikan blok skrip yang ada di file. Kode dev, build, start dan lint adalah perintah-perintah yang nantinya bisa kamu masukkan ke terminal command-prompt.

Menjalankan Program Nextjs

Untuk menjalankan program, mari kita coba masukkan perintah dev. Ketik npm run dev ke command-prompt kamu lalu enter.

gambar

Jika proses selesai, pada layar console akan muncul tulisan “the web is ……”. Itu artinya, web kamu sudah bisa diakses di browser dengan alamat localhost:3030. Sekarang buka browser dan masukkan alamat tersebut!

gambar

Selamat! kamu telah berhasil membuat website dengan nextjs.

Selanjutnya, buka file page.tsx di editor. Ubah tag <title> dengan nama kamu, atau apa saja, lalu simpan (ctrl+s). Secara otomatis, perubahan tersebut akan terlihat di localhost:3000 pada browser. Inilah fungsi perintah run dev, yaitu untuk menjalankan program dengan mode development.

Hentikan program dengan ctrl+c pada konsol. Setelah berhenti, kita ganti dengan perintah npm run build, lalu enter. Pada layar konsol akan terlihat proses building, di mana komponen-komponen pada nextjs diubah menjadi file-file javascript dan CSS yang tersimpan di folder .next.

gambar

Jika proses building selesai, kamu bisa beri perintah npm run start. Tujuannya adalah untuk menjalankan program yang sudah di-build tadi di folder .next.

Sekarang, kamu bisa membuka browser lagi dan masuk ke alamat localhost:3000. Yang tampil sama seperti sebelumnya. Bedanya, kali ini, proses loading lebih cepat.

Jika kamu mengedit file page.ts, perubahannya tidak akan tampil otomatis pada browser. Hal ini karena program yang dijalankan pada browser adalah program mode produksi yang berasal dari folder .next yang tidak bisa lagi diedit. Jika kamu ingin mengubahnya, kamu harus mengulang perintah npm run build lagi seperti sebelumnya.

Bermain dengan Fitur-fitur Pokok

Membuat website dengan nextjs memberikan banyak kemudahan. Namun di sini, sebagai permulaan, kita akan membatasi pembahasan pada fitur routing saja.

1) Routing Statis

Salah satu fitur tipikal nextjs adalah fitur routing. Untuk memahaminya, buatlah folder baru bernama “about” di dalam folder /app.

gambar

Di folder “about”, tambahkan file page.tsx. Buka file tersebut, lalu masukkan kode berikut dan simpan.

about/page.tsx
export default function hello() {
  return (
    <div>
      Hello, I'm a creator of this website
    </div>
  )
}

Jalankan perintah npm run dev seperti sebelumnya. Buka browser dan masuk ke alamat localhost:3000/about. Di browser, akan tampil seperti berikut.

gambar

Demikian halnya jika kamu ingin membuat halaman website, misalnya, “address” (atau, bisa nama apa saja). Maka kamu buat folder “address” di folder /app. Dan di folder “address” tersebut buatlah file page.tsx seperti sebelumnya. Masukkan kode berikut. Ingat, nama file harus page.tsx, tidak boleh nama lain.

address/page.tsx
export default function Address() {
  return (
    <div>
      Hello, it is address page
    </div>
  )
}

Selanjutnya, kamu masuk ke alamat localhost:3000/address di browser, maka akan tampil seperti gambar berikut.

gambar

Ini disebut static-routing pada Nextjs, yaitu navigasi halaman website dengan cara membuat file page.tsx.

Routing semacam ini bisa dikembangkan lagi menjadi routing bersarang (nested-routing).

Apa itu nested-routing?

Untuk memahaminya, kita gunakan proyek yang sebelumnya kita buat. Di dalam folder about, buat lagi folder, misalnya, me. Dan di dalam folder me, buat file page.tsx seperti sebelumnya. Sehingga struktur filenya sebagai berikut.

gambar

Di file page.tsx yang baru saja dibuat, masukkan kode berikut:

about/me/page.tsx
export default function Me() {
  return (
    <div>
      Hello, it is me
    </div>
  )
}

Jalankan program dengan npm run dev seperti biasa. Lalu buka browser dan arahkan ke halaman localhost:3000/about/me, maka akan tampil seperti berikut:

gambar

Silahkan kembangkan lagi halaman /about atau halaman /address seperti contoh di atas. Fitur routing ini memungkinkan kita membuat halaman-halaman website dengan mudah hanya dengan cara membuat folder dan file page.tsx.

Static-routing dirender secara statis oleh program nextjs. Maksudnya, struktur html halaman disimpan dalam bentuk cache, sehingga request berikutnya untuk rute yang sama akan lebih cepat.

Selain static-routing, ada pula dynamic-routing, di mana komponen page.tsx dapat menerima parameter secara dinamis. Tentang ini, kita akan membahasnya dalam kesempatan lain.

2) Konvensi File

Routing dalam Nextjs didasarkan pada sistem file. Misalnya, file page.tsx harus selau ada, untuk menampilkan konten web dalam browser. Jika tidak ada page.tsx, maka tidak akan ada yang tampil di browser.

Selain page.tsx, Nextjs memiliki standar nama file lain yang bersifat baku dan tidak boleh diganti. File-file tersebut adalah layout.tsx, error.tsx, not-found.tsx dan loading.tsx. Nama-nama file ini tidak boleh diganti bebas. Jika diganti dengan nama lain, maka file tersebut tidak akan berfungsi seharusnya.

Di folder root projek kamu, pastikan kamu memiliki struktur seperti di bawah ini. Jika tidak, maka buat filenya. Struktur file ini bisa kamu terapkan juga di folder-folder lain, misalnya di folder about, folder about/me, atau di folder address yang sudah kita buat sebelumnya.

gambar

File-file ini memiliki fungsi yang bekerja secara otomatis. Saya akan membahas layout.tsx, not-found.tsx dan error.tsx. Untuk loading.tsx, kita akan membahasnya di kesempatan lain.

layout.tsx

Buka file layout.tsx. Jika masih kosong, isi dengan kode berikut:

layout.tsx
export default function Layout({children}) {
  return (
    <div color='red'>
      {children}
    </div>
  )

Kode ini berisi komponen Layout yang akan membuat konten apapun di dalamnya menjadi berwarna merah.

Jalankan program dengan npm run dev, lalu lihat di browser. Teks yang sebelumnya tidak berwarna sekarang menjadi berwarna merah. Hal ini karena komponen page.tsx secara otomatis menjadi children dari komponen layout.tsx. Dengan kata lain, komponen Layout secara otomatis membungkus komponen Page.

not-found.tsx

Buka file not-found.tsx. Jika masih kosong, isi dengan kode berikut:

not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h1>Page not found</h1>
    </div>
  );
}

Jalankan program dengan npm run dev. Di browser, masukkan alamat localhost:3000/about/you.

gambar

Browser akan menampilkan teks “Page not found” seperti di atas. Teks tersebut berasal dari komponen NotFound. Komponen ini dipanggil secara otomatis, karena rute yang dicari tidak ada, karena memang kita sebelumnya tidak membuat rute /about/you.

error.tsx

Buka file error.tsx. Jika masih kosong, masukkan kode berikut:

error.tsx
'use client'; // Error components must be Client Components
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  );
}

Sama seperti komponen NotFound, komponen Error di atas juga bisa dipanggil otomatis. Bedanya, komponen Error dipanggil ketika terjadi masalah pada program, entah error karena bugs pada program atau kegagalan mengambil data dari database.

3) Komponen di dalam komponen

Dalam pembahasan di atas, kita telah mengetahui bagaimana komponen Page dibungkus oleh komponen Layout secara otomatis. Namun demikian, kita juga bisa membuat komponen lain secara bebas dan membungkus komponen Page secara manual. Bagaimana caranya?

Buat file home-layout.tsx di folder /app. Untuk nama file bisa bebas. Lalu masukkan kode berikut:

/home-layout.tsx
"use client"

export default function HomeLayout({children}) {
  console.log("I'm in browser")
  return (
    <div>
      <h1>
        {children}
      </h1>
    </div>
  )

Lalu buka file page.tsx di folder /app, ubah kode menjadi seperti berikut:

/page.tsx
import HomeLayout from "./home-layout";

export default function HomeLayout() {
  console.log("I'm in server")
  return (
    <HomeLayout>
      Hi, I'm page component from root and 
      I'm wrapped by home-layout component
    </HomeLayout>
  )

Perhatikan baris import HomeLayout. Teks yang akan ditampilkan oleh komponen page.tsx adalah teks yang dibungkus oleh komponen HomeLayout yang berasal dari (atau diimpor dari) home-layout.tsx.

Jalankan program dengan npm run dev. Lalu masuk ke halaman localhost:3000. Di browser akan tampil seperti berikut:

gambar

Di browser, teks yang tercetak adalah “Hi, I’m page component … so on”. Teks ini berasal dari komponen page.tsx. Dan teks ini dicetak tebal karena teks tersebut dibungkus oleh komponen HomeLayout yang diimpor dari file home-layout.tsx yang memiliki tag <h1>. Dan teks tersebut berwarna merah, karena baik komponen Page maupun HomeLayout, keduanya dibungkus oleh komponen Layout secara otomatis.

4) Rendering

Pada kode di home-layout.js, perhatikan baris use client dan console.log (“I’m in browser”). Dengan use client, kita akan merender komponen ini di browser dan menampilkan teks “I’m in browser” pada konsol browser.

Sedangkan di page.tsx, kita tidak menggunakan ‘use client’, karena komponen page.tsx akan kita render di server (server rendering). Karena itu, kata “I’m in server” akan tercetak di server, dan tidak di browser.

Selanjutnya buka konsol browser dengan cara ctrl+shift+i. Di layar konsol browser akan tampil teks “I’m in browser”. Ini menunjukkan bahwa komponen home-layout.tsx dirender di sisi browser (client rendering).

Sekarang lihat di console server, atau command prompt tempat kamu memberi perintah npm run. Di situ akan tampil teks “I’m in server”. Ini menunjukkan bahwa komponen page.tsx di render di sisi server (server rendering).

Deploy Ke Internet

Sekarang pelajaran terakhir, deploy ke internet!

Dengan merilis ke internet, web kamu bisa diakses oleh siapapun yang terhubung dengan internet. Untuk itu, kita butuh provider untuk meng-host program web yang sudah kita buat.

Untungnya, ada banyak provider yang menyediakan fitur gratis untuk aplikasi-aplikasi berbasis node.js, seperti glitch.com, vercel.com dan netlify.com. Di sini kita akan menggunakan vercel.com.

Sebelum kita mulai, pastikan kamu memiliki akun github. Jika sudah, kode program yang tadi kita buat, kita push ke repository github. Caranya sebagai berikut:

Di Visual Code, sign in ke akun Github dengan mengklik tombol akun di pojok kiri bawah. Jika sudah terhubung dengan Github, arahkan ke tombol branch di bawahnya lagi. Klik dan akan muncul opsi create branch.

gambar

Klik create branch seperti gambar di atas. Lalu beri nama branch yang akan kamu buat di Github, misalnya, myweb. Tunggu proses upload selesai. Jika sudah, sekarang lihat di akun github kamu. Pastikan di akunmu ada repository dengan nama yang kamu buat tadi, myweb. Buka repository tersebut dan perhatikan bahwa file-file yang ada di situ adalah file-file yang ada di projek kamu.

Setelah repository dibuat, saatnya membuat akun di vercel.com. Masuk dengan akun github dan ikuti langkah-langkahnya. Lalu, jika akun sudah terverifikasi, masuk ke halaman dashboard.

gambar

Di dashboard hubungkan akunmu dengan repository myweb yang kamu buat di Github. Jika integrasi berhasil, maka akan terlihat seperti gambar di bawah ini.

gambar

Klik alamat url yang ada di dashboard! Itu adalah alamat internet untuk website baru kamu. Selamat!

gambar

Baik React, Next.js, maupun framework-framework lainnya, merupakan alat-alat pengembangan yang berorientasi pada tampilan-depan (front-end) aplikasi web. Dan di artikel ini, kita belum bicara tentang cara mengonsumsi data dari back-end (server database atau server API).

Dalam artikel-artikel selanjutnya, kita akan belajar membuat website dengan Next.js mulai dari yang sederhana hingga yang kompleks.

Tagged in :
NEXT-JS