Structuring SEO and Format of a page in Next.js Effectively
10 Sept 2022
2 min read
- views


Organizing your Next.js application and using components.
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 you can manage to do?
The simple option is to build a shared component that is called repeatedly on each page.
But, You might try this 👇
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
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
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. 🙌 Please tell me in the comments. 📪
For more of this type of stuff, follow me on X — @okshubhh