Modify HTML before sending to browser

[anjan-kp]

Hi,
I am trying to modify html before sending to browser.
I am trying to replace all ® [registered mark] with ^® ..
That means ^® should be available when I check view-source of the page.
Can I achieve it using middleware OR custom server?
I am using nextJS 15+ Typescript with App router.
Thanks in advance!

[icyJoseph]

Just curious, why wouldn't you do this in your source code? That being said, middleware in Next.js is not designed for that. And also React tends to raise hydration errors. See this issue, #78956

[anjan-kp]

In a component based architecture I need to add this check at many places.
I know middleware is not the solution if we need to intercept nextJS server response.
I am looking for an endware approach to modify the final html generated by nextJS server before sending it to client's browser.
Looks like custom server approach is also having limited options from nextJS 13 onwards. I am using nextJS 15..

[icyJoseph]

Is this content from a CMS? Couldn't you replace as you query the CMS?

If its "hard coded" into the JSX, you could do a search and replace.

And yes, both of my suggestions, could be broken during a PR, refactor, etc... And it would seem like, just straight up intercepting the down-streaming HTML is a good idea, but that also can have its own downsides.

I remember that Netlify supported something like this, by exposing a helper, middlewareRequest:

• https://www.netlify.com/blog/rewrite-html-transform-page-props-in-nextjs/
• https://docs.netlify.com/frameworks/next-js/runtime-v4/middleware/#middlewareresponse-object

Which you could use to collect the payload, and write to it. Of course, this is not the standard middleware behavior, and I've never used it, so I can't really help much more there.

[anjan-kp]

I am looking for a response interceptor to modify the final html generated by nextJS server before sending it to client's browser.

[anjan-kp]

@tsolutionsx Is the code mentioned above for next15 working? I am getting typescript error in await next();
Error [TypeError]: next is not a function

[tsolutionsx]

@tsolutionsx Is the code mentioned above for next15 working? I am getting typescript error in await next(); Error [TypeError]: next is not a function

oh... sorry.. can you try this ?

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
// Example: block access to a specific path
if (request.nextUrl.pathname === '/secret') {
return NextResponse.redirect(new URL('/login', request.url))
}

return NextResponse.next()
}

[anjan-kp]

Where to add replace(/®/g, '®'); in this code? Does middleware have any role to modify response OR it's being used to check the request and redirect?

[icyJoseph]

@anjan-kp I am afraid these are LLM responses, so called hallucinations...

[anjan-kp]

@icyJoseph Oh .. we should never rely on LLM response for Latest versions as models are not trained yet.. Only humans can solve latest version issues after doing some RnD.
@tsolutionsx Please do not mislead this discussion with LLM response if you are doing so. Do write if it's practically possible after implementing. I am seriously looking for a practical solution after trying many things from my end.
Looks like custom server also has a limitation in nextJS 15+ ..