Tất tần tật về Metadata trong Next.js, có những điều tôi chắc bạn cũng không biết

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Marketer Vietnam",
  description: "Mạng xã hội dành cho marketer tại Việt Nam",
};

export const metadata = {
  title: "Về chúng tôi",
  description: "Tìm hiểu thêm về Marketer Vietnam.",
};

export const metadata: Metadata = {
  title: {
    template: "%s | Marketer Vietnam",
    default: "Marketer Vietnam",
  },
};

export const metadata: Metadata = {
  title: "Về chúng tôi",
};

// Output: <title>Về chúng tôi | Marketer Vietnam</title>

import { cache } from "react";
import { getPostBySlug } from "@/db/queries";

// Cache để tránh gọi DB 2 lần trong cùng một request
const getPost = cache(async (slug: string) => {
  return getPostBySlug(slug);
});

// Hàm này chạy ở Server nên truy cập được database an toàn
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) return {};

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
    },
  };
}

export default async function PostDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  // ...
}

import { ImageResponse } from "next/og";
import { getPostBySlug } from "@/db/queries";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPostBySlug(params.slug);

  return new ImageResponse(
    (
      <div
        style={{
          background: "linear-gradient(135deg, #1e1e2e, #313244)",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "flex-end",
          padding: "60px",
          color: "white",
          fontFamily: "sans-serif",
        }}
      >
        <div style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.2 }}>
          {post?.title}
        </div>
        <div style={{ fontSize: 28, marginTop: 20, opacity: 0.7 }}>
          Marketer Vietnam
        </div>
      </div>
    )
  );
}