Imagine you want to use Next.js to build an application and that you want each page to have a distinct SEO strategy as well as the same header, footer, and navbar. What do you do? The simple option is to build a shared component that is called repeatedly on each page. But, You might try the steps below I imagine you have already developed a Next.js app before reading this. If not, . visit this page Create two components with the names and SEOSetup in a new folder called inside the src directory. This component, “Format,” refers to the layout of the page. Here, in this case, the layout of every page will be in this flow then the content, and then a . Format components Navbar Main Footer And, We are therefore defining it below 👇 import { FC } from 'react'; import Footer from '../Footer'; import Navbar from '../Navbar'; const Format: FC = (props) => { return ( <> <Navbar /> <Main>{props.children}</Main> <Footer /> </> ); }; export default Format; In , we’re really constructing a common tag with data supplied as props for the meta and title tag fields. So that we may utilize this component each time we need to define SEO-related information on a page rather than creating a head tag repeatedly. SEOSetup SEOSetup import Head from 'next/head'; export interface MetaData { title: string; description: string; } const SEOSetup: FC<MetaData> = (props) => { const { title, description, } = props; return ( <Head> <title>{title}</title> <meta name={'title'} content={title} /> <meta name={'description'} content={description} /> </Head> ); }; export default SEOSetup; Finally, utilize them on a page. Here we are just wrapping the page with the Format component and setting up SEO with our custom tag. SEOSetup import type { NextPage } from 'next' import Format from '../components/Format'; import SEOSetup from '../components/SEOSetup'; const Home: NextPage = () => { return ( <Format> <SEOSetup title="This is title of the Home Page" description="This is description of Home Page" /> <div> This is Home Page. </div> </Format> ) }; export default Home; ⭐️⭐️ THE END ⭐️️️️️ ⭐️ I hope you find this helpful. 🙌 let me know what you think in the comments. 📪 For more of this type of stuff, follow me on Twitter — @ShubhInTech
