How to Use Middleware in Fresh Framework for Deno

In Fresh for Deno, use MiddlewareHandler functions to intercept requests and responses. Register middleware by adding it to the middleware export in your route or island file, allowing you to run code before or after request handling.

Syntax

Middleware in Fresh is a function that takes a RequestEvent and a next function. It can modify the request or response and must call next() to continue the chain.

The basic syntax is:

export const middleware: MiddlewareHandler = async (req, next) => {
  // code before next
  const resp = await next();
  // code after next
  return resp;
};

Here, req is the request event, and next() calls the next middleware or the route handler.

typescript

export const middleware: MiddlewareHandler = async (req, next) => {
  // code before next
  const resp = await next();
  // code after next
  return resp;
};

Example

This example shows a middleware that logs the request method and URL before passing control to the route handler, then adds a custom header to the response.

typescript

import { MiddlewareHandler } from "https://deno.land/x/fresh@1.3.0/server.ts";

export const middleware: MiddlewareHandler = async (req, next) => {
  console.log(`Request: ${req.request.method} ${req.request.url}`);
  const resp = await next();
  resp.headers.set("X-Custom-Middleware", "Active");
  return resp;
};

export default function Page() {
  return <h1>Hello from Fresh with Middleware!</h1>;
}

Output

When visiting the page, the console logs the request method and URL, and the response includes the header 'X-Custom-Middleware: Active'. The page displays: Hello from Fresh with Middleware!

Common Pitfalls

• Not calling next() inside middleware blocks the request chain, causing the request to hang.
• Modifying the response before calling next() will be overwritten by later handlers.
• Forgetting to return the response from middleware causes errors.
• Middleware must be exported with the exact name middleware to be recognized.

typescript

export const middleware: MiddlewareHandler = async (req, next) => {
  // Wrong: missing next call
  // return new Response("Blocked");

  // Correct:
  const resp = await next();
  return resp;
};

Quick Reference

Middleware in Fresh:

• Is an async function with (req, next) signature.
• Must call await next() to continue.
• Can modify request or response.
• Is exported as middleware from route or island files.
• Runs in order if multiple middleware are used.

Key Takeaways

Middleware in Fresh intercepts requests and responses using async functions with (req, next) parameters.

Always call await next() inside middleware to continue processing the request.

Export middleware as 'middleware' from your route or island files for Fresh to recognize it.

Middleware can modify requests before and responses after calling next().

Avoid blocking the chain by forgetting to call next() or not returning the response.