This topic explores how to create SEO-optimized pages in Next.js using content fetched from Payload CMS.
React Example: Dynamic Meta Tags with React Helmet
import React from 'react';
import { Helmet } from 'react-helmet';
import axios from 'axios';
const SEOPage = ({ pageId }) => {
const [seoData, setSeoData] = useState({});
useEffect(() => {
const fetchSeoData = async () => {
const response = await axios.get(`https://your-payload-cms.com/api/pages/${pageId}`);
setSeoData(response.data.seo);
};
fetchSeoData();
}, [pageId]);
return (
<div>
<Helmet>
<title>{seoData.title}</title>
<meta name="description" content={seoData.description} />
</Helmet>
<h1>{seoData.title}</h1>
<p>{seoData.content}</p>
</div>
);
};
export default SEOPage;
Next.js Example: SEO Component with getServerSideProps
import Head from 'next/head';
import axios from 'axios';
export const getServerSideProps = async (context) => {
const { slug } = context.params;
const response = await axios.get(`https://your-payload-cms.com/api/pages/${slug}`);
return { props: { seo: response.data.seo, content: response.data.content } };
};
const SEOPage = ({ seo, content }) => {
return (
<>
<Head>
<title>{seo.title}</title>
<meta name="description" content={seo.description} />
</Head>
<div>
<h1>{seo.title}</h1>
<p>{content}</p>
</div>
</>
);
};
export default SEOPage;