# Use Clerk with Next.js 12 and older

Clerk's [prebuilt components](https://clerk.com/docs/reference/components/overview.md) 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](https://nextjs.org/docs/pages/building-your-application/upgrading) to learn more.

1. ## Install `@clerk/nextjs` v4

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

   ```npm
   npm install @clerk/nextjs@^4.0.0
   ```
2. ## 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.

   filename: next.config.js

   ```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
   ```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)