How to Secure Your API Routes with Next.js Middleware

Middleware refers to software that bridges various systems or applications, enabling them to interact and share data seamlessly. In web development, middleware functions act as intermediaries that process incoming requests and outgoing responses before they reach their final destination.

Middleware is crucial in web applications for various tasks such as authentication, logging, and modifying request and response headers. By handling these tasks, middleware ensures that the core application logic remains clean and focused on its primary responsibilities.

Middleware in Next.js

Next.js middleware allows you to run custom code during the request lifecycle, making it possible to handle tasks such as authentication, logging, and URL rewriting before a request reaches your route handlers or server components. This feature enhances the flexibility and security of your Next.js applications.

Key Features and Benefits:

• Processing Incoming Requests and Setting Request Headers: Middleware functions can inspect and modify incoming requests, including setting request headers based on specific conditions. For instance, you might set a custom header for all incoming requests to a particular route.

• Managing Response Headers: You can also modify response headers, which is essential for implementing security policies and managing content delivery effectively.

• Handling API Routes: Middleware is especially useful for protecting sensitive data by managing access to API routes. This ensures that only authenticated and authorized users can access certain endpoints.

• URL Rewriting and Redirection: Middleware can redirect users based on conditions such as user roles or specific URL patterns, enhancing navigation and user experience.

• Session Management: By inspecting cookies or session objects, middleware can verify user sessions and ensure that only authenticated users access protected routes.

Setting Up Middleware in Next.js

Creating Middleware Files

In Next.js, middleware is typically defined in a file named middleware.ts (or middleware.js for JavaScript) located at the root of your project. This file should be placed at the same level as the pages or src directory. The middleware.ts file contains the code that will run before the request reaches your route handlers.

Here’s an example of a basic middleware function that redirects users from /old-path to /new-path and sets custom request headers:

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  if (request.nextUrl.pathname === '/old-path') {
6    return NextResponse.redirect(new URL('/new-path', request.url));
7  }
8
9  const response = NextResponse.next();
10  response.headers.set('X-Custom-Header', 'value');
11
12  return response;
13}
14
15export const config = {
16  matcher: ['/old-path', '/another-path'],
17};

​

In this example:

• Redirecting: The middleware checks if the incoming request path is /old-path and redirects it to /new-path.

• Setting Request Headers: It sets a custom header for all processed requests.

• Configuration: The config object specifies which paths the middleware should apply to.

Defining Middleware Functions

Middleware functions in Next.js are defined using a standard structure that involves importing necessary types and functions from next/server and then exporting the middleware function. Here's a typical structure:

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  // Middleware logic here
6  return NextResponse.next();
7}
8
9export const config = {
10  matcher: ['/specific-path'],
11};

​

To keep your middleware.ts file clean and modular, you can import middleware logic from other files. This allows you to split complex logic into separate modules and import them as needed.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3import { customMiddlewareLogic } from './lib/customMiddleware';
4
5export function middleware(request: NextRequest) {
6  return customMiddlewareLogic(request);
7}
8
9export const config = {
10  matcher: ['/api/*'],
11};

​

In this example:

• Modular Middleware Logic: The customMiddlewareLogic function is imported from another file, allowing you to organize your middleware code more effectively.

• Configuration: The config object specifies that the middleware should apply to all API routes under /api/*.

Handling Requests and Responses

Managing Incoming Requests

When managing incoming requests in Next.js middleware, you can filter and process them based on various criteria such as request paths, query parameters, or request headers. This allows you to control the flow of requests and apply specific logic before they reach your route handlers.

Here’s an example of filtering incoming requests based on their path:

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  // Only process requests to /api/*
6  if (request.nextUrl.pathname.startsWith('/api')) {
7    // Custom logic for API requests
8    console.log('Processing API request:', request.nextUrl.pathname);
9  }
10  return NextResponse.next();
11}
12
13export const config = {
14  matcher: ['/api/:path*'],
15};

​

In this example:

• Filtering by Path: The middleware processes requests that start with /api and logs the request path.

• Using Config Object: The config object specifies that the middleware should apply to all API routes.

You can set custom request headers to include additional information or to modify the request before it reaches the server components.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  const response = NextResponse.next();
6  response.headers.set('X-Custom-Request-Header', 'custom-value');
7  return response;
8}
9
10export const config = {
11  matcher: ['/api/:path*'],
12};

​

Controlling Outgoing Responses

Modifying response headers is essential for tasks such as setting security policies, controlling cache behavior, or adding custom headers.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  const response = NextResponse.next();
6  response.headers.set('X-Custom-Response-Header', 'custom-value');
7  return response;
8}
9
10export const config = {
11  matcher: ['/api/:path*'],
12};

​

You can directly return responses or error messages from the middleware, which can be useful for early exits or error handling.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  if (!request.headers.get('Authorization')) {
6    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
7  }
8  return NextResponse.next();
9}
10
11export const config = {
12  matcher: ['/api/:path*'],
13};

​

In this example:

• Unauthorized Access: If the Authorization header is missing, the middleware returns a 401 Unauthorized response with an error message.

Session Management and Access Control

Protecting Sensitive Data with Middleware:

Middleware can be used to protect sensitive data by checking user authentication and authorization before granting access to certain routes.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  const token = request.cookies.get('session-token');
6
7  if (!token) {
8    return NextResponse.redirect(new URL('/login', request.url));
9  }
10
11  return NextResponse.next();
12}
13
14export const config = {
15  matcher: ['/dashboard/:path*'],
16};

​

In this example:

• Session Token Check: The middleware checks for a session token in the cookies. If the token is missing, it redirects the user to the login page.

Implementing User Sessions and Authentication:

Middleware can manage user sessions by inspecting cookies or session objects and ensuring users are authenticated before accessing protected routes.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  const user = request.cookies.get('user');
6
7  if (!user) {
8    return NextResponse.redirect(new URL('/login', request.url));
9  }
10
11  return NextResponse.next();
12}
13
14export const config = {
15  matcher: ['/protected/:path*'],
16};

​

In this example:

• User Authentication: The middleware checks for a user session cookie. If the user is not authenticated, it redirects them to the login page.

Advanced Middleware Usage

Middleware for Specific Paths

Using Matcher Config for Specific Routes:

In Next.js, you can configure middleware to run only on specific routes using the matcher property. This allows you to apply middleware selectively based on the path patterns.

Here’s an example of using matcher to target specific routes:

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  // Custom logic for specific routes
6  if (request.nextUrl.pathname === '/special-path') {
7    // Perform some action for /special-path
8    console.log('Special path accessed');
9  }
10  return NextResponse.next();
11}
12
13export const config = {
14  matcher: ['/special-path', '/another-path/:slug*'],
15};

​

In this example:

• Matcher Configuration: The matcher property is used to specify the routes /special-path and any paths matching /another-path/:slug*. This ensures the middleware only runs for these routes.

• Custom Logic for Routes: Inside the middleware function, you can implement custom logic for these specific paths.

Handling Multiple Paths and URL Patterns:

You can handle multiple paths and URL patterns using wildcards and parameterized paths in the matcher config. This flexibility allows you to apply middleware to a range of URLs efficiently.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  if (request.nextUrl.pathname.startsWith('/api')) {
6    // Middleware logic for API routes
7    console.log('API route accessed');
8  }
9  return NextResponse.next();
10}
11
12export const config = {
13  matcher: ['/api/:path*', '/dashboard/:path*'],
14};

​

In this example:

• **Wildcard Matching: The matcher uses :path* to match any path segments following /api and /dashboard. This allows the middleware to handle multiple related paths.

Integrating with External APIs

Making External API Calls within Middleware:

Middleware in Next.js can be used to make external API calls, enabling you to fetch data or verify information before proceeding with the request.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export async function middleware(request: NextRequest) {
5  const response = await fetch('https://api.example.com/verify', {
6    headers: {
7      'Authorization': `Bearer ${request.headers.get('Authorization')}`
8    }
9  });
10  const data = await response.json();
11
12  if (data.isValid) {
13    return NextResponse.next();
14  } else {
15    return NextResponse.json({ error: 'Invalid request' }, { status: 401 });
16  }
17}
18
19export const config = {
20  matcher: ['/api/protected/:path*'],
21};

​

In this example:

• External API Call: The middleware makes a call to an external API to verify some information (e.g., an authorization token).

• Conditional Logic Based on API Response: Depending on the API response, the middleware either allows the request to proceed or returns an error response.

Handling Responses from External APIs:

Handling responses from external APIs within middleware involves parsing the response and using it to control the request flow.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export async function middleware(request: NextRequest) {
5  const apiUrl = `https://api.example.com/data?param=${request.nextUrl.searchParams.get('param')}`;
6  const response = await fetch(apiUrl);
7
8  if (response.ok) {
9    const data = await response.json();
10    // Process the API response data
11    console.log('API response data:', data);
12  } else {
13    return NextResponse.json({ error: 'Failed to fetch data' }, { status: 500 });
14  }
15
16  return NextResponse.next();
17}
18
19export const config = {
20  matcher: ['/data-fetch/:path*'],
21};

​

In this example:

• Fetching Data: The middleware fetches data from an external API based on query parameters.

• Handling Errors: If the API call fails, the middleware returns an error response.

Practical Applications of Middleware

Protecting API Routes

Securing API routes with middleware is crucial for protecting sensitive data and ensuring that only authorized users can access specific endpoints. Middleware can inspect incoming requests to verify user authentication and enforce access control policies.

Here’s an example of a middleware function that protects API routes by checking for an authentication token:

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  const token = request.headers.get('Authorization');
6
7  if (!token || token !== 'your-secure-token') {
8    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
9  }
10
11  return NextResponse.next();
12}
13
14export const config = {
15  matcher: ['/api/protected/:path*'],
16};

​

In this example:

• Authorization Token Check: The middleware checks the Authorization header for a valid token.

• Access Control: If the token is invalid or missing, the middleware returns a 401 Unauthorized response.

Optimizing Static and Dynamic Content

Image Optimization and Handling Static Files:

Middleware can optimize static and dynamic content, such as images, by ensuring they are served efficiently. This includes setting appropriate cache headers and handling requests for static files.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  const response = NextResponse.next();
6
7  if (request.nextUrl.pathname.endsWith('.png') || request.nextUrl.pathname.endsWith('.jpg')) {
8    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
9  }
10
11  return response;
12}
13
14export const config = {
15  matcher: ['/static/:path*'],
16};

​

In this example:

• Cache Control Headers: The middleware sets cache headers for image files to improve load times and reduce server load.

Redirecting Users and URL Rewrites:

Middleware can be used to redirect users and rewrite URLs based on specific conditions, enhancing navigation and user experience.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  if (request.nextUrl.pathname === '/old-page') {
6    return NextResponse.redirect(new URL('/new-page', request.url));
7  }
8
9  return NextResponse.next();
10}
11
12export const config = {
13  matcher: ['/old-page'],
14};

​

In this example:

• URL Redirection: Users accessing /old-page are redirected to /new-page.

Error Handling and Custom Logic

Middleware allows you to implement custom logic to handle specific scenarios, such as logging or modifying requests based on custom rules.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  if (request.nextUrl.pathname === '/special') {
6    // Custom logic for special route
7    console.log('Special route accessed');
8  }
9
10  return NextResponse.next();
11}
12
13export const config = {
14  matcher: ['/special'],
15};

​

In this example:

• Custom Logic: The middleware logs a message when the /special route is accessed.

Proper error handling in middleware ensures that users receive meaningful feedback when something goes wrong.

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5  try {
6    // Custom middleware logic
7    if (!request.headers.get('Custom-Header')) {
8      throw new Error('Custom header missing');
9    }
10
11    return NextResponse.next();
12  } catch (error) {
13    return NextResponse.json({ error: error.message }, { status: 400 });
14  }
15}
16
17export const config = {
18  matcher: ['/api/:path*'],
19};

​

In this example:

• Error Handling: The middleware catches errors and returns a 400 Bad Request response with an error message.

Conclusion

Incorporating middleware into your Next.js applications offers a powerful mechanism to enhance performance, security, and functionality. By leveraging middleware, you can manage incoming requests, control outgoing responses, and implement robust access control measures to protect sensitive data.

Key Takeaways:

1. Enhanced Request Handling: Middleware allows you to filter and process incoming requests, set custom request headers, and control the flow of requests based on specific conditions. This can be particularly useful for tasks like logging, authentication, and modifying request data before it reaches your route handlers.

2. Improved Response Management: You can modify response headers, return custom responses, and handle errors effectively within middleware. This ensures that your application can respond appropriately to different scenarios, enhancing user experience and maintaining security standards.

3. Access Control and Session Management: Middleware provides a seamless way to implement access control by checking for authentication tokens and managing user sessions. This is critical for protecting API routes and ensuring that only authorized users can access sensitive parts of your application.

4. Optimizing Static and Dynamic Content: Middleware can optimize the delivery of static files, such as images, by setting appropriate cache headers. It also facilitates URL rewrites and user redirections, contributing to better performance and user navigation.

5. Integrating External APIs: Middleware can interact with external APIs to fetch or verify data, adding an extra layer of validation and functionality to your application. This is essential for integrating third-party services and ensuring data integrity.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.