ProNextJS
    Professional Next.js Course
    Loading price
    30-Day Money-Back Guarantee
    lesson

    Create Your First Route

    Jack HerringtonJack Herrington
    Code

    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.

    Transcript

    All right, so we've got our application deployed to production, and we want to try out building our first page route. So I'm going to go and just create a test route just to show you how it works, and then you're going to go and create the about route for application. So I'm going to close these files. I'm going to create a new directory under app, and I'm going to create a new directory under app, and I'm going to create a new directory under app with a name test route, and then inside of that, a file called page.tsx. I'm going to show you something really clever.

    So if you've got a new file here, you just type in the name, test route of the directory, and then you do slash, you do page.tsx, and this will actually create both the directory and the file. I'll return. Nice. So you don't need to go and create a directory first and then create a file within the directory. You can just use that handy little shortcut.

    Now we take a look at our page component from before, we can see that we want to export a React component from our page route as the default. So we just use export default function home over in our test route. I'm gonna use export default function test route. I can actually give it any name I want, but it has to have a name. It will actually get sticklery about that.

    But we'll hit save and we'll see how we go. So again, I'll bring up pmpmdev. Now back in the browser, I'll go back over to our localhost version. I'll change the route to test route. There we go.

    Our test route telling us it's just a test route. Now I want you to go and create an about page for us. So go and create a route just like I did here. Instead of test route, call it about and use that page.tsx file to create your first route. And I'll show you how I did it in the next video.