I'm trying to return HTTP Status Code 410 (gone) alongside a custom simple HTML:
<h1>Error 410</h1>
<h2>Permanently deleted or Gone</h2>
<p>This page is not found and is gone from this server forever</p>
Is it possible? Because I can't find a method on NextResponse object.
How can I return HTML from middleware?
I'm trying to return HTTP Status Code 410 (gone) alongside a custom simple HTML:
<h1>Error 410</h1>
<h2>Permanently deleted or Gone</h2>
<p>This page is not found and is gone from this server forever</p>
Is it possible? Because I can't find a method on NextResponse object.
How can I return HTML from middleware?
Share Improve this question edited Dec 4, 2022 at 22:40 Yilmaz 49.9k18 gold badges217 silver badges270 bronze badges asked Nov 25, 2022 at 8:42 Ali EXEAli EXE 1,3694 gold badges16 silver badges37 bronze badges4 Answers
Reset to default 5This is not supported anymore.
Middleware can no longer produce a response body as of v12.2+.
https://nextjs/docs/messages/returning-response-body-in-middleware
While it's true that returning a response body from middleware has been disabled from version v12.2, Next.js v13 reintroduced the ability to produce a response as an experimental feature through the allowMiddlewareResponseBody flag in next.config.js.
// next.config.js
module.exports = {
experimental: {
allowMiddlewareResponseBody: true
}
}
After enabling this experimental flag, you can return a response from your middleware as follows.
import { NextResponse } from 'next/server'
export function middleware(request) {
return new NextResponse(
`
<h1>Error 410</h1>
<h2>Permanently deleted or Gone</h2>
<p>This page is not found and is gone from this server forever</p>
`,
{ status: 410, headers: { 'content-type': 'text/html' } }
)
}
As of Next 13.1, you can return a response body in middleware, without setting any flags:
The experimental.allowMiddlewareResponseBody configuration option inside next.config.js is no longer required.
Producing a response is still poorly documented. You can return HTML with the NextReponse constructor, even though it's not documented:
import { NextResponse, NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const response = new NextResponse(`<html>...</html>`);
// There is no content-type by default!
response.headers.set('Content-Type', 'text/html; charset=utf-8');
// set response headers, cookies, etc, if desired
return response;
}
The producing a response documentation also shows a convenience .json() method. However note the docs reference an undefined Response variable without explanation. I have not tested this code
import { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
return Response.json(
{ success: false, message: 'authentication failed' },
{ status: 401 }
)
}
Next.js middleware is still fairy immature as you can see from the documentation, and Next.js also has no native way to chain middleware responses(!) so if you have your own middleware chaining, you'll need to manually detect that some middleware is returning HTML.
this is the type. there is no method to send html
type NextApiResponse<T = any> = ServerResponse<IningMessage> & {
send: Send<T>;
json: Send<T>;
status: (statusCode: number) => NextApiResponse<T>;
redirect(url: string): NextApiResponse<T>;
redirect(status: number, url: string): NextApiResponse<T>;
setPreviewData: (data: object | string, options?: {
maxAge?: number;
path?: string;
}) => NextApiResponse<T>;
clearPreviewData: (options?: {
path?: string;
}) => NextApiResponse<T>;
unstable_revalidate: () => void;
revalidate: (urlPath: string, opts?: {
unstable_onlyGenerated?: boolean;
}) => Promise<void>;
}
express has sendFile
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
NextApiResponse, sendandjson`
res.json(body) - Sends a JSON response. body must be a serializable object res.send(body) - Sends the HTTP response. body can be a string, an object or a Buffer
you can redirect the user to a URL where you display your html