Pada Part 1, kita sudah berhasil membuat proyek Next.js, memahami struktur folder, dan membuat halaman dasar. Sekarang di Part 2, kita akan pelajari bagaimana:
- Membuat layout global
- Menambahkan navigasi antar halaman
- Mengambil data dari API menggunakan
fetch - Membuat struktur reusable agar mudah dikembangkan
🔲 1. Membuat Layout Global (App Router)
Dengan sistem App Router di Next.js 13+, kita bisa membuat layout seperti header, footer, atau sidebar yang persisten di setiap halaman.
📁 Struktur:
app/
├─ layout.jsx
├─ page.jsx
├─ about/
│ └─ page.jsx
✍️ Contoh app/layout.jsx:
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header className="bg-blue-600 text-white p-4">
<h1 className="text-xl font-bold">Belajar Next.js</h1>
</header>
<main className="p-4">{children}</main>
<footer className="bg-gray-200 p-4 text-center">
© 2025 Elektra Network Vision
</footer>
</body>
</html>
);
}
Dengan begitu, semua halaman akan otomatis menggunakan layout ini.
🔗 2. Menambahkan Navigasi Antar Halaman
Gunakan komponen Link dari Next.js:
📦 Import:
import Link from 'next/link';
📌 Contoh Navigasi:
<nav className="flex gap-4 bg-gray-100 p-2">
<Link href="/">Beranda</Link>
<Link href="/about">Tentang</Link>
<Link href="/kontak">Kontak</Link>
</nav>
Tempatkan ini di layout.jsx agar muncul di semua halaman.
🌐 3. Fetch Data dari API (Client & Server)
Next.js memungkinkan pengambilan data dari API secara Client-side maupun Server-side. Kita fokus ke pendekatan server-side menggunakan async function di page.jsx.
⚙️ Contoh Ambil Data dari API JSON Placeholder:
app/posts/page.jsx
async function getPosts() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
return res.json();
}
export default async function PostsPage() {
const posts = await getPosts();
return (
<div>
<h2 className="text-2xl font-semibold mb-4">Daftar Postingan</h2>
<ul className="space-y-2">
{posts.slice(0, 5).map(post => (
<li key={post.id} className="border p-3 rounded">
<h3 className="font-bold">{post.title}</h3>
<p>{post.body}</p>
</li>
))}
</ul>
</div>
);
}
Keunggulan:
- Data di-fetch di server sebelum dikirim ke browser
- Lebih cepat dan SEO-friendly
- Cocok untuk konten statis maupun dinamis
🔁 4. Membuat Komponen Navigasi Reusable
Buat file app/components/NavBar.jsx:
import Link from 'next/link';
export default function NavBar() {
return (
<nav className="bg-gray-900 text-white p-4 flex gap-4">
<Link href="/">Home</Link>
<Link href="/posts">Posts</Link>
<Link href="/about">About</Link>
</nav>
);
}
Gunakan di layout.jsx:
import NavBar from './components/NavBar';
<NavBar />
<main>{children}</main>
💡 Tips SEO di Next.js
- Gunakan
metadatadi setiap halaman:
export const metadata = {
title: "Posts - Belajar Next.js",
description: "Halaman menampilkan data postingan secara dinamis di Next.js",
};
- Optimalkan kecepatan halaman dengan preloading link dan image
- Gunakan tag heading (
<h1>,<h2>, dst) dengan struktur semantik
✅ Ringkasan Part 2
Pada bagian kedua ini, kita sudah:
- Membuat layout global untuk aplikasi
- Menambahkan navigasi antar halaman
- Mengambil data dari API secara server-side
- Menerapkan struktur komponen yang reusable
Di Part 3, kita akan bahas:
- State Management di Next.js
- Integrasi form dan validasi
- Penggunaan Context API dan LocalStorage
🔧 Butuh Bantuan Kembangkan Proyek Next.js?
Elektra Network Vision siap mendampingi bisnis Anda membangun aplikasi Next.js modern, efisien, dan siap produksi. Konsultasikan proyek Anda sekarang:
🌐 elektranetworkvision.com – Solusi Web Modern & Inovatif
Ingin lanjut ke Part 3? Balas saja “lanjut part 3”, dan kita bahas form, validasi input, serta state management.
