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.