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.
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.0yarn add @clerk/nextjs@^4.0.0pnpm add @clerk/nextjs@^4.0.0Change 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) {
config.plugins.push(
new webpack.IgnorePlugin({
resourceRegExp: /^next\/(navigation|headers|compat\/router)$/,
}),
);
return config;
},
};
module.exports = nextConfig;