I have a app/layout.js which has got the default meta tags for all the pages in my web application, but for a specific pages in my application have to change the meta tags title and description in my srccontentsblogDetailsBlogDetails.js but i tried couple of things still not overriding the metatags for this page,
Also to add there are no other Head or next/head in my application apart from these
please help in resolving this issue
:
app/layout.js
import './globals.css';
import { Inter } from 'next/font/google';
import Providr from '@/src/component/Provider/Provider';
import ClientAnalytics from './ClientAnalytics'; // Import the ClientAnalytics component
const inter = Inter({ subsets: ['latin'] });
export const metadata = {
title: 'Essential Tips',
description: 'Discover crucial tips',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
{/* Additional metadata and scripts */}
</head>
<body className={inter.className}>
<Providr>
<ClientAnalytics /> {/* Include ClientAnalytics */}
<div className="">
{children}
</div>
</Providr>
</body>
</html>
);
}
i am trying to override this pecific page below:
srccontentsblogDetailsBlogDetails.js
import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import { useDispatch, useSelector } from 'react-redux';
import { usePathname } from 'next/navigation';
import { getBlogs } from '@/src/redux/slices/blog';
import LeftBlock from './LeftBlock/LeftBlock';
import RightBlock from './rightBlock/RightBlock';
const BlogDetails = () => {
const dispatch = useDispatch();
const pathname = usePathname();
const [blog, setBlog] = useState(null);
const id = pathname.split("/")[2]; // Extract the blog ID from the URL
useEffect(() => {
if (id) {
dispatch(getBlogs(id)).then((result) => {
setBlog(result.payload); // Assuming the result is stored in `payload`
});
}
}, [id, dispatch]);
return (
<>
<Head>
<title>Hardcoded Title: Example Blog Post</title>
<meta name="description" content="This is a hardcoded description for testing purposes." />
</Head>
<div className='w-[95%] lg:w-[80%] flex justify-center m-auto'>
<div className='flex justify-between gap-[4%] flex-col-reverse lg:flex-row-reverse'>
<div className='w-[100%] sm:w-[500px] lg:w-[320px] mx-auto'>
<RightBlock />
</div>
<div className='w-[100%] lg:w-[700px]'>
<LeftBlock />
</div>
</div>
</div>
<div>
<h1>{blog?.title || 'Sample Blog Title'}</h1>
<p>{blog?.description || 'Sample Blog Description'}</p>
</div>
</>
);
};
export default BlogDetails;