Using Layout and Head components to add page title for different pages

In this article, I'll show you how to use Layout and Head components to add page title to different pages in your Nextjs app. These tips also works in your Reactjs apps.

Sit back and enjoy while I take show you how to add titles for your pages!.

Create NextJs app
Create a Components folder
Create a Layout component
Import Head Component from Next-Head
Create a Page in pages folder

1. 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 goto the folder you would love 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 in my computer, so don't worry 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.

2. 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.

screenshot-www.smashingmagazine.com-2022.07.05-16_57_53.png

3. Create a Layout Component

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

First step Write the following codes in the Layout 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 component. the children prop will allow the layout 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 super power to make the changes on every title in 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>
           </>
)
}

4. Create a new page

Let's create a new page in the pages folder by naming it "test.js". In this page we'll write just a few codes since we are not here to change the world...lol First step Import Layout from the Layout component into the test page and import Link from next/link to direct user to the home of the app.

test.js

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 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 pages we goto.

test.js

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 index.js file and make some changes to what how our pages title will be looking once we navigate to other pages in our app. Okay, let's do some clearing here!

index.js

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 command in our terminal to see what we finally have.

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

Thanks for reading this article!.

Abdullahi Ahmad

Abdullahi Ahmad

Using Layout and Head components to add page title for different pages in NextJs.

1. Create NextJs app

2. Create a components folder

3. Create a Layout Component

4. Create a new page