Next.js 14 Metadata Best Practices

Today I learned about the proper way to handle metadata in Next.js 14, especially with the new app router.

Key Points

  1. Metadata can't be exported from client components (those with 'use client' directive)
  2. Best practice is to create a separate metadata file
  3. Use layout.tsx for applying metadata to entire sections
  4. Can be static or dynamic using generateMetadata

Example Code

// metadata.ts
export const metadata = {
  title: 'My Page',
  description: 'Page description'
}
 
// layout.tsx
import { metadata as pageMetadata } from './metadata'
export const metadata = pageMetadata

This approach keeps the concerns separated and follows Next.js best practices for SEO optimization.