Tipar Metadata no Next.js com TypeScript

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s | CrazyStack",
    default: "CrazyStack - Cursos de Programação",
  },
  description: "Aprenda Node.js, React e TypeScript na prática",
  keywords: ["programação", "react", "node.js", "typescript"],
  authors: [{ name: "CrazyStack Team" }],
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "pt_BR",
    siteName: "CrazyStack",
  },
};

// app/about/page.tsx
import type { Metadata } from "next";

// Herda o template do layout: "Sobre Nós | CrazyStack"
export const metadata: Metadata = {
  title: "Sobre Nós",
  description: "Conheça a equipe CrazyStack e nossa missão",
  openGraph: {
    title: "Sobre Nós - CrazyStack",
    description: "Conheça a equipe por trás dos cursos",
    type: "website",
    images: [
      {
        url: "https://www.crazystack.com.br/og-about.png",
        width: 1200,
        height: 630,
        alt: "CrazyStack Team",
      },
    ],
  },
  alternates: {
    canonical: "https://www.crazystack.com.br/about",
  },
};

export default function AboutPage() {
  return <div>Sobre nós</div>;
}

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

type Params = {
  slug: string;
};

type PageProps = {
  params: Promise<Params>;
};

// generateMetadata recebe as mesmas props que a page
export async function generateMetadata(
  { params }: PageProps
): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) {
    return {
      title: "Post não encontrado",
      robots: { index: false },
    };
  }

  return {
    title: post.title,
    description: post.excerpt,
    keywords: post.tags,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt,
      authors: [post.author],
      tags: post.tags,
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    alternates: {
      canonical: `https://www.crazystack.com.br/blog/${slug}`,
    },
  };
}

// app/products/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from "next";

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

// ResolvingMetadata dá acesso à metadata do parent (layout)
export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { id } = await params;
  const product = await getProduct(id);

  // Acessa as images do parent pra combinar
  const previousImages = (await parent).openGraph?.images || [];

  return {
    title: product.name,
    description: `Compre ${product.name} - ${product.price}`,
    openGraph: {
      title: product.name,
      description: product.description,
      images: [
        { url: product.image, width: 800, height: 600 },
        ...previousImages, // mantém images do layout
      ],
    },
  };
}

// lib/metadata.ts
import type { Metadata } from "next";

type MetadataInput = {
  title: string;
  description: string;
  path: string;
  image?: string;
  type?: "website" | "article";
  publishedAt?: string;
  tags?: string[];
};

export function createMetadata(input: MetadataInput): Metadata {
  const { title, description, path, image, type = "website" } = input;
  const url = `https://www.crazystack.com.br${path}`;
  const ogImage = image ?? "https://www.crazystack.com.br/og-default.png";

  return {
    title,
    description,
    alternates: { canonical: url },
    openGraph: {
      title,
      description,
      type,
      url,
      images: [{ url: ogImage, width: 1200, height: 630 }],
      ...(input.publishedAt && { publishedTime: input.publishedAt }),
      ...(input.tags && { tags: input.tags }),
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImage],
    },
  };
}

// Uso em qualquer page.tsx:
// export const metadata = createMetadata({
//   title: "Blog",
//   description: "Artigos sobre programação",
//   path: "/blog",
// });