How do I combine the Croct proxy with next-auth middleware in one middleware.ts?
Good morning. Our application already exports the next-auth middleware to protect the routes under /app and /settings. We are now integrating Croct, and the documentation shows exporting the proxy from the middleware file.
Next.js permits only a single middleware file, so both cannot simply be exported side by side. What is the correct composition, and does the order matter? I would prefer an explicit example over guessing.
1 answer
When you have your own middleware logic, do not export the Croct proxy directly. Instead, wrap your existing middleware with withCroct and export the result:
import {withCroct} from '@croct/plug-next/proxy';import {auth} from '@/auth';
export default withCroct(auth);
export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],};withCroct runs the Croct logic around your handler, so authentication checks still execute exactly as before, and the proxy manages its cookies on the same pass. You do not need to think about ordering beyond that; the wrapper handles it.
Keep the matcher excluding api, _next/static, and similar asset paths. The composed middleware only needs to run on page routes, and excluding assets avoids unnecessary executions on every image and chunk request.