Panduan Lengkap Next.js untuk Pemula

Next.js telah menjadi salah satu framework React paling populer untuk membangun aplikasi web modern. Framework ini menawarkan berbagai fitur canggih seperti rendering sisi server (SSR), pembuatan situs statis (SSG), dan API routes, yang semuanya dikemas dalam pengalaman developer yang sangat baik.

Apa itu Next.js?

Next.js adalah framework React yang memungkinkan Anda membangun aplikasi web dengan performa tinggi. Diluncurkan oleh Vercel, Next.js memberikan solusi untuk masalah umum dalam pengembangan web modern seperti:

• Rendering Sisi Server (SSR) - Meningkatkan SEO dan performa awal
• Pembuatan Situs Statis (SSG) - Menghasilkan HTML statis untuk kecepatan maksimal
• Routing berbasis File System - Navigasi halaman tanpa konfigurasi rumit
• API Routes - Endpoints API tanpa server terpisah
• Zero Configuration - Pengalaman developer yang mulus

Arsitektur dasar aplikasi Next.js

Memulai dengan Next.js

Untuk memulai project Next.js baru, jalankan perintah berikut di terminal Anda:

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

Perintah di atas akan membuat project Next.js baru dan menjalankannya di mode development di http://localhost:3000.

Struktur Project

Setelah membuat project baru, Anda akan melihat struktur folder seperti ini:

my-nextjs-app/
├── node_modules/
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── _app.js
│   └── index.js
├── public/
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
└── README.md

Catatan: Pada Next.js versi terbaru (13+), struktur folder mungkin berbeda dengan adanya folder app/ untuk App Router.

Routing di Next.js

Next.js menggunakan sistem routing berbasis file, yang berarti setiap file JavaScript di dalam folder pages menjadi route pada aplikasi Anda.

File	URL Route
pages/index.js	/
pages/about.js	/about
pages/blog/index.js	/blog
pages/blog/[slug].js	/blog/:slug

Data Fetching

Next.js menyediakan beberapa metode untuk fetch data:

1. getStaticProps

Untuk halaman yang di-build pada saat build time:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: { data }, // akan diteruskan ke komponen halaman sebagai props
  }
}

export default function Blog({ data }) {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  )
}

2. getServerSideProps

Untuk halaman yang di-render pada setiap request:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: { data }, // akan diteruskan ke komponen halaman sebagai props
  }
}

3. Incremental Static Regeneration (ISR)

Untuk memperbarui halaman statis setelah di-deploy:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60, // Halaman akan di-regenerate maksimal setiap 60 detik
  }
}

Membuat API Routes

Next.js memungkinkan Anda membuat API endpoints di folder pages/api:

// pages/api/users.js

export default function handler(req, res) {
  if (req.method === 'GET') {
    // Proses GET request
    res.status(200).json({ users: ['John', 'Jane'] })
  } else if (req.method === 'POST') {
    // Proses POST request
    const { name } = req.body
    res.status(201).json({ message: `User ${name} created` })
  } else {
    res.setHeader('Allow', ['GET', 'POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

Styling di Next.js

Next.js mendukung berbagai metode styling:

1. CSS Modules

// styles/Button.module.css
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
}

// components/Button.js
import styles from '../styles/Button.module.css'

export default function Button() {
  return <button className={styles.button}>Klik Saya</button>
}

2. Styled JSX

export default function Button() {
  return (
    <>
      <button>Klik Saya</button>
      <style jsx>{`
        button {
          background: blue;
          color: white;
          padding: 10px 20px;
        }
      `}</style>
    </>
  )
}

3. Tailwind CSS

export default function Button() {
  return (
    <button className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
      Klik Saya
    </button>
  )
}

Deployment

Next.js dapat di-deploy di berbagai platform, tetapi cara termudah adalah dengan menggunakan Vercel:

1. Push code ke GitHub/GitLab/Bitbucket
2. Import repository di Vercel
3. Vercel akan otomatis mendeteksi Next.js dan melakukan konfigurasi yang diperlukan
4. Klik "Deploy"

---

Kesimpulan

Next.js adalah framework yang sangat powerful untuk membangun aplikasi web modern. Dengan fitur-fitur seperti SSR, SSG, routing berbasis file, dan API routes, Next.js menyediakan toolset lengkap untuk developer front-end maupun full-stack.

Untuk mempelajari lebih lanjut tentang Next.js, kunjungi dokumentasi resmi.