Ultimate guide to using Layout and Head components to add page title for different pages in React/NextJs.

Abdull600 — Thu, 07 Jul 2022 12:42:11 +0000

Hey!, I'm Abdullah Ahmad, a front-end developer and technical writer based in Nigeria.

In this article, I'll show you how to use Layout and Head components to add page titles to different pages in your Reactjs/Nextjs app.

Sit back and enjoy while I show you how to add titles to each of your pages.

Create NextJs app
Create a Components folder
Create a Layout component in the "components" folder
Import Head Component from next/head
Create a Page in the "pages" folder

Create NextJs App Oops!, you already know how to do this but let's see how it's done again. First, open your terminal and go to the folder you wish to create this project in it.

C:\Users\AdminUser>cd projects
C:\Users\AdminUser\Projects>npx create-next-app@latest title-test

The "projects" folder is a folder on my computer, so don't worry about why am using it. After opening the folder you would love to create your app in it, type the second line of command in your terminal to create your nextjs app.

Create a components folder Now, after creating a nextjs app. Let's create a components folder in the root folder, after creating you'll have something like this.

Create a Layout.js Component Now let's create the Layout.js component in the components folder. After creating it, let's write some code in our first component.

First step
Write the following codes in the Layout.js component. Okay, let's move eh!

export default function Layout () {
     return (
           <>
                  <header>
                           <nav>
                                   Navigation goes here
                           </nav>
                  </header>
                  <main>
                           Main
                  </main>
                  <footer>
                        Footer
                  </footer>
           </>
)
}

Second step
Let's add the children and title props to the Layout.js component. the children prop will allow the layout to take other components as it children and the title prop is responsible for making the changes to any page title in the app.

import Link from 'next/link'

export default function Layout ({ title, children }) {
     return (
           <>
                  <header>
                           <nav>
                                   <Link href='test'> <a>Goto second Page</Link>
                           </nav>
                  </header>
                  <main>
                            {children}
                  </main>
                  <footer>
                        Footer
                  </footer>
           </>
)
}

Third step
Let's import the head component from next/head and write some codes to give the title prop some superpower to make the changes on every title on our pages. Your code should look something like this.

import Link from 'next/link'
import head from 'next/head'

export default function Layout ({ title, children }) {
     return (
           <>
                  <Head>
                      <title>{title ? title + ' - Hello world!' : 'Hello world!'}</title>
                      <meta name="description" content="Generated by create next app" />
                      <link rel="icon" href="/favicon.ico" />              
                 </Head>
                  <header>
                           <nav>
                                   <Link href='test'> <a>Goto second Page</Link>
                           </nav>
                  </header>
                  <main>
                            {children}
                  </main>
                  <footer>
                        Footer
                  </footer>
           </>
)
}

Create a new page Let's create a new page in the pages folder by naming it "test.js". On this page we'll write just a few codes since we are not here to change the world...lol

First step
Import Layout.js from the Layout component into the test page and import Link from next/link to direct a user to the home page of the app.

import Layout from '.components/Layout';
import Link from 'next/link';


export default function Test () {
     return (
           <Layout>
                  <div>
                      <h1>Welcome</h1>
                      <p>This is a test page</p>
                       <Link href="/"> <a>Back home</a> </Link>
                  </div>           
          </Layout>
)
}

Second Step
Let's make some changes to the Layout component we exported from the Layout component. We'll add the title prop we passed early to the Layout component tag to enable the title change according to the pages we go to.

import Layout from '.components/Layout';
import Link from 'next/link';


export default function Test () {
     return (
           <Layout title="Test Page">
                  <div>
                      <h1>Welcome</h1>
                      <p>This is a test page</p>
                       <Link href="/"> <a>Back home</a> </Link>
                  </div>           
          </Layout>
)
}

Now let's go to the index.js file and make some changes to how our page titles will be looking once we navigate to other pages in our app. Okay, let's do some clearing here!

import Layout from '.components/Layout';
import Link from 'next/link';


export default function Home () {
     return (
           <Layout title="Home Page">
                  <div>
                      <h1>Welcome to the home page</h1>
                      <p>I hope you like the guide? </p>
                  </div>           
          </Layout>
)
}

Hey, hope you didn't get tired reading this?. Okay, let's run some commands in our terminal to see what we finally have.

Open your terminal from your code editor, write "npm run dev" and hit Enter. You know what to do afterward eh!.

Thanks for reading this article. I hope it helps you with your next project.

Frontend Developer,
Abdullah Ahmad.

DEV Community: Abdull600

Ultimate guide to using Layout and Head components to add page title for different pages in React/NextJs.