Memulai dengan Next.js: Panduan Dasar dan Contoh Kode

Next.js adalah framework React yang menyediakan berbagai fitur out-of-the-box untuk pengembangan aplikasi web.

Next.js adalah salah satu framework React yang paling populer saat ini. Framework ini menawarkan berbagai fitur menarik seperti rendering sisi server (SSR), pembuatan situs statis (SSG), dan banyak lagi yang memudahkan pengembangan aplikasi web modern. Dalam blog ini, kita akan membahas dasar-dasar Next.js dan memberikan contoh kode sederhana untuk memulai.

Apa itu Next.js?

Next.js adalah framework React yang menyediakan berbagai fitur out-of-the-box untuk pengembangan aplikasi web. Beberapa fitur utama Next.js meliputi:

  • Rendering Sisi Server (SSR): Menghasilkan halaman HTML di server pada setiap permintaan.
  • Pembuatan Situs Statis (SSG): Membuat halaman statis pada waktu build.
  • Routing Otomatis: Routing halaman berdasarkan struktur file.
  • CSS dan Sass: Mendukung berbagai cara untuk mengimpor CSS dan Sass ke dalam aplikasi.

Instalasi Next.js

Langkah pertama untuk memulai dengan Next.js adalah menginstal Next.js dan React. Anda dapat melakukannya dengan perintah berikut:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

Perintah di atas akan membuat proyek Next.js baru dan menjalankan server pengembangan di http://localhost:3000.

Struktur Direktori

Setelah membuat aplikasi Next.js, struktur direktori dasar akan terlihat seperti ini:

my-nextjs-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── globals.css
│   ├── Home.module.css
├── .gitignore
├── package.json
├── README.md
  • pages/: Direktori ini berisi semua halaman aplikasi Anda. Next.js secara otomatis membuat rute berdasarkan struktur file di sini.
  • public/: Direktori ini digunakan untuk menyimpan aset statis seperti gambar, ikon, dll.
  • styles/: Direktori ini digunakan untuk menyimpan file CSS.

Membuat Halaman Pertama

Mari kita buat halaman pertama kita di Next.js. Buka pages/index.jsx dan ganti isinya dengan kode berikut:

page/index.jsx
import Head from 'next/head';
import styles from '../styles/Home.module.css';
 
export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
 
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
 
        <p className={styles.description}>
          Get started by editing <code className={styles.code}>pages/index.js</code>
        </p>
      </main>
 
      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  );
}

Penjelasan Kode

  • Head: Komponen Head digunakan untuk mengatur elemen <head> HTML seperti title dan meta description.
  • styles: Mengimpor file CSS modular dari styles/Home.module.css.
  • Home Component: Komponen fungsional yang merender halaman utama aplikasi kita.

Menjalankan Aplikasi

Setelah melakukan perubahan, jalankan server pengembangan:

npm run dev

Buka http://localhost:3000 di browser Anda. Anda akan melihat halaman Next.js yang baru saja kita buat.

Kesimpulan

Next.js adalah framework yang kuat dan fleksibel untuk pengembangan aplikasi React. Dengan fitur-fitur seperti SSR, SSG, dan routing otomatis, Next.js memudahkan pengembang untuk membuat aplikasi web yang cepat dan efisien. Contoh kode di atas hanya permulaan; Next.js memiliki banyak fitur lain yang bisa Anda eksplorasi lebih lanjut.

Selamat mencoba dan semoga sukses dengan proyek Next.js Anda!