Use Clerk with Next.js 12 and older

Clerk's prebuilt components are exported from the @clerk/nextjs package and leverage APIs from Next.js itself. These APIs often change between major Next.js releases. While Clerk tries to offer the highest compatibility for any supported Next.js version, for Next.js 12 and older, you need to modify your setup.


Clerk highly recommends updating your Next.js version as older versions won't receive any updates in the future. Read their upgrade guides to learn more.

Install @clerk/nextjs v4

Install ^4.0.0 of @clerk/nextjs. Newer major versions of @clerk/nextjs only support Next.js 13+.

npm install @clerk/nextjs@^4.0.0
yarn add @clerk/nextjs@^4.0.0
pnpm add @clerk/nextjs@^4.0.0

Change your next.config.js

As mentioned previously, the @clerk/nextjs components contain code for multiple Next.js versions, but depending on your version, only certain components will be used. Update your next.config.js to instruct webpack to ignore modules on code paths that won't be used.

const webpack = require("webpack");

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
      new webpack.IgnorePlugin({
        resourceRegExp: /^next\/(navigation|headers|compat\/router)$/,
    return config;

module.exports = nextConfig;


What did you think of this content?