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.