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+.

terminal
npm install @clerk/nextjs@^4.0.0

terminal
yarn add @clerk/nextjs@^4.0.0

terminal
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.

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

Install @clerk/nextjs v4

Change your next.config.js

Install `@clerk/nextjs` v4

Change your `next.config.js`