Routing and Navigation in next js v13+

Routing

Routing in Next js is based on the file system. What I mean by this is that routing is based on next js convention using special files and folders.

To create a route, in my case I will create a users route i.e example.com/users

to do so create a users folder inside the app directory and inside it create a page.tsx. page.tsx is a special file used by next js. Make sure to spell it correctly. The name should be in lowercase since this is one of the conventions of next js

You can use either page.tsx or page.jsx depending on your project.

Here is an example of mine.

Inside this page.tsx this is what the user will see when they navigate to /users

endpoint. Inside this file export a react component. You can use this vs code extension https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

The name of the function created does not matter in terms of routing this is just for better organization of our files.

Navigate to the browser and see your page with the text you have in the markup.

NOTE: if you add other files inside the users/ folder or whatever you called your's they won't be accessible outside in the browser.
        

Nested Routes

To add a nested route it is as easy as adding a new folder inside the folder you just created. lets' say you want a route like users/edit you just add a new folder called edit inside the users folder and add a page.tsx file inside it.

Navigation.

Go to the page.tsx file inside your app directory (home) and add an anchor tag and point it to the /user i.e

<a href="/users">go to users</a>        

now go to the browser and click on that link and see the changes you will be navigated to the users endpoint. But we have an issued with this implementation, the page reloads. Is there a better way? of course.

This is where we use the link component defined in nextjs/navigation

import Link from "next/link";

<Link href="/users"></Link>        

So by using the link component the page does not refresh but instead we are navigated smoothly to the page.

DYNAMIC ROUTES IN NEXT JS VS 13+

Let's say we want to create a router with a dynamic parameter like an id for the user. How do we do that in next js?

what we do is we create a folder with a special naming syntax. Now instead of just creating a folder and giving it a name we now create a folder with the name of the parameter we want e.g id so we want something like this users/edit/id

Inside the edit folder add a new folder called [id] be careful to use a meaningful name since you will need it later. Don't forget to add a page.tsx file.

Accessing a dynamic parameter in the component

You might be wondering how do I access the id parameter in my component? well let me show you.

So next js passes a params prop to the page file of the containing folder and you can access the params from that object with the key being name we used earlier in our case it is the id.

Since I am using typescript I have defined a props interface which contains the shape of my parameter which is id

Now we can access the id using params.id or basically destructure the params object right away and access the id.

The params are passed as a prop to the parent page file if in case you have other components nested in the parent you need to access the param in the page file and pass it down to the children.

Another thing to note is that the dynamic params are unique i.e we can't use the id twice e.g /users/edit/[id]/article/[id]

Catch All Segments.

Hey what do you mean by catch all segments? The catch all segments means catching all the parameters in an URL. Imagine we are creating and endpoint like this /users/edit/1/tall/dark/handsome

Will we create all those nested folders? Of course not but we can but this is quite tedious and unmaintainable since there is a better way.

Create a new folder with this syntax [...slug]. This is to make it accept multiple precede it with ...

This syntax [...slug] grabs all the parameters and provides them as a params object with a key by the name slug and the value is an array with all the slugs .eg ['tall','dark','handsome']

you'll notice that it is required to pass atleast one parameter for this to work. But what if I want to make it optional?

If you want the parameters to be optional we can use double square brackets e.g [[...slug]] so now the slug is optional and there is no error when we navigate to a page that does not have a slug

That is the end. Thanks for reading through. I would like to hear your thoughts on this..

lets connect in LinkedIn or github