Next 13 - Trying out routes

If you are an avid reader of my blogs, you'll learn that I learn best by trying things out.

This article will look at the new Next 13 ways of routing.

To get started, we first have to install a new Next 13 app, which is created with the following command at the time of writing.

npx create-next-app@latest --experimental-app

Creating routes

If we open up the project, we already see that inside our app directory, we get a layout.tsx, and page.tsx file.
The layout file is responsible for our layout and the page for our / home page.

We can go multiple routes to add a new page, but let's say we want to create the following pages.

• /dashboard/settings
• /dashboard/account

To achieve this, we have to start by creating our dashboard folder. This folder can eventually hold our global dashboard layout.
Create the settings and account folders in that folder.
And again, inside those, go ahead and create a page.tsx for each.

The whole structure will look like this:

• 🗂️ app
  • 🗂️ dashboard
  • 🗂️ settings
    • 📃 page.tsx
  • 🗂️ account
    • 📃 page.tsx

I do like how this makes every component very clear and explanatory of what it does.

Each page will return what it's on for now.
As for the settings/page.tsx, we use the following.

export default function SettingsPage() {
  return <h1>This is my settings page</h1>;
}

And for the account page:

export default function AccountPage() {
  return <h1>This is my account page</h1>;
}

Now, if you run your application with npm run dev, we will be able to visit both on:

• http://localhost:3000/dashboard/settings
• http://localhost:3000/dashboard/account

Routing groups

Perhaps you like having combined layouts for the settings and account, but you don't want to include the dashboard param in the URL.

For this, we can leverage routing groups, which refer to a group of routes that can share a layout but doesn't get added to the URL.

To achieve this, rename dashboard to (dashboard).

And now, we can visit our pages on the following URLs.

• http://localhost:3000/settings
• http://localhost:3000/account

Conclusion

We can achieve a lot of excellent routing options with the new flows.
They make it super dynamic yet flexible to layout out from here.

In the following article, we'll look at how the layout will look and what will be shared between the pages.

If you are keen, I uploaded the code to GitHub, so you can look over it.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Julia 👩🏻‍💻 GDE]

Thanks for another great article. As an avid reader of your blogs I often feel like „he is doing all the work for me checking things out I am interested in“ - thanks for that.

[Chris Bongers]

That's the idea haha, just some broad interest from me to try out some of this stuff to see what it's about.