Jika Anda ingin membangun aplikasi web yang cepat, SEO-friendly, dan mudah di-deploy, Next.js adalah pilihan ideal. Dibangun di atas React, Next.js menawarkan rendering sisi server (SSR), routing otomatis, dan berbagai fitur modern yang mempermudah proses development.
Artikel ini akan memandu Anda membangun aplikasi Next.js sederhana dari awal. Cocok untuk pemula yang baru mengenal Next.js di tahun 2025.
Apa itu Next.js?
Next.js adalah framework React open-source yang mendukung:
- Server-Side Rendering (SSR)
- Static Site Generation (SSG)
- Routing otomatis
- API route
- Optimasi performa out-of-the-box
Dengan fitur-fitur ini, Next.js banyak digunakan untuk membangun:
- Website perusahaan
- Blog
- Aplikasi dashboard
- E-commerce
1. Instalasi Next.js
๐ง Persyaratan:
- Node.js versi terbaru (disarankan: โฅ 18)
- npm atau yarn
๐ป Jalankan perintah di terminal:
npx create-next-app@latest nextjs-tutorial
cd nextjs-tutorial
npm run dev
Buka browser ke http://localhost:3000
๐ Anda sudah memiliki aplikasi Next.js pertama!
2. Struktur Proyek
Berikut penjelasan direktori utama:
nextjs-tutorial/
โโโ pages/ -> Tempat file routing otomatis (seperti `index.js`)
โโโ public/ -> File statis (gambar, icon)
โโโ styles/ -> CSS Modules
โโโ app/ (opsional) -> Struktur App Router (Next.js 13+)
โโโ package.json -> Info proyek dan dependency
3. Membuat Halaman Baru
๐ Buat file about.js
di dalam folder pages
:
export default function About() {
return <h1>Ini halaman Tentang Kami</h1>;
}
Akses di browser: http://localhost:3000/about
โ
Routing otomatis tanpa konfigurasi!
4. Menambahkan Navigasi dengan Link
Edit file pages/index.js
:
import Link from 'next/link';
export default function Home() {
return (
<>
<h1>Beranda</h1>
<Link href="/about">Ke Halaman Tentang</Link>
</>
);
}
Link antar halaman akan berjalan cepat tanpa reload berkat sistem routing internal Next.js.
5. Styling dengan CSS Modules
Edit atau buat Home.module.css
di dalam styles/
:
.title {
color: blue;
font-size: 32px;
}
Gunakan di komponen:
import styles from '../styles/Home.module.css';
export default function Home() {
return <h1 className={styles.title}>Selamat Datang di Next.js!</h1>;
}
6. Fetch Data dengan getServerSideProps
Contoh penggunaan SSR untuk mengambil data dari API:
export async function getServerSideProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const post = await res.json();
return { props: { post } };
}
export default function Post({ post }) {
return (
<div>
<h2>{post.title}</h2>
<p>{post.body}</p>
</div>
);
}
Data akan dimuat setiap kali halaman diakses dari server.
7. Deployment ke Vercel (Gratis dan Mudah)
- Push project ke GitHub
- Kunjungi vercel.com
- Login dan import repository
- Vercel akan otomatis mendeteksi Next.js dan melakukan build
๐ Dalam beberapa menit, aplikasi Anda sudah online dan bisa diakses publik.
Tips Pengembangan:
- Gunakan
Image
darinext/image
untuk optimasi gambar otomatis - Pisahkan layout dengan
components/
- Untuk proyek besar, pertimbangkan App Router (Next.js 13+)
Kesimpulan
Next.js sangat cocok untuk pengembang pemula maupun profesional yang ingin membangun web modern dengan performansi tinggi, SEO optimal, dan pengalaman pengguna yang mulus.
Dengan fitur bawaan seperti routing otomatis, server-side rendering, dan kemudahan deployment, Anda bisa fokus ke fungsionalitas aplikasi tanpa harus mengonfigurasi terlalu banyak hal.
Ingin Aplikasi Next.js Dibangun Profesional?
๐ง Elektra Network Vision siap membantu Anda membangun aplikasi Next.js modern, aman, dan cepat โ sesuai kebutuhan bisnis Anda.
๐ Kunjungi elektranetworkvision.com untuk konsultasi dan pengembangan Next.js.