NextJs Handling API Requests

Next.js is a popular server-side rendering framework for React. With Next.js, you can build modern web applications that benefit from server-side rendering and a great developer experience. Handling API requests with Next.js is a crucial part of building your applications.

Syntax

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' })
}

Example

// pages/api/users.js
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
]

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json(users)
  } else if (req.method === 'POST') {
    const user = req.body
    users.push(user)
    res.status(201).json(user)
  } else {
    res.status(405).json({ message: 'Method not allowed' })
  }
}

Output

The output of the above example API would be:

• A GET request would return an array of users: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' }]
• A POST request with a user object would return the same user object: { id: 4, name: 'Alice' }

Explanation

Next.js provides a folder called pages/api for handling API requests. Inside this folder, you can create a file for each API endpoint. In our example, we created a file users.js to handle GET and POST requests to /api/users.

The handler function is the entry point for all requests to our API endpoint. It takes two arguments: req and res, which are the standard Node.js request and response objects, respectively.

In our example, we use req.method to determine the HTTP method of the incoming request. Depending on the HTTP method, we either return a list of users or add a new user to the list. If the HTTP method is not allowed, we return a 405 Method Not Allowed response.

Use

Using Next.js to handle API requests is a quick and reliable way to build backend logic into your web application. You can use Next.js to fetch data from external APIs, integrate with a database, or build custom serverless APIs. This allows your application to offload the heavy lifting of data processing and leave the UI to client-side rendering.

Important Points

• Next.js provides a simple folder structure for handling API requests
• The handler function is the entry point for all requests to your API
• You can use standard Node.js request and response objects (req and res) to handle incoming requests and send responses
• Next.js automatically handles CORS (Cross-Origin Resource Sharing) and sets the proper content-type headers

Summary

Handling API requests with Next.js is an essential part of building modern web applications. With Next.js, creating endpoints and handling requests is straightforward and intuitive. Next.js provides a convenient way to build your custom APIs or fetch data from external sources while taking advantage of server-side rendering and a great developer experience.