Clerk
Blog

Back

Engineering


May 04, 2023

Back

Engineering


May 04, 2023

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

Colin Sidoti

Colin Sidoti


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.

Clerk's logo

Start now,
no strings attached

Start completely free for up to 10,000 monthly active users and up to 100 monthly active orgs. No credit card required.

Start Building

Pricing built for
businesses of all sizes.

Learn more about our transparent per-user costs to estimate how much your company could save by implementing Clerk.

View pricing
Clerk's logo

Newsletter!

The latest news and updates from Clerk, sent to your inbox.

Clerk logo

Clerk - Complete User Management

TwitterLinkedInGitHubDiscordFacebook

© 2023 Clerk Inc.


product
Components

© 2023 Clerk Inc.