Next JS Dynamic API Routes
Last Updated :
25 Jul, 2024
Next.js dynamic API routes allow you to create flexible endpoints that can handle various parameters, enabling powerful and versatile server-side functionalities within your application.
Prerequisites:
Dynamic API Routes
Dynamic API routes in Next.js enable the creation of endpoints that can capture and process URL parameters dynamically. These routes allow your application to handle various resource requests identified by unique parameters, making it easier to build APIs that interact with multiple resources. This feature is particularly useful for developing complex applications requiring adaptable and scalable server-side logic.
How to declare Dynamic API Routes?
Dynamic API Routes in Next.js follows a pre-defined syntax to declare Dynamic API routes. To declare a Dynamic API routes in Next.js you need to write the file name or folder name in square brackets "[]". then, write the code of the application in the function.
Syntax:
[folder_name] or [file_name].jsx
Steps to Create Dynamic API Routes in Next JS
Step 1: Create a NextJs app using the following command.
npx create-next-app my-app
Step 2 : Got to the project directory and create a main Folder students in "src/app" directory
cd my-app
src -> app -> new_folder_name = students
Step 3 : Create a new Folder with [studentId] inside students folder.
mkdir [studentId]
Step 4 : Create a new file inside [studentId]
example:/src/app/students/[studentId]/page.jsx
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.0.4"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"eslint": "^8",
"eslint-config-next": "14.0.4"
}Example: Write the following code in page.jsx file.
JavaScript
// page.jsx
// The params object contains route parameters as KEY-VALUE pairs
export default function Students({ params }) {
return (
<main>
<div className="font-semibold text-xl ml-10">
{/* Students List with different student Id */}
<h3 className="font-bold text-2xl">Students List</h3>
I am Geek {params.studentId}
</div>
</main>
);
}
Step To run the application:
Step 1: Run the following command in the terminal
npm run dev
Test your dynamically created API routes by visiting "http://localhost:3000/students/1, http://localhost:3000/students/2, .... http://localhost:3000/students/1000, etc. " in your browser
http://localhost:3000/students/1
http://localhost:3000/students/2
http://localhost:3000/students/3
..........
..........
..........
..........
http://localhost:3000/students/1000
Output: For different Dynamic API Path, It will generate a different content on UI to be rendered. Some of them are as shown below.
Similar Reads
Next.js Dynamic Route Segments
Dynamic routing is a core feature in modern web frameworks, enabling applications to handle variable paths based on user input or dynamic content. In Next.js 13+, with the introduction of the App Router, dynamic routes are implemented using a folder-based structure inside the app directory. This art
2 min read
useRouter in Next JS
Next.js is a React framework that is used to build full-stack web applications. It is used both for front-end as well and back-end. It comes with a powerful set of features to simplify the development of React applications. One of its features is useRouter hook that is part of the Next.js routing sy
4 min read
How to use Next.js API Routes?
Next.js API Routes are a feature of Next.js that allows you to create server-side logic and APIs within your Next.js application. These API routes are implemented using files in the `pages/api` directory of your Next.js project. When you deploy your Next.js application, these API routes are automati
8 min read
Next.js Intercepting Routes
Next.js is the most widely used React framework. With each new major release, the Next.js team is adding amazing features to the framework. Here, We will deep dive into a feature called Intercepting Routes which was added in a recent release to render modal on the same page with a unique URL. Interc
7 min read
Node.js Handling invalid routes
While developing Node.Js application it is important to handle invalid routes. It can be done by writing a custom route or redirecting all the invalid routes to any custom page. Let’s develop an simple nodejs server for handling invalid routes:Step 1: Create a project folder Create a separate folder
4 min read
Next.js Optional catch all routes
Optional catch-all routes in Next.js provide a way to define dynamic routes that can match multiple path segments, allowing more flexibility in routing. Optional catch-all routesOptional catch-all routes in Next.js extend the concept of catch-all routes by allowing you to handle routes with a variab
2 min read
Routing in Nuxt.js
In this article, we are going to learn how routing works in NuxtJs. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of a similar purpose, based on React.js. Create NuxtJS Application: Step
2 min read
Next.js Nested Routes
Next.js is a popular React framework that enables server-side rendering and static site generation. One of the key features that enhance the development experience in Next.js is its routing system. While Next.js provides a file-based routing mechanism, implementing nested routes requires some additi
5 min read
Next.js Injecting the router
In this article, we will learn how we can inject the router into our NextJS project. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. Next.js has a file-system-based router built on the concept of pages. W
3 min read
How to Catch All Routes in Next.js ?
To catch all routes in Next.js, you create a dynamic route file using the catch-all segments syntax. This allows you to handle various routes dynamically, enhancing routing flexibility and application structure. Catch all routesTo catch all routes in next js, We will Create a file named [...gfg].js
2 min read