Ошибка при выводе данных с mongoDB

Всем привет!

Изучаю сама Next.JS и столкнулась с проблемой при работе с базой данных.

Хочу сделать сайт на котором будут выводиться фильмы из бд которую я создала в MongoDB. На первой странице все выводиться как надо

Код первой страницы:

import Link from "next/link"

export default function Users({ users }) {

    return (
        <div>
            {users.map((user) => (
                <Link href={`users/${user._id}`} key={user.id}>
                    <a >
                        <div >
                            <div>{user.title}</div>
                        </div>
                    </a>
                </Link>
            ))}
        </div>
    )
}

export async function getStaticProps(context) {
    const response = await fetch(`http://localhost:3000/api/movies`)
    const users = await response.json()

    console.log(users)
    return {
        props: { users: users }
    }
}

То что я хочу сделать это при нажатие на линк, чтоб можно было перейти на другую страницу и получить дополнительные данные о фильме. У меня получаеться передать ID обьекта, но у меня два варианта проблемы. В первом варианте выходит ошибка, во втором нет ошибки но данные не выводяться на страницу.

Варинат Первый. При котором выходит ошибка:

FetchError: invalid json response body at http://localhost:3000/api/movies/60d5b904898633feb93d293e reason: Unexpected token < in JSON at position 0

Код страницы:

import { useRouter } from "next/router";

export default function ({ movie }) {
    const { query } = useRouter();

    return (
        <div>
            <div>Users {query.id}</div>
            <div>Name {movie.name}</div>
        </div>
    )
}

export async function getServerSideProps({ params }) {
    console.log({ params })
    const response = await fetch(`http://localhost:3000/api/movies/${params.id}`)

const movie = await response.json()
    console.log(movie)
    return {
        props: { movie: movie }
    }
}

Вариант второй. В нем ошибок нет, но не выводяться данные вообще:

import { useRouter } from "next/router";

export default function ({ movie }) {
    const { query } = useRouter();

    return (
        <div>
            <div>Users {query.id}</div>
            <div>Name {movie.name}</div>
        </div>
    )
}

export async function getServerSideProps({ params }) {
    console.log({ params })

    const response = await fetch(`http://localhost:3000/api/movies/${params.id}`)
    const movie = JSON.parse(JSON.stringify(response));

    console.log(movie)
    return {
        props: { movie: movie }
    }
}

Буду рада помощи, уже пару дней пытаюсь найти решения вопроса и пока что не совсем удачно. Есть вариант сделать проект с API, но хотелось бы все таки знать как работать с MongoDB