Metadata Example Page (Server Component)
About This Page
This page demonstrates how to correctly implement metadata in a server component. Since this page doesn't use the 'use client' directive, we can export metadata directly from this file.
Correct approach: This page is a server component that exports metadata directly.
Preview Image
Code Example
// src/app/metadata-example/page.js (server component)
import { generatePageMetadata } from '@/utils/generateMetadata';
// Generate metadata for this page
export const metadata = generatePageMetadata({
title: 'Metadata Example | Velocity',
description: 'This page demonstrates how to correctly implement metadata in a server component.',
path: '/metadata-example',
imageUrl: 'https://thinkvelocity.in/next-assets/Chrome_Store.png',
});
export default function MetadataExamplePage() {
return (
// Page content
);
}Client Component Example
For client components (with 'use client' directive), you should create a separate metadata.js file:
// src/app/your-page/metadata.js
import { generatePageMetadata } from '@/utils/generateMetadata';
export const metadata = generatePageMetadata({
title: 'Your Page | Velocity',
description: 'Your page description',
path: '/your-page',
});
// src/app/your-page/page.js
'use client';
export default function YourPage() {
return (
// Page content
);
}