I try to deploy my next.js website on cloudflare.
When I run npm run dev the website is working perfectly on localhost.

When I try to deploy it on cloudflare and it runs npm run build I have the following error:

19:15:41.073    ▲  Error occurred prerendering page "/betatesting". Read more: https://nextjs.org/docs/messages/prerender-error
19:15:41.073    ▲  
19:15:41.074    ▲  ReferenceError: window is not defined

I have read so many articles on this topic and I spent the whole afternoon trying to see where the problem is, so can someone explain me what I am doing wrong.

Here is my /betatesting/page.tsx file:

'use client'
import React, { useState, FormEvent, useEffect } from 'react'
import { useForm } from 'react-hook-form';
import { sendEmail } from '@/utils/send-email';
import Link from 'next/link'
import 'js-loading-overlay'

export type FormData = {
  email: string;
  android: boolean;
  ios: boolean;
};


export default function BetaTesting() {

  const { register, handleSubmit, setValue } = useForm<FormData>();

  const [emailSent, setEmailSent] = useState<boolean>(false)
  const [error, setError] = useState<boolean>(false)
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [android, setAndroid] = useState<boolean>(false);
  const [ios, setIos] = useState<boolean>(false);



return (
    <section className="relative">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="pt-32 pb-12 md:pt-40 md:pb-5">

          {/* Page header */}
          <div className="max-w-3xl mx-auto text-center pb-6 md:pb-10">
            <h1 className="h1">Beta Testing</h1>
          </div>
        </div>
      </div>
      
            <div className="max-w-sm mx-auto">
             <form onSubmit={onSubmit}>   
             </form>
            </div>  

      </div>
    </section>
  )
}

And my project structure:

As a solution I tried:

if( window ==="undefined"){
    return null;
  }

Still the same error message.

Any help wpuld be really appreciated!