Episyche
NextJS/Routing in NextJS/
2022-10-17T06:44:55.663156Z
Published on
Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here.
Next.js has a file-system-based router and automatically treats every file with the extensions .js, .jsx, .ts, or .tsx under the pages directory as a route.
Next.js
There are six most common routes there in Next.js
Route with pages
Nested routes
Dynamic routes
Catch-all routes
Link component navigation
Programatically navigate between pages
The router will automatically route files named index to the root of the directory.
Next.js will associate any file in this directory as a route and also route a page with a filename.
Our Scenario :
If you already have the Next.js project, please copy the project. In this blog, we are using a sample Next.js project code with Tailwind CSS.
nextjs_page_route_example → pages →index.js
Update the index.js in the above path, using the following snippet.
1export default function Example() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 Home page
5 </p>
6 );
7}
nextjs_page_route_example → pages
Create a file with a .js extension example of profile.js and about.js in the above path. As shown in the following screenshot.
nextjs_page_route_example → pages →about.js
Update the about.js in the above path, using the following snippet.
1export default function About() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 About page
5 </p>
6 );
7 }
A sample about.js file can be found in the following git repository file.
nextjs_page_route_example/about.js at master · episyche/nextjs_page_route_example
nextjs_page_route_example → pages →profile.js
Update the profile.js in the above path, using the following snippet.
1export default function Profile() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 Profile page
5 </p>
6 );
7 }
A sample profile.js file can be found in the following git repository file.
nextjs_page_route_example/profile.js at master · episyche/nextjs_page_route_example
Run the Next Application with the following command.
1npm run dev
After compiling your application open your browser and check the following URL:
1http://localhost:3000/
The Example UI is shown in the following screenshot.
Add the profile, to your URL using the following snippet.
1http://localhost:3000/profile
The Example UI is shown in the following screenshot.
Add the about, to your URL using the following snippet
1http://localhost:3000/about
The Example UI is shown in the following screenshot.
The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.
Our Scenario :
nextjs_page_route_example → pages
create a folder with your preferred name (e.g. blog). in the above path.
nextjs_page_route_example → pages →blog
Create a file with a .js extension example of index.js, first.js, and second.js in the above path. As shown in the following screenshot.
nextjs_page_route_example → pages →blog→index.js
Update the index.js in the above path, using the following snippet.
NOTE * :
Inside any folder if set an index.js as a filename. the routers will automatically route files named with index initial.
1export default function Blog() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 Blog Page
5 </p>
6 );
7 }
A sample index.js file can be found in the following git repository file.
nextjs_page_route_example/index.js at master · episyche/nextjs_page_route_example
nextjs_page_route_example → pages →blog→first.js
Update the first.js in the above path, using the following snippet.
1export default function First() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 Blog First Page
5 </p>
6 );
7 }
A sample first.js file can be found in the following git repository file.
nextjs_page_route_example/first.js at master · episyche/nextjs_page_route_example
nextjs_page_route_example → pages →blog→second.js
Update the second.js in the above path, using the following snippet.
1export default function Second() {
2 return (
3 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4 second Second Page
5 </p>
6 );
7 }
A sample second.js file can be found in the following git repository file.
nextjs_page_route_example/second.js at master · episyche/nextjs_page_route_example
Run the Next Application with the following command.
1npm run dev
After compiling your application open your browser and check the following URL:
1http://localhost:3000/blog
The Example UI is shown in the following screenshot.
Add the path (first), to your URL using the following snippet.
1http://localhost:3000/blog/first
The Example UI is shown in the following screenshot.
Add the path (second), to your URL using the following snippet.
1http://localhost:3000/blog/second
The Example UI is shown in the following screenshot.
Defining routes by using predefined paths is not always enough for complex applications, so we use a Dynamic route.
To match a dynamic segment, you can use the bracket syntax ( [ ] ). This allows you to match named parameters.
Our Scenario :
nextjs_page_route_example → pages
Create a folder with your preferred name (e.g. product)
nextjs_page_route_example → pages →product
Create a file with a .js extension example of index.js and [id].js in the above path.
[id].js file for a dynamic route.
Inside the array [ ] any type of value we can send.
This type of route is mostly used in blogs and products like e-commerce website pages.
As shown in the following screenshot for folder structure.
nextjs_page_route_example → pages →product→index.js
Update the index.js in the above path, using the following snippet.
1export default function Product() {
2 return (
3 <>
4 <div>
5 <h1 className="mx-16 mt-16 text-xl font-bold text-green-600 cursor-pointer">
6 Product List
7 </h1>
8 <div className="text-gray-600 mx-16 mt-4">
9 <p> Product 1 </p>
10 <p> Product 2 </p>
11 <p> Product 3 </p>
12 <p> Product 4 </p>
13 </div>
14 </div>
15 </>
16 );
17}
A sample index.js file can be found in the following git repository file.
nextjs_page_route_example/index.js at master · episyche/nextjs_page_route_example
nextjs_page_route_example → pages →product→[id].js
Update the [id].js in the above path,
we are using useRouter hook, so we have imported the same here. using the following snippet.
1import { useRouter } from "next/router";
Easily we get the query param using the UseRouter() method. If you want to access the router object inside any function component in your app, you can use the useRouter hook. using the following snippet.
1export default function ProductDetails() {
2
3 const router = useRouter();
4 const {id} = router.query
5
6 return (
7 <>
8 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
9 Product Product Details {id}
10 </p>
11 </>
12 );
13 }
A sample [id].js file can be found in the following git repository file.
nextjs_page_route_example/[id].js at master · episyche/nextjs_page_route_example
Run the Next Application with the following command.
1npm run dev
After compiling your application open your browser and check the following URL:
1http://localhost:3000/product
The Example UI is shown in the following screenshot.
Add the path (product4), to your URL using the following snippet.
1http://localhost:3000/product/product4
In this UI example, we get query param ( product4 ) from the URL and display the param value.
NOTE * :
This example related to blogs pages, displaying the multiple blogs in a webpage when click particular blog it to be display brief notes about that blog.
The Example UI is shown in the following screenshot.
The catch-all routes ( […param].js) are different from optional catch-all routes ( [[…param]].js). In optional catch-all routes, the route without the parameter will also get a match, but in catch-all routes, the route without the parameter will not match, In the given below example we’ll explain briefly.
Our Scenario :
nextjs_page_route_example → pages
Create a folder with your preferred name (e.g. docs). in the above path.
nextjs_page_route_example → pages →docs
Create a file with a .js extension example of […params].js in the above path.
This type of route is mostly used in documentation website pages for multi-nested routes.
As shown in the following screenshot for folder structure.
nextjs_page_route_example → pages →docs→ […params].js
Update the […params].js in the above path. On this page, we are using useRouter hook, so we have imported the same here. using the following snippet.
1import { useRouter } from "next/router";
Easily we get the query param value using the UseRouter() method.
If you want to access the router object inside any function component in your app, you can use the useRouter hook. using the following snippet
1 const router = useRouter();
2 const { params =[] } = router.query;
3 console.log(params);
After getting a param value from the URL. apply condition with params for displaying the param value. using the following snippet.
1 if (params.length === 2) {
2 return (
3 <h1 className="mx-16 mt-16 text-xl font-bold text-green-600 cursor-pointer">
4 the docs of head {params[0]} and concept {params[1]}
5 </h1>
6 );
7 } else if (params.length === 1) {
8 return (
9 <h1 className="mx-16 mt-16 text-xl font-bold text-green-600 cursor-pointer">
10 the docs of head {params[0]}
11 </h1>
12 );
13 }
14 return (
15 <>
16 <div>
17 <h1 className="mx-16 mt-16 text-xl font-bold text-green-600 cursor-pointer">
18 Docs Home page
19 </h1>
20 </div>
21 </>
22 );
As shown in the following screenshot.
Run the Next Application with the following command.
1npm run dev
After compiling your application open your browser and check the following URL :
1http://localhost:3000/docs
The Example UI is shown in the following screenshot.
The above screenshot was a 404 error because the route without the parameter ( localhost:3000/docs/ ) will not match so, throw an error.
So, this file changed catch-all routes to optional catch-all routes. file name [...params].js to [[…params]].js.
A sample […params].js file can be found in the following git repository file.
nextjs_page_route_example/[[...params]].js at master · episyche/nextjs_page_route_example
And check your browser. The example UI is shown in the following screenshot.
Add the path (1), to your URL using the following snippet.
1http://localhost:3000/docs/1
As shown in the following screenshot.
Add the path (5), to your URL using the following snippet.
1http://localhost:3000/docs/1/5
In this URL we can send multiple params. As shown in the following screenshot.
Link is one of the components in Next.js
It is used to create links between pages in a Next.js app
<Link> allows you to do client-side navigation and accepts props that give you better control over the navigation behavior.
Step 1: Update the index.js in the pages folder
nextjs_page_route_example → pages →index.js
Update the index.js in the above path.
For this example, we are using the Link from next. so we have imported the same here. using the following snippet.
1import Link from "next/link";
After importing the Link component from next, use the Link to navigate between pages. using the following snippet.
1 return (
2 <>
3 <div className="my-8">
4 <Link href="/">
5 <a className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">Home</a>
6 </Link>
7 <Link href="/about">
8 <a className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">about</a>
9 </Link>
10 <Link href="/product">
11 <a className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">product</a>
12 </Link>
13 </div>
14 </>
15 );
As shown in the following screenshot.
A sample index.js file can be found in the following git repository file.
nextjs_page_route_example/index.js at master · episyche/nextjs_page_route_example
nextjs_page_route_example → pages →product→index.js
Update the index.js in the above path.
For this example, we are using the Link from next. so we have imported the same here. using the following snippet.
1import Link from "next/link";
After importing the Link component from next, use the Link to navigate between pages. using the following snippet.
1 return (
2 <>
3 <div>
4 <Link href="/">
5 <a className="mx-4" >Home</a>
6 </Link>
7 <h1 className="mx-16 mt-16 text-xl font-bold text-green-600 cursor-pointer">
8 Product List
9 </h1>
10 <div className="text-gray-600 mx-16 mt-4">
11 <Link href="/product/1">
12 <a className="mx-4">Product 1</a>
13 </Link>
14 <Link href="/product/2">
15 <a className="mx-4">Product 2</a>
16 </Link>
17 <Link href="/product/3">
18 <a className="mx-4">Product 3</a>
19 </Link>
20 <Link href="/product/4">
21 <a className="mx-4">Product 4</a>
22 </Link>
23 </div>
24 </div>
25 </>
26 );
As shown in the following screenshot.
A sample index.js file can be found in the following git repository file.
nextjs_page_route_example/index.js at master · episyche/nextjs_page_route_example
nextjs_page_route_example → pages →product→[id].js
Update the [id].js in the above path.
For this example, we are using the Link from next. so we have imported the same here. using the following snippet.
1import Link from "next/link";
After importing the Link component from next, use the Link to navigate between pages. using the following snippet.
1 return (
2 <>
3 <Link href="/">
4 <a>Home</a>
5 </Link>
6
7 <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
8 Product Product Details {id}
9 </p>
10 </>
11 );
As shown in the following screenshot.
A sample [id].js file can be found in the following git repository file.
nextjs_page_route_example/[id].js at master · episyche/nextjs_page_route_example
Run the Next Application with the following command.
1npm run dev
After compiling your application open your browser and check the following URL :
1http://localhost:3000/
The Example UI is shown in the following screenshot. and click to about.
After clicking about, the page navigates to the about page. shown in the following screenshot.
Please come to the back and click on Product. The Example UI is shown in the following screenshot.
After clicking Product, the page navigates to the product page.
shown in the following screenshot. Click to Product 1
After clicking Product 1, the page navigate to [ id ].js page.
As shown in the following screenshot. and click the Home link.
After clicking Home link the page navigate to the Home page.
As shown in the following screenshot.
In the above routes, all are set in the Link component from next js.
In Programmatically navigation, click a particular button or text the page navigates to a custom URL.
Our Scenario :
nextjs_page_route_example → pages →index.js
Update the index.js in the above path.
we are using useRouter hook, so we have imported the same here. using the following snippet.
1import { useRouter } from "next/router";
If you want to access the router object inside any function component in your app, you can use the useRouter hook. using the following snippet.
1var router = useRouter();
Add the button with a function. using the following snippet.
1<button className="border text-white font-bold p-1 bg-green-700 mx-12 rounded" onClick={handleClick}>
2 place order
3</button>
1 function handleClick(){
2 router.push("/product")
3 }
As shown in the following screenshot.
A sampleindex.js file can be found in the following git repository file.
nextjs_page_route_example/index.js at master · episyche/nextjs_page_route_example
Run the Next Application with the following command.
1npm run dev
After compiling your application open your browser and check the following URL :
1http://localhost:3000/