TypeError: (0 , next_sanity__WEBPACK_IMPORTED_MODULE_0__.createImageUrlBuilder) is not a function

createImageUrlBuilder is no longer wrapped by next-sanity and you'll need to install the dependency yourself (https://github.com/sanity-io/next-sanity#createimageurlbuilder-is-removed)

$ npm install @sanity/image-url
// or
$ yarn add @sanity/image-url

Notice also that createImageUrlBuilder is now a default import.

-import { createImageUrlBuilder } from 'next-sanity'
+import createImageUrlBuilder from '@sanity/image-url'

You need to pass the sanity client in createImageUrlBuilder instead of config.

import createClient from '@sanity/client';
import createImageUrlBuilder from '@sanity/image-url';


const config = sanityClient({
   projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID, 
   
   ...
  });

export const  sanityClient = createClient(config);

export const urlFor = (source) => createImageUrlBuilder(client).image(source); // <-----------

First run this command

npm install --save @sanity/image-url

Import createImageUrlBuilder

import createImageUrlBuilder from "@sanity/image-url";

It worked for me this way.

First install @sanity/image-url

$ npm install @sanity/image-url 
//or 
$ yarn add @sanity/image-url

import imageUrlBuilder from "@sanity/image-url";

export const urlFor = (source) => imageUrlBuilder(config).image(source);

use imageUrlBuilder instead of createImageUrlBuilder . It worked for me , Thanks!!

When you want to import "urlFor" in your components, make sure you import like this...

import { urlFor } from "../lib/sanity";