How to display an error on page from the middleware?

[uneven depot]

Hi @tired crystal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can handle this by returning a NextResponse instance directly from your middleware. This feature is available since Next.js v13.1.0. If the query parameters are not valid, you can return a NextResponse with a JSON object indicating an error message. Here's an example:

import { NextRequest, NextResponse } from 'next/server'
import { isAuthenticated } from '@lib/auth'
 
// Limit the middleware to paths starting with `/api/`
export const config = {
 matcher: '/api/:function*',
}
 
export function middleware(request: NextRequest) {
 // Call our authentication function to check the request
 if (!isAuthenticated(request)) {
 // Respond with JSON indicating an error message
 return new NextResponse(
 JSON.stringify({ success: false, message: 'authentication failed' }),
 { status: 401, headers: { 'content-type': 'application/json' } }
 )
 }
}

In this example, isAuthenticated is a function that checks the validity of the request (including query parameters). If the request is not valid, it returns a NextResponse with a JSON object that includes a success: false property and a message property with an error message. The status code is set to 401, and the content type is set to 'application/json'.

You can then handle this response on the client side and display an error message based on the message property of the JSON object.

Please note that this is a general approach and you might need to adjust the code to fit your specific needs.

For more information, you can refer to the Next.js documentation on Middleware (https://nextjs.org/docs/pages/building-your-application/routing/middleware).

Please note that this approach does not involve passing information to the page via query parameters, as per your requirement.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tired crystal kapa.ai is still learning and improving, please let us know how it did by reacting below