Navigasi dengan <Link> & Layout Komponen Global - Next.js Part 2

🔗 Navigasi dengan <Link> & Layout Komponen Global - Next.js Part 2

Pada bagian sebelumnya, kita sudah membuat halaman index.js dan about.js. Kali ini, kita akan belajar membuat navigasi antar halaman menggunakan komponen next/link serta membangun layout global yang konsisten seperti header dan footer.

🎯 Apa yang Akan Kita Pelajari?

• Menambahkan navigasi antar halaman menggunakan <Link>
• Membuat layout global (Header + Footer)
• Menyusun layout agar reusable di semua halaman

---

📦 1. Navigasi dengan next/link

Next.js memiliki sistem routing berbasis file. Untuk berpindah antar halaman, kita gunakan komponen <Link> dari next/link.

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Selamat Datang di Homepage</h1>
      <p>
        Pergi ke halaman <Link href="/about"><a>Tentang Kami</a></Link>
      </p>
    </div>
  );
}

Begitu pula di halaman lain:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>Tentang Kami</h1>
      <p><Link href="/"><a>Kembali ke Home</a></Link></p>
    </div>
  );
}

📌 Catatan

• Sejak Next.js 13, bisa juga pakai <Link>Home</Link> langsung tanpa <a>.
• Gunakan router otomatis berdasarkan nama file di folder pages.

---

🧱 2. Membuat Komponen Layout Global

Kita ingin setiap halaman punya tampilan yang konsisten: ada header, footer, dan konten di tengah. Untuk itu, kita buat komponen layout tersendiri.

// components/Layout.js
import Link from 'next/link';

export default function Layout({ children }) {
  return (
    <>
      <header style={headerStyle}>
        <nav>
          <Link href="/"><a>Home</a></Link> | 
          <Link href="/about"><a>About</a></Link>
        </nav>
      </header>

      <main style={mainStyle}>{children}</main>

      <footer style={footerStyle}>Copyright © 2025</footer>
    </>
  );
}

// Optional styling
const headerStyle = {
  padding: "10px",
  background: "#222",
  color: "white",
  textAlign: "center"
};
const footerStyle = {
  padding: "10px",
  background: "#eee",
  textAlign: "center"
};
const mainStyle = {
  minHeight: "70vh",
  padding: "20px"
};

🧩 3. Gunakan Layout di Halaman

// pages/index.js
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <h1>Beranda</h1>
      <p>Ini adalah halaman utama</p>
    </Layout>
  );
}

// pages/about.js
import Layout from '../components/Layout';

export default function About() {
  return (
    <Layout>
      <h1>Tentang Kami</h1>
      <p>Informasi tentang situs ini</p>
    </Layout>
  );
}

📂 Struktur Folder Setelah Tambahan Layout

my-next-app/
├── components/
│   └── Layout.js
├── pages/
│   ├── index.js
│   └── about.js
├── public/
├── styles/

---

📌 Tips Tambahan

• Kamu bisa tambahkan Head meta SEO dengan next/head
• Layout bisa diperluas untuk sidebar, dark mode, dll
• Gunakan layout ini sebagai base komponen di semua halaman

✅ Kesimpulan

Dengan sistem navigasi dan layout ini, aplikasi kamu jadi lebih tertata dan profesional. Halaman bisa dengan mudah berpindah dan tampilan konsisten di seluruh bagian.

Di Part 3, kita akan belajar **fetch data dari API** dengan getServerSideProps atau getStaticProps di Next.js. Fitur powerful untuk membuat halaman dinamis dan SEO-ready!

Sampai jumpa di tutorial selanjutnya ya, semangat belajar Next.js! ⚡