Now that we have our application deployed, let's create a page route.
Creating a Test Route and Page
Inside of the src/app directory, create a file called test-route/page.tsx. In VS Code this will automatically create the folder and file at the same time, otherwise you can create the folder and file separately.
Referencing the Home page component, we can see that we need to export a React component from our page route as the default. You can name the function anything you want, as long as you have a name:
export default function TestRoute() {
return (
<main>
<h1 className="text-4xl font-bold">Test Route</h1>
<div className="mt-5">This is just a test route, you should delete me.</div>
</main>
);
}
Running the Test Route
Once we've saved our work, let's take a look at the result. Bring up your local development server with pnpm dev and navigate to our application on localhost.
Replace the path in your browser with /test-route, and voila! You'll see our 'test route' delivering a message confirming that it's a test route.
Challenge
Now it's your turn to get your hands dirty. Your task is to create an 'About' page for the application. Simply follow the steps from implementing the test route, only this time, name the route 'about' and create a page.tsx file.
In the next video, we'll go through it together.