Metadata API, OpenGraph & Dynamic SEO — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

Objek export const metadata untuk halaman statis
Fungsi generateMetadata() untuk mengambil metadata dinamis berbasis database/params
Dukungan otomatis sitemap.xml, robots.txt, dan image OpenGraph

🔍 Pengelolaan Metadata API di Next.js 16

Next.js 16 menyediakan API Metadata deklaratif yang kuat untuk memaksimalkan peringkat SEO Google & tampilan preview link WhatsApp/Twitter/Facebook.

💻 Metadata Statis vs Dinamis

app/events/[id]/page.tsx

import { Metadata } from "next";

type Props = {
  params: Promise<{ id: string }>;
};

// Generasi SEO Meta secara Dinamis
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  const event = await fetch(`https://api.example.com/events/${id}`).then((r) => r.json());

  return {
    title: `${event.title} | Dev Event Platform`,
    description: event.description,
    openGraph: {
      images: [event.bannerUrl],
    },
  };
}