Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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(opens in a new tab) 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;

Last updated on December 13, 2023

What did you think of this content?

Clerk © 2024