SEO

src/
├── lib/
│   └── metadata.ts                # Centralized metadata management
├── app/
│   ├── [locale]/
│   │   └── layout.tsx            # Root layout with metadata
│   ├── sitemap.ts                # Automatic sitemap generation
│   └── robots.ts                 # Robots.txt configuration
├── config/
│   └── index.ts                  # Website configuration
├── messages/
│   ├── en.json                   # English translations
│   └── zh.json                   # Chinese translations
└── i18n/
    └── routing.ts                # Internationalization routing

import { appConfig } from "@/config";
import { getBaseUrl } from "@/lib/urls";
import type { Metadata } from "next";

export function metadata({
  title,
  description,
  image,
  canonicalUrl,
  keywords,
}: {
  title?: string | { template: string; default: string };
  description?: string;
  image?: string;
  canonicalUrl?: string;
  keywords?: string[];
} = {}): Metadata {
  title = title || appConfig.metadata.title;
  description = description || appConfig.metadata.description;
  image = image || appConfig.metadata.images?.ogImage;
  keywords = keywords || appConfig.metadata.keywords;
  
  const ogImageUrl = image.startsWith("/")
    ? new URL(`${getBaseUrl()}${image}`)
    : new URL(image);
    
  return {
    title,
    description,
    alternates: {
      canonical: canonicalUrl || "./",
    },
    keywords,
    openGraph: {
      type: "website",
      locale: "en_US",
      url: canonicalUrl || getBaseUrl(),
      title,
      description,
      siteName: appConfig.metadata.title,
      images: [ogImageUrl.toString()],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImageUrl.toString()],
      site: getBaseUrl(),
    },
    icons: [
      {
        rel: "icon",
        url: "/favicon-96x96.png",
        sizes: "96x96",
        type: "image/png",
      },
      { rel: "icon", url: "/favicon.svg", type: "image/svg+xml" },
      { rel: "shortcut icon", url: "/favicon.ico" },
      {
        rel: "apple-touch-icon",
        url: "/apple-touch-icon.png",
        sizes: "180x180",
      },
    ],
    metadataBase: new URL(getBaseUrl()),
  };
}

export const appConfig = {
	metadata: {
		name: "NEXT DEV KIT",
		title: "NEXTDEVKIT - Next.js Starter Kit",
		description: "The Ultimate Next.js Starter Kit for Your Next Project",
		images: {
			logoLight: "/logo-light.svg",
			logoDark: "/logo-dark.svg",
			ogImage: "/og-image.png",
		},
		keywords: [
			"Next.js",
			"Starter Kit",
			"Next.js SaaS Template",
			"Next.js Boilerplate",
		],
	},
};

// messages/en.json
{
  "app": {
    "metadata": {
      "title": "NEXTDEVKIT - Modern Next.js Starter Kit",
      "description": "A comprehensive Next.js starter kit with authentication, payments, and more"
    }
  }
}

// messages/zh.json
{
  "app": {
    "metadata": {
      "title": "NEXTDEVKIT - 现代 Next.js 启动套件",
      "description": "一个包含认证、支付等功能的综合性 Next.js 启动套件"
    }
  }
}

import { metadata } from "@/lib/metadata";
import { getTranslations } from "next-intl/server";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "app.metadata" });

  return metadata({
    title: {
      template: `%s | ${t("title")}`,
      default: t("title") || "",
    },
    description: t("description"),
  });
}

import { metadata } from "@/lib/metadata";
import { getTranslations } from "next-intl/server";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "pricing" });

  return metadata({
    title: t("title"),
    description: t("description"),
    image: "/images/pricing-og.png",
    keywords: ["pricing", "plans", "subscription", "nextdevkit"],
  });
}

export default function PricingPage() {
  return (
    <div>
      <h1>Pricing</h1>
      {/* Page content */}
    </div>
  );
}

export async function generateMetadata({
	params,
}: {
	params: Promise<{ slug: string[]; locale: Locale }>;
}): Promise<Metadata | undefined> {
	const { slug, locale } = await params;

	const blog = (await getBlogsFromParams(slug)) as any;

	if (!blog) {
		return {};
	}

	const t = await getTranslations({ locale, namespace: "blog" });

	return metadata({
		title: `${blog.title} | ${t("title")}`,
		description: blog.description,
		keywords: blog.keywords?.split(",") || [],
	});
}

public/
├── og-image.png           # Default OG image (1200x630)
├── apple-touch-icon.png   # Apple touch icon (180x180)
├── favicon.ico           # Favicon
├── favicon-96x96.png     # High-res favicon (96x96)
├── favicon.svg           # SVG favicon