Next.js Route Handlers | Updated 2024

17

Next.js 13 introduced a new file-based routing system that simplifies the creation and management of route handlers. This guide will cover how to set up and use route handlers in Next.js, allowing you to create API endpoints and custom routes effortlessly.

Steps for Next.js Route Handlers

Step 1: Setting Up a New Next.js Project

Initialize a New Project

npx create-next-app@latest nextjs-route-handlers
cd nextjs-route-handlers

Start the Development Server

npm run dev

Step 2: Understanding Route Handlers

Route handlers in Next.js are defined within the pages or app directory using a specific naming convention. Files inside the pages/api directory are treated as API routes.

Step 3: Creating API Route Handlers

Basic API Route

Create a simple API route handler that returns a greeting message.

Create the API Directory

Inside the pages directory, create a new directory called api.

Create a New API Route File

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

This handler responds to GET requests to /api/hello with a JSON message.

Step 4: Dynamic API Routes

Dynamic API routes are useful for handling requests with variable parameters.

Create a Dynamic Route File

// pages/api/greet/[name].js
export default function handler(req, res) {
  const { name } = req.query;
  res.status(200).json({ message: `Hello, ${name}!` });
}

This handler responds to requests like /api/greet/John with a personalized greeting.

Step 5: Handling Different HTTP Methods

Next.js allows handling different HTTP methods (GET, POST, PUT, DELETE) within a single route handler.

Create a New API Route File

// pages/api/user.js
export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      res.status(200).json({ message: 'Fetching user data...' });
      break;
    case 'POST':
      res.status(200).json({ message: 'Creating user...' });
      break;
    case 'PUT':
      res.status(200).json({ message: 'Updating user...' });
      break;
    case 'DELETE':
      res.status(200).json({ message: 'Deleting user...' });
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

This handler responds to different HTTP methods with appropriate messages.

Step 6: Error Handling and Response Status

Handle errors and set appropriate HTTP status codes in your route handlers.

Create an API Route with Error Handling

// pages/api/error-demo.js
export default function handler(req, res) {
  try {
    throw new Error('Something went wrong!');
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
}

This handler demonstrates how to catch errors and respond with a 500 status code.

Step 7: Using Middleware

Middleware functions can be used to execute code before your route handler.

Create Middleware

// middleware/logger.js
export function logger(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  next();
}

Use Middleware in Route Handler

// pages/api/with-middleware.js
import { logger } from '../../middleware/logger';

export default function handler(req, res) {
  logger(req, res, () => {
    res.status(200).json({ message: 'Middleware applied!' });
  });
}

This handler logs the request method and URL before sending the response.

Step 8: Running the Application

Start the Next.js development server to test your API routes.

npm run dev

Navigate to http://localhost:3000/api/hello to see the basic route handler in action.

Conclusion

Next.js route handlers simplify the process of creating API endpoints and handling various HTTP methods. By following this guide, you should now have a good understanding of how to set up and manage route handlers in your Next.js applications.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Next.js Route Handlers – FAQs