ProNextJS
    Loading
    lesson

    Add a Header Using Layout

    Jack HerringtonJack Herrington
    Code

    Before we add the About page route to our application, let's remove the test route that we no longer need.

    Then we'll create a new src/about directory and add a page.tsx file. Inside we'll export an AboutRoute component that says "About Us":

    export default function AboutRoute() {
  return (
    <main>
      <h1 className="text-4xl font-bold">About Us</h1>
      <div className="mt-5">About Us and Our Awesome Application</div>
    </main>
  );
}

    After saving these changes, head over to the browser and navigate to the about page. Now, our "About Us" page is up, but it's a tad plain. Let's add a header to our app that applies to every single route.

    Adding a Header

    The perfect place to add the header is in the root layout file at src/app/layout.tsx. The contents of this file apply to every single route in our application.

    Currently, our layout only takes children as its property. The children are the contents of the route, and then the layout wraps the children with whatever you want.

    // inside of src/app/layout.tsx

<html lang="en">
  <body className={inter.className}>{children}</body>
</html>

    In this case, adding a header above the children will put the header on top of every page. It will contain links to the home page (/) and the about route.

    Because this is a Next.js app, we will use the Link component for links. The Link component provides a built-in SPA style navigation system for Next.js. When moving from page to page using link, it swaps out the body section of the page instead of giving you an entirely new page, which is what you get if you use a regular anchor tag.

    We will also add Tailwind classes to help style the layout.

    Here's the markup for the page layout:

    // inside of src/app/layout.tsx
import Link from "next/link";

// inside the component return:
<html lang="en">
  <body className={`${inter.className} px-2 md:px-5`}>
    <header className="text-white font-bold bg-green-900 text-2xl p-2 mb-3 rounded-b-lg shadow-gray-700 shadow-lg flex">
      <div className="flex flex-grow">
        <Link href="/">GPT Chat</Link>
        <Link href="/about" className="ml-5 font-light">
          About
        </Link>
      </div>
      <div></div>
    </header>
    <div className="flex flex-col md:flex-row">
      <div className="flex-grow">{children}</div>
    </div>
  </body>
</html>

    Pushing to Production

    With the page looking good, let's push everything to production.

    Stop the development process, then add the new file and commit & push your changes in git:

    git add -A && git commit -m "Layout" && git push -u origin main

    After a few seconds, Vercel should have the updated page deployed. Remember, any time you push to main, Vercel will automatically build and deploy the changes.

    Next Steps

    Before we build the ChatGPT functionality into our app, we need to make sure that only we can use it in production. To do that, we'll use next-auth to add authorization for our application. We'll cover that in the next section.

    Transcript

    All right, I'm going to go back into our app. I'm going to remove test route because we no longer need that. I'm going to use my new file trick again to create an about directory, and then within that page.tsx. Then I'm going to define my about route. I'm going to say that it's about us, hit save.

    Now, I can go over to my browser again, go to the About page, and now we have our About Us. This is pretty bland. I want to put a header on our app and I want that header to go on every single route. So the place that I'll put that is in the root layout file. This root layout file is applied to every single route in our application.

    So this would be the ideal place to put a header. Now currently our layout takes children as its only property. Those children are the contents of the route and then the layout wraps the children in whatever you want. So in this case we're going to go and add a header on top of children. So that'll put a header on the top of every single page.

    So right above children I'll add a header. Now the header is going to have some links on it. It's going to have a link to the slash page, which is going to take us home. And it's going to have a link to the about route right after that that says about. Now the way that you do links in Next.js is you use the link component.

    So I'm going to go bring that in. So right over the top here, I will import link from next link. Now, why do we use next link? Well, next link is actually a spa style navigation system built into next JS. So as you go from page to page to page using link, it'll actually just swap out the body section of the page as opposed to just giving you an entirely new page, which is what you get if you use a regular anchor tag.

    All right, let's go take a look and see if it's happy. Well, it seems to be. Okay, cool. I am gonna add a little bit of tailwind around our children. I'm gonna define that as a flex box in column mode because later on as we add another column on the side, that's gonna give us a nice two column layout.

    And finally up at the top here just for mobile mode I'm gonna add a little bit of x-padding by default which is what you see on the phone and then on the medium size and up I'm gonna add a little bit more x-padding that kind of comes in from the sides. Alright let's go take a look. Alright that looks really good And we can go back to the homepage and into the about, and you can see how smooth that transition is as we go from route to route. All right, as I say, we want to push everything to production, so let's go do that. Back in Visual Studio Code, I'm again going to stop, then I'm going to use this long command to first add all my changes as well as my new files, commit that using the message layout in this case, and then push that all to GitHub using push origin main.

    All right, let's go take a look over on Versal and see how this is going. If we go over into deployments, we now see that we're building main because our layout commit. I hope in about a couple more seconds, we'll have something to show. Okay, it looks good. Let's go over to our deployed site.

    And there we go. We've got our header. We can navigate around. Really nice. And this all happens because our GitHub project is linked to this Versal project.

    So anytime that we push to our GitHub project on main, we automatically build it on Vercel and deploy it. Now, before you're too far adding Chetubity functionality to our application, we want to make sure that only we can use it in production. To do that, we're going to use NextAuth to add authorization for application in the next section. I'll see you there.