I started migrating an app to nextjs (coming from an Ionic with Angular background) because I wanted to learn more about the react ecosystem.

Last night I went through the routing documentation on their site and created the placeholder files and folders for all the pages my app will need, and doing so, I learned a few things about the App Router that I wanted to share with you.

File based routing

First of all, the app router is a file based router, so instead of declaring a router like in Angular and using it to set up all the app routes, in nextjs you put your folders and files inside app/ and the way you structure them defines how your app routes work.

Each folder is a URL segment, and each folder becomes an actual route when we add a page.tsx file inside of it.

For example, a page.tsx inside our app/ folder means that this is the index of our site, so the page you render when people go to https://yourdomain.com.

Route Segments

Since it’s a file based router, then to organize the different pages of our app (like mydomain.com/page1 or mydomain.com/page2) we need to put them as different folders inside our app folder, without forgetting to add a page.tsx (or .js or .ts) to that folder so that it becomes a route.

For example, if I want to create jorgevergara.co/checklists then I would add a checklists folder with a page.tsx:

And if I wanted to have jorgevergara.co/checklists/create for example, I’d add the create folder inside of the checklists folder

Dynamic Routes

We might have the need for a dynamic route, for example, let’s say I want to have a page that’s jorgevergara.co/checklists/edit/<checklistId>, for that, I can wrap the page files inside another folder with square brackets, app/checklists/edit/[id]/page.tsx

And to access that information, then I can go inside my page.tsx and make sure my function accepts the params:

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;

  return (
    <>
      <h1>Details page!</h1>

      <p>This is the detail page for checklist with id: {id}</p>
    </>
  );
}

Linking within pages

For navigating within separate pages, like to go from the list of checklists to the detail of a specific one, the nextjs team has a couple of options, but the one they recommend is the built-in <Link> component.

It extends the HTML <a> tag to provide prefetching and client-side navigation between routes. It is the primary and recommended way to navigate between routes in Next.js.

For example, inside my checklists page, I can go ahead and do this:

import Link from 'next/link';

export default function Page() {
  return (
    <>
      <h1>Checklists!</h1>

      <p>This is the list of checklists</p>

      <p>
        The detail of a checklist will be at
        <Link href="checklists/checklist/12345">Checklist Detail</Link>.
      </p>
    </>
  );
}

If you want to check out the other ways they provide for linking between pages, you can check out their Linking and Navigating docs

And that’s it for now, with this I think I have enough to start building the UI of my app and link between all of the pages that need to, once I’m done with that I’ll move into data fetching 👨🏻‍💻