open layout.js in pages folder in app component
import { Inter } from "next/font/google";
import "./globals.css";
// Step 1 Add Head
import Head from "next/head";
const inter = Inter({ subsets: ["latin"] });
// Step 2 add meta data like title,description etc
export default function RootLayout({ children,pageTitle, pageDescription }) {
// step 3 set meta data
const title = pageTitle || "Create Next App";
const description = pageDescription || "Generated by create next app";
return (
<html lang="en">
{/* step 4 configure head */}
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<body className={inter.className}>{children}</body>
</html>
);
}
for a loop page use static meta data
import RootLayout from '../components/RootLayout';
export default function Home() {
return (
<RootLayout pageTitle="Home Page" pageDescription="Welcome to our homepage!">
<main>
<h1>Welcome to Our Website</h1>
<p>This is the homepage of our awesome Next.js application.</p>
</main>
</RootLayout>
);
}
For a dynamic page like a blog post, you can fetch the post’s title and description to use as the metadata.
// Step 1
import RootLayout from '../../components/RootLayout';
export default function BlogPost({ post }) {
return (
{/* step 2 */}
<RootLayout pageTitle={post.title} pageDescription={post.excerpt}>
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
</RootLayout>
);
}
export async function getServerSideProps(context) {
const { slug } = context.params;
const res = await fetch(`https://your-api.com/posts/${slug}`);
const post = await res.json();
return {
props: { post },
};
}