Reading time: 3 min read
Start typing to search...
One thing to keep in mind is when you might have started your Next.js project, it was < 12.3. While you can make it work, this approach will not work properly as prior to 12.3, middleware was in beta.
If you're using Docker, you likely have a folder structure that resembled ../rendering/companyABC/src. You need to create a file called middleware.ts in this folder. As of 12.3, partial middleware - commonly delineated by a file called _middleware.ts and found under pages/ folder, is no longer supported.
Let's create a simple middleware.ts file.
import { NextRequest, NextResponse } from 'next/server';
export function middleware(request: NextRequest) {
return NextResponse.next();
}
It's important to note that the above setup, while simple, will actually break your Experience Editor. One way to get around this is to have two rendering hosts, one with middleware and one without. Not everyone has this ability, so instead, Next.js has an alternative.
Thankfully there is a way to run the middleware on specific routes, e.g. /about or say secret. What if you need to secure it on everything but a specific route? This will ensure POST calls from within Experience Editor don't run the middleware and break.
export const config = {
matcher: ['/((?!api|sitecore|-|_next|static|favicon.ico).*)', '/'],
};
We prevent it from running on our API calls, the /sitecore folder and the /-/media folder.
You may have requirements for additional routes to remain unblocked, but we found these were the minimum to have Experience Editor remain operational while having a secure front end.
We've added an example below where you'd check to see if a person is authorized. This could be basic authentication or IP restriction. We then also check for the __prerender_bypass cookie which is only present when in Experience Editor. Otherwise, what ends up happening is some of the calls that shouldn't be re-written break any chance of authoring using Experience Editor.
import { NextRequest, NextResponse } from 'next/server';
function isAuthorized() {
...
}
export function middleware(request: NextRequest) {
const hasPrerenderBypass =
request.cookies.get('__prerender_bypass') != null &&
request.cookies.get('__prerender_bypass') != '';
if (!isAuthorized() && !hasPrerenderBypass){
const loginUrl = new URL('https://companyabc.com/403', request.url);
errorPage.searchParams.set('from', request.nextUrl.pathname);
}
return NextResponse.next();
}
export const config = {
matcher: ['/((?!api|sitecore|-|_next|static|favicon.ico).*)', '/'],
};
And that's it. Hope this helps you out.