Writing Backend API Routes in Next.js

Dynamic API Routes in Next.js

Dynamic routes are supported through API routes, which use the same file naming conventions as pages.

The code for the API route pages/api/post/[pid].js, for example, is as follows:

export default function handler(req, res) {
 const { pid } = req.query
 res.end(`Post: ${pid}`)
}

You can also try this code with Online Javascript Compiler

Run Code

A request for '/api/post/abc' now returns the text 'Post: abc.'

API Structure

Setting up routes like this is a standard RESTful pattern. 

'GET api/posts' returns a paginated list of entries; 'GET api/posts/2139' returns the post id 2139.

We can model this in two ways:

• Option 1:
  • ‘/api/posts.js’
  • ‘/api/posts/[postId].js’
• Option 2:
  • ‘/api/posts/index.js’
  • ‘/api/posts/[postId].js’

Both are the same. A third option is to just use /api/posts/[postId]. Because Dynamic Routes have no undefined state, GET api/posts will never match /api/posts/[postId]. js.

Catching All API Routes

By adding three dots (...) inside the brackets, API Routes can be expanded to catch all paths. 'pages/api/post/[...slug].js', for example, matches '/api/post/a' as well as '/api/post/a/x, /api/post/a/x/y,' and so on.

Note that we can use names other than 'slug,' for example: '[...param]'.

The following 'query' object will be provided to the page as a query parameter ('slug' in this example), and it will always be an array; thus, the path '/api/post/a' will contain the following 'query' object:

{ "slug": ["a"] }

You can also try this code with Online Javascript Compiler

Run Code

The new parameters added to the array in the case of '/api/post/a/y' and any other matching path, as follows:

{ "slug": ["a", "y"] }

You can also try this code with Online Javascript Compiler

Run Code

The following is an example of an API route for 'pages/api/post/[...slug].js':

export default function handler(req, res) {
 const { slug } = req.query
 res.end(`Post: ${slug.join(', ')}`)
}

You can also try this code with Online Javascript Compiler

Run Code

A request to '/api/post/a/x/y' now returns the following text: 'Post: a, x, y'.

Response Helpers

The Server Response object (commonly abbreviated as 'res') contains a set of Express.js-style helper methods to improve the experience of the developer and speed up the creation of new API endpoints.

The following people are included as helpers:

• 'res.status(code)' - It sets the status code. 'code' must be an HTTP status code that is valid.
• 'res.json(body)' - It returns a JSON object. The object 'body' must be serializable.
• 'res.send(body)' is a function that sends the HTTP response. A'string,' a 'object,' or a 'Buffer' can be used as the 'body.'
• 'res.redirect([status,] path)' - Redirects to a path or URL specified by the user. The value of 'status' must be an HTTP status code that is valid. 'status' defaults to "307" "Temporary redirect" if not given.

Status Code of Response

You can set the status code of a response when sending it back to the client.

The following example updates the response's status code to 200 (OK) and returns a JSON response with the message attribute set to 'Hello from CodingNinjas!':

export default function handler(req, res) {
 res.status(200).json({ message: 'Hello from CodingNInjas!' })
}

You can also try this code with Online Javascript Compiler

Run Code

Sending Response in JSON Format

You can send the client a JSON response, but it must be a serializable object. In a real-world application, based on the answer from the requested endpoint, you might want to inform the client about the request's status.

The example below sends a JSON response with the status code 200 (OK) and the async operation result. It's wrapped in a try-catch block to handle any issues that may arise, with the relevant status code and error message being caught and returned to the client:

export default async function handler(req, res) {
 try {
   const result = await someAsyncOperation()
   res.status(200).json({ result })
 } catch (err) {
   res.status(500).json({ error: 'failed to load data' })
 }
}

You can also try this code with Online Javascript Compiler

Run Code

Sending Response in HTTP Format

An HTTP response is sent in the same way that a JSON response is sent. The response body can be a string, an object, or a Buffer, with the main distinction being that it can be a string, an object, or a Buffer.

The example below delivers an HTTP response with the status code 200 (OK) and the async operation result.

export default async function handler(req, res) {
 try {
   const result = await someAsyncOperation()
   res.status(200).send({ result })
 } catch (err) {
   res.status(500).send({ error: 'failed to fetch data' })
 }
}

You can also try this code with Online Javascript Compiler

Run Code

Redirects to a specified path or URL

You could wish to redirect your client to a specific path or URL after they've submitted a form, for example.

If the form is successfully submitted, the following example redirects the client to the / path:

export default async function handler(req, res) {
 const { name, message } = req.body
 try {
   await handleFormInputAsync({ name, message })
   res.redirect(307, '/')
 } catch (err) {
   res.status(500).send({ error: 'failed to fetch data' })
 }
}

You can also try this code with Online Javascript Compiler

Run Code

Frequently Asked Questions (FAQs)

1.What is Next.js?

Next.js is a React framework that allows you to create single-page Javascript apps. This framework has various advantages for our clients' applications and our development team. 

2.What is an API route in Next.js?

API (Application Programming Interface) in Next.js is a software intermediary that allows two applications to talk to each other.

Key Takeaways

In this article, We learned about the API routes in next.js. We also learned the concept of Dynamic API routes and API structure in Next.js. We also saw how to send responses in JSON and HTTP formats.

For more information about the react framework for frontend development, get into the entire Frontend web development course, and to learn more about backend development go through the Backend web development course.

Happy Learning!