International Journal of Trend in Scientific Research and Development (IJTSRD)

Volume 7 Issue 4, July-August 2023 Available Online: www.ijtsrd.com e-ISSN: 2456 – 6470

NextJs File-Based Routing - A Review

Krutika Patil
Master of Science in Computer Science the University of Texas at Dallas, Tracy, CA, USA

ABSTRACT How to cite this paper: Krutika Patil

Next Js is quickly gaining popularity as a full-stack React Js "NextJs File-Based Routing - A Review"
framework and a React framework for Production. Next Js helps us Published in
build efficient websites with solid Search Engine Optimization. International
Next.js, developed by Vercel, has become a popular framework for Journal of Trend in
Scientific Research
developing React applications. It provides useful features such as
and Development
server-side rendering, static site generation, and an intuitive file- (ijtsrd), ISSN:
based routing system, revolutionizing how developers construct their 2456-6470, IJTSRD58607
applications. This paper delves into the intricacies of the file-based Volume-7 | Issue-4,
routing system in Next.js, discussing its principles, benefits, potential August 2023, pp.40-42, URL:
issues, and use cases bolstered by tangible coding examples. www.ijtsrd.com/papers/ijtsrd58607.pdf
KEYWORDS: NextJs, file-based routing, full-stack, web development, Copyright © 2023 by author (s) and
react-router, reactJs, javascript International Journal of Trend in
Scientific Research and Development
Journal. This is an
Open Access article
distributed under the
terms of the Creative Commons
Attribution License (CC BY 4.0)
(http://creativecommons.org/licenses/by/4.0)

INTRODUCTION
As per the NextJs official website, it is a full-stack application. Hence, NextJs is also a React framework
React and React framework for Production. Let's dive for Production. Next.js introduces a file-based routing
into what each of these statements means. NextJs system that leverages the file system to create
brings a few key features—file-based routing, server- application routes. In contrast to traditional routing
side rendering, API integration, and static site systems where routes need to be defined manually,
generation. In a contemporary Js framework like Next.js automatically routes files under the pages
React, we must add a dependency like 'react-router' to directory, significantly simplifying the routing
get routing capability. NextJs supports this out-of-the- process.
box, eliminating the need for a routing package.
The file-based routing system deviates from most
NextJs also has a strong ability of "server-side
client-side routing libraries like react-router, which
rendering.” The pages are rendered at the server and
need an explicit definition of each route. Instead, it
not the client, so the initial load is quick without
uses a convention-over-configuration paradigm,
needing a loading state before the render. The ability
automatically establishing routes based on the file
to generate content on the server also helps with better
structure. Let us now discuss the important key feature
Search Engine Optimization since the Search engine
of NextJs (file-based routing).
crawlers see the content that the users see on the page.
Since all the content gets pre-rendered on the server, it A. Nested Routes
is beneficial to Optimize Search Engines (SSO). Consider a freshly created Next Js project. The
NextJs also offers API integration out-of-the-box, project structure consists of a “pages” folder at the
which helps integrate the backend services efficiently. root, as shown in Figure 1 below. The contents of
Due to these critical features, NextJs is a full-stack this folder will decide the routing of the application.
React framework. Also, the attributes we discussed We will have an “index.js” file at the root of this
are crucial to building a Production-ready React folder. This file renders the contents at the “/“ path.

@ IJTSRD | Unique Paper ID – IJTSRD58607 | Volume – 7 | Issue – 4 | Jul-Aug 2023 Page 40

 International Journal of Trend in Scientific Research and Development @ www.ijtsrd.com eISSN: 2456-6470
Using both ways, we can render the content at
"/clients.” One advantage of the first method is that if
we have nested routes for "/clients," we can create
those. For example, if we need to render the content
at "/clients/client," we can create a folder inside the
"clients" folder with the name "client" and then have
a "index.js" file inside the "client" folder.
Having nested routes is not possible with the second
way.
B. Dynamic Routes
There are instances where we would like to render the
routes dynamically. For example: suppose we have a
structure like "/clients/1" where we display the
client's details with id as 1; we wouldn't know
beforehand all the possible values of the client to
Figure 1: NextJs pages folder create those paths/ files. In such a case, NextJs offers
a key feature in files-based routing known as
To render the next route segment, we can in 2 ways: "dynamic routes." Inside the "clients" folder, we can
1. Create a new folder with the name of the path have a file named "[id].js." Please note the syntax.
segment and name the script inside “index.js.” The keyword "id" is surrounded by square brackets,
For example, if we would like to create a path meaning the value of "id" will be determined
“/clients/," we can create a folder named "clients" dynamically. There is also another way to do this. We
and then create a script inside this folder with the can create a new folder inside the "clients" folder
name "index.js.” with the name "[id]" and have an "index.js" file
inside it.

Figure 2: NextJs nested routes structure using

folders Figure 4: NextJs pages folder
2. Create “clients.js” in the pages folder. The result of this method would also lead to us being
able to render the content at "clients/[id]." On the [id]
javascript page, we will be able to retrieve the value
of “id” using the next js package "next/router."
Using the code below in Figure 4:

Figure 3: NextJs nested routes structure using Figure 5: Using “next/router’ to access the
file dynamic route query param

@ IJTSRD | Unique Paper ID – IJTSRD58607 | Volume – 7 | Issue – 4 | Jul-Aug 2023 Page 41

 International Journal of Trend in Scientific Research and Development @ www.ijtsrd.com eISSN: 2456-6470
We import the “use router" library from the documentation site where each post or document
"next/router” package. Then, implementing the is a separate page.
function "userRouter" gives us the router object. The
2. E-commerce Site: You can use file-based routing
"query" object inside the "router" object contains the
to create product pages with dynamic routes,
keys to all the dynamic ids passed along the route. In
where the URL contains the product id or name.
this case, it will be the "id."
CONCLUSION
C. Catch-all Routes Next.js's file-based routing is a game-changer,
For catch-all routes, Next.js allows using
introducing a simple, intuitive routing system that
[[...param]]. It will match /blob/a, /blog/a/b,
offers developers significant flexibility in structuring
/blog/a/b/c, etc.
their applications. Its ability to automatically route,
split code, and prefetch data lead to performance
benefits and faster development times. Whether you're
creating a blog, an e-commerce site, or any other web
application, Next.js's file-based routing can be a
powerful tool to enhance your development process.
While this paper aimed to explore the core concepts of
Figure 6: Catch-all route
file-based routing in Next.js, we recommended further
We will be able to access the route segments using the digging into the Next.js documentation to explore
'next/router' package again, as depicted in the below progressive ideas such as API routes, custom servers,
code: and middleware, as they offer further opportunities for
optimization and control in your applications.
Despite its many benefits, it's important to note that
Next.js's file-based routing might only fit some use
cases, particularly applications that require a more
flexible or complex routing logic. As with any
technology decision, it's crucial to carefully consider
the trade-offs and ensure it aligns well with your
project's requirements.
REFERENCES
[1] Krutika Patil, Sanath Dhananjayamurty Javagal,
Figure 7: Retrieving all path segments of a "React state management and side-effects – A
catch-all route using ‘next/router’ Review of Hooks," IRJET Journal, volume 9,
D. Benefits 2022,
NextJs file-based routing offers several benefits: https://www.irjet.net/archives/V9/i12/IRJET-
Simplicity and Predictability: The automatic routing V9I1225.pdf.
system significantly simplifies the routing process, [2] Krutika Patil "Redux State Management System
making it predictable and intuitive. Developers can - A Comprehensive Review" Published in
easily predict the URL structure of their application International Journal of Trend in Scientific
based on the file structure. Research and Development (ijtsrd), ISSN:
Code Splitting and Prefetching: Next.js automatically 2456-6470, Volume-6 | Issue-7, December
splits your code into separate bundles, so each page 2022, pp.1021-1027, URL:
only loads what's necessary. It also prefetches link https://www.ijtsrd.com/papers/ijtsrd52530.pdf.
data on hover, enabling instant page transitions. [3] https://www.udemy.com/course/react-the-
Dynamic and Catch-All Routes: Next.js supports complete-guide-incl-
dynamic routes, generating routes based on data. redux/learn/lecture/25599228?start=405#overvi
Catch-all routes enable matching paths that can have ew
an arbitrary number of segments. [4] https://www.udemy.com/course/nextjs-react-
E. USE CASES the-complete-
1. Blog or Documentation Site: With dynamic guide/learn/lecture/25145398#overview
routes, you can easily set up a blog or

@ IJTSRD | Unique Paper ID – IJTSRD58607 | Volume – 7 | Issue – 4 | Jul-Aug 2023 Page 42