CORS error when using Replicate package in NextJS app

[qunash]

Description

I'm trying to use the replicate package in my NextJS app, but I am getting a CORS error when making API requests.

Code example

import Replicate from "replicate"

const replicate = new Replicate({
  auth: process.env.REPLICATE_API_TOKEN,
})

const predict = async (text: string) => {
  const response = await replicate.run(
    "model_id",
    {
      input: {
        text: text,
      },
    }
  )

  return response
}

predict("example_text")
  .then((result) => console.log(result))
  .catch((error) => console.error(error))

Error from console:

axios.cjs?d475:2337 Refused to set unsafe header "User-Agent"
setRequestHeader @ axios.cjs?d475:2337

Access to XMLHttpRequest at 'https://api.replicate.com/v1/predictions' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error occurs on both localhost and production environments.
Please advise on how to resolve this issue.

[qunash]

Ok, I fixed it by moving my business logic to /pages/api/, following the example at getting-started-nextjs.