Middleware not working with latest version of Next Js

[cmaycumber]

• [x] Review the documentation: https://docs.clerk.dev/
• [X] Search for existing issues: https://github.com/clerkinc/javascript/issues
• [x] Go through package changelog files.
• [ ] Provide the Frontend API key from your application dashboard.

Package + Version

• [ ] @clerk/clerk-js
• [ ] @clerk/clerk-react
• [x] @clerk/nextjs
• [ ] @clerk/remix
• [ ] @clerk/clerk-expo
• [ ] @clerk/backend-core
• [ ] @clerk/clerk-sdk-node
• [ ] @clerk/edge
• [ ] other:

Version:

3.6.8

Browser/OS

If applicable e.g. Chrome latest

Description

Currently when running the latest version of Next Js 12.2.0 the following code:

export default withEdgeMiddlewareAuth((req) => {
  console.log('Middleware')
})

Throws the error: [Error: A middleware can not alter response's body. Learn more: https://nextjs.org/docs/messages/returning-response-body-in-middleware]

The documentation could also be updated in the clerk docs to support the changes to Next Js middleware in general, which now requires middleware to be at the root of the application.

[SokratisVidros]

Thanks for reporting this. We are aware of the incompatibility and we are working on a new version. Meanwhile, you can pin your Next JS to a version < 12.2.0.

[estephinson]

@SokratisVidros can this issue be updated once it's fixed - just so we can be notified 😄

Thanks for all your efforts!

[SokratisVidros]

Sure thing. We have already started a draft PR but it needs more work as the changes on Next.js side were big.

[DavidChouinard]

@SokratisVidros I see that this PR got merged, does that mean Clerk is now compatible with Next 12.2?

[SokratisVidros]

Yes. We will continue working on Next 12.2 so as to move authentication completely in the middleware.ts but our latest release should unblock you.

[DavidChouinard]

Fantastic thank you

[estephinson]

Forgive me if I'm wrong, but in responses.ts, you're returning a JSON body with NextResponse

https://github.com/clerkinc/javascript/blob/991b102cf0514d3598185b1ac2ceb9bf21efbde1/packages/edge/src/vercel-edge/utils/responses.ts

import { AuthErrorReason } from '@clerk/backend-core';
import { NextResponse } from 'next/server';

// TODO: Generically add error reason only when present, without explicit set on cases
export function signedOutResponse(errorReason?: AuthErrorReason) {
  return new NextResponse(JSON.stringify({ error: 'Unauthenticated' }), {
    status: 401,
    headers: { 'Content-Type': 'application/json', 'Auth-Result': errorReason || '' },
  });
}

export function interstitialResponse(interstitial: string, errorReason?: AuthErrorReason) {
  return new NextResponse(interstitial, {
    headers: { 'Content-Type': 'text/html', 'Auth-Result': errorReason || '' },
    status: 401,
  });
}

Does that still not violate the error presented - https://nextjs.org/docs/messages/returning-response-body-in-middleware

[igneel64]

Hey @estephinson Thanks for the comment. For API routes (which we currently support on Next.js 12.2+), when using the experimental-edge runtime, returning a NextResponse is valid. If you face any issues let us know :)

[estephinson]

Ah okay interesting, cheers.

Was just getting some middleware errors, digging into the code the Interstitial auth state seemingly returned these responses and logged the next error code.

I did have some configuration issues and with those fixed, I haven't noticed anything else.

Appreciate the hard work, thanks!

[nikosdouvlis]

Hello everyone, the latest @clerk/nextjs (version 4.5.0) release supports the new NextJS middleware. For more details, please see the release notes or consult the Clerk with NextJS documentation.

I'm closing this issue for now, but feel free to reopen it if you need more assistance.