In this article, we are going to talk about the 'Head' component in Next.Js.
Looking back to series #1, there is a 'Head' component imported from 'next/head' by default being used in index.js. This 'Head' component is basically a built-in component that Next.Js provides to append elements, such as title and meta tags, to the <head> element in document.
If we were to take a look at our index.js file:
import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>My Little Blog</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to My Blog
</h1>
<div className={styles.grid}>
<Link href="./blog1">
<a className={styles.card}>
<h3>Blog 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu.</p>
</a>
</Link>
<Link href="./blog2">
<a className={styles.card}>
<h3>Blog 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat vehicula felis eget feugiat. Nullam mattis feugiat massa, id consectetur dolor pellentesque eget. Praesent non varius est, at rutrum nisl. Maecenas feugiat vitae quam et imperdiet. Nam vulputate volutpat metus, mollis faucibus nisi eleifend ac. Integer egestas libero odio, eget ultrices leo condimentum eu.</p>
</a>
</Link>
</div>
</main>
</div>
)
}
We could actually see that Head component is used and wraps around the title tag and the link tag for favicon. We can add any element that we used to add in HTML document <head> into this Head component for each page of our app respectively.
If we only implement this Head component in this index route, those elements that we added (title) will not be shown in other routes. For example, we can see that the title is displayed in '/' route.
However in '/author' route, the title is not set.
If we do want our title, and some meta tags to be shared among all the pages, we can apply the knowledge that we have gotten from series #4, with the usage of custom 'App' component. Open up '_app.js' file, import and add Head component into the main App component.
import '../styles/globals.css'
import '../styles/author.css'
import NavBar from '../components/NavBar'
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<title>My Next App</title>
<meta name='description' content='This is a desription for My Next App'/>
<link rel="icon" href="/favicon.ico" />
</Head>
<NavBar />
<Component {...pageProps} />
</>
)
}
export default MyApp
We now see that in both '/author' and other routes are now having the title and the meta tags.
...and also the meta tag for description is now showing up in the browser DOM for those pages.
You might notice that when you navigate back to the '/' route, the title is not 'My Next App', but still 'My Little Blog' instead. This is because, if the 'Head' component and <title> is implemented in individual pages, the custom 'App' component's <title> will be overwritten. However, meta tag for description still shows up in the browser DOM for index page because we did not define that meta tag in 'index.js' and therefore only <title> was overwritten.
Hope this helps you to understand the built-in 'Head' component feature by Next.Js.
Do follow me for more future articles on web design, programming and self-improvement 😊
Top comments (0)