Next Js - Providers/getProviders() - FetchError - next build

Question

I am trying to build my application next js. I use providers with next-auth. It works fine when I use npm run dev. But when I use npm run build I get this:

However, I use the variable NEXTAUTH_URL = localhost: 3000 in a .env.local

The error appears when I have "getProviders ()" in a file like this:

import {getProviders, useSession} from 'next-auth/client'
import Layout from "../components/layout";


export default function Page({providers}) {
    const [session, loading] = useSession()

    return (
        <Layout providers={providers}>Page index</Layout>
    )
}

export async function getStaticProps() {
    const providers = await getProviders()

    return {
        props: {providers}
    }
}

Answer 1

I think same probrem this. ECONNREFUSED during 'next build'. Works fine with 'next dev'

It is working.

import {getProviders, useSession} from 'next-auth/client'
import Layout from "../components/layout";


export default function Page() {
    const [session, loading] = useSession()
    const [providers, setProviders] = useState({});

    useEffect(() => {
      (async () => {
        const res = await getProviders();
        setProviders(res);
      })();
    }, []);


    return (
        <Layout providers={providers}>Page index</Layout>
    )
}