Stable Support for the Next.js App Router, plus a Middleware Update!

Category: Engineering
Published: May 4, 2023

App Router support is out of beta, plus we've launched a major middleware update.

@clerk/nextjs@4.17.0 is released

Clerk has updated our SDK to support Next.js version 13.4.0. We've added stable support for the App Router, which is the default for new applications. We've also improved the ergonomics of our middleware helper for more composability and to mitigate common pitfalls.

See the updates in our new Next.js documentation, or read on for more details.

Stable App Router Support

Next.js version 13.4.0 launched today and the App Router is now stable. In turn, Clerk's support for the App Router is also now stable in @clerk/nextjs version 4.17.0.

If you previously adopted @clerk/nextjs/app-beta, there have been very few changes:

The auth() and currentUser() helpers have been moved to a permanent home in @clerk/nextjs
React imports from @clerk/nextjs/app-beta/client are no longer necessary, and you can import from @clerk/nextjs intstead. The package now automatically detects if components are being used from a client component or a server component, and loads the proper form.

That's all! Our documentation has been updated to reflect the changes.

Middleware Update

Along with today's launch, we've also released a new middleware helper to make things a little easier and more composable.

In its simplest form, these few lines are all you need to integrate Clerk:

import { authMiddleware } from '@clerk/nextjs'

export default authMiddleware()

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)'],
}

This sets your application in a protected mode – if users are signed out the will be automatically redirected to a sign in. Unprotected pages need to be explicitly listed in the publicRoutes argument:

export default authMiddleware({
  // Make the homepage accessible while signed out
  publicRoutes: ['/'],
})

This new helper also has beforeAuth and afterAuth arguments to enable more composability with libraries like next-intl. For more details, checkout the updated middleware documentation.

Ready to get started?