Next.js 54: Static Metadata & the metadata Object
easy⏱ 5 mincoursenextjs
The simplest SEO you will ever write
export const metadata = {...} is the default choice for static pages — About, Contact, Terms, a marketing landing page. Compare it to generateMetadata from the last lesson: same shape of object, but no params, no await, and it can be statically analyzed and inlined at build time instead of computed per request.
// app/about/page.tsx
export const metadata = {
title: "About Us",
description: "Learn about our company and mission.",
};
export default function AboutPage() {
return <main>...</main>;
}
Finish the Contact page metadata
PAGES.contact.metadata now has a real description filled in. Click Contact and confirm the preview panel shows it instead of the 'Missing description' warning. Try clearing it back to '' to see that warning reappear, then restore it.
Static vs dynamic — pick by data dependency
The rule is simple: if the title/description needs data you do not have until a request comes in (a product name, a username), use generateMetadata. If it is the same for everyone, every time, use the plain metadata object — it is less code and Next.js can optimize it more aggressively.