I have nailed the issue down to the middleware as it was breaking everything. We host the site on Plesk so we understand that there maybe something that the server is doing differently.
However when I go to https://exampl.com/appstore
I should get a nice looking page but now I get
I have tried everything to fix it, so I thought I would post here.
// middleware.ts
import { NextRequest, NextResponse, userAgent } from 'next/server'
export function middleware(request: NextRequest) {
const { os } = userAgent(request)
if(request.nextUrl.pathname === "/appstore")
{
if(os.name === "iOS"){
return NextResponse.redirect('https://apps.apple.com/au/app/drn1/id1491656217')
}
if(os.name === "Android"){
return NextResponse.redirect('https://play.google.com/store/apps/details?id=com.drn1.drn_player')
}
}
};
export const config = {
matcher: [
'/appstore'
],
}
I can confirm however that on Vercel servers it works fine – with no issues (https://drn-1-next-js.vercel.app/appstore).
This is what makes me think it’s a plesk issue or the way NextJS dev teams have coded middleware.
2
Answers
I see a couple of ways this could be an issue.
===
can have surprising effects. It is not a panacea. I have seen cases where APIs return wrapped values and then===
fails. Before using===
consider whether there is any implicit conversion that will cause an issue. As far as I can tell there is nothing reasonable that will implicitly causeif(os.name == "Android")
to produce a false match.consider:
If this is where you host: Plesk. Then Plesk doesn’t currently support Next.js. They answered this about a month ago on Plesk Support.
Q&A from direct form website (just in case they update the Q&A):