How do you set the page title and description for SEO in the Next.js App Router?

You export a metadata object from your page or layout file, defining fields like title and description, and Next.js automatically generates the correct HTML head tags for search engines and social media platforms to read when they crawl or share your page.

// app/about/page.js
export const metadata = {
  title: 'About Us | My Company',
  description: 'Learn more about our mission and team.'
};

export default function AboutPage() {
  return <h1>About Us</h1>;
}