Middleware for API routes in NextJS - Mini Project: Build & Apply

Middleware for API routes in Next.js

📖 Scenario: You are building a Next.js API that needs to check if a user is authenticated before allowing access to certain routes. Middleware will help you run this check automatically for every request to these routes.

🎯 Goal: Create a middleware function for Next.js API routes that checks for a specific header x-api-key. If the header is missing or incorrect, the middleware should respond with a 401 status. Otherwise, it should allow the request to continue to the API handler.

📋 What You'll Learn

Create a middleware function in Next.js for API routes

Check for the presence of the x-api-key header

Compare the header value to a predefined secret key

Return a 401 Unauthorized response if the key is missing or wrong

Allow the request to continue if the key is correct

💡 Why This Matters

🌍 Real World

Middleware is commonly used in web apps to protect API routes by checking authentication or other conditions before running the main logic.

💼 Career

Understanding middleware in Next.js is important for building secure and maintainable backend APIs in modern React applications.

1

Create the API route handler

Create a file pages/api/hello.js with a default export function called handler that takes req and res parameters and responds with JSON { message: 'Hello, world!' }.

NextJS

// Your code here

Need a hint?

This is the basic API route handler that sends a JSON response.

2

Define the secret API key

Above the handler function, create a constant called API_KEY and set it to the string 'secret123'.

NextJS

const API_KEY = ''

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}
// Your code here

Need a hint?

This key will be used to check incoming requests.

3

Create the middleware function

Create an async function called middleware that takes req and res. Inside it, check if req.headers['x-api-key'] is not equal to API_KEY. If so, respond with status 401 and JSON { error: 'Unauthorized' } and return. Otherwise, call await handler(req, res) to continue.

NextJS

const API_KEY = 'secret123';

async function middleware(req, res) {
  // Your code here
}

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

Need a hint?

This middleware checks the API key and blocks unauthorized requests.

4

Export the middleware as default

Change the default export to be the middleware function instead of handler.

NextJS

const API_KEY = 'secret123';

async function middleware(req, res) {
  if (req.headers['x-api-key'] !== API_KEY) {
    res.status(401).json({ error: 'Unauthorized' });
    return;
  }
  await handler(req, res);
}

// Your code here

Need a hint?

This makes the middleware the main function Next.js calls for this API route.