wwwwwwwwwwwwwwwwwww

Middlewares

Developing

Place a _middleware.ts file anywhere inside your app directory to create a middleware.

Here's an example:

_layout.tsx

Wraps all files in this directory and below

_middleware.ts

Middleware for all "/" routes

index.tsx

Matches "/"

blog

_middleware.ts

Middleware for all "/blog" routes

index.tsx

Matches "/blog"

Middlewares can be nested and will run from top to bottom on matching routes.

app/_middleware.ts

import { createMiddleware } from 'one'
export default createMiddleware(async ({ request, next }) => {
if (request.url.includes(`test-middleware`)) {
return Response.json({ middleware: 'works' })
}
const response = await next()
if (!response && request.url.endsWith('/missing')) {
return Response.json({ notFound: true })
}
return response
})

The createMiddleware function is a simple helper for types. Middlewares receive one argument, an object with three properties:

  • request is a Request for the current request.
  • next is a function that returns a promise.
  • context is an Object which you can mutate to pass data between middlewares.

The next function will run the rest of the middlewares and then the current route, and will return the final Response. This lets you run some logic after the full route has been processed, and before it returns the final response.

Edit this page on GitHub.