Turn Background image style to SSR in the new app folder in next js 13

Question

I have identified an issue related to client-side rendering based on my prior attempts to utilize the Next.js Image component for the HeroImage path. My specific concern pertains to transforming the current styling into a server-side rendering approach. Additionally, I am seeking guidance on implementing lazy loading for the background. Any assistance in resolving these matters would be greatly appreciated.

import Image from 'next/image'
import HeroImage from '@/public/portfolio/Hero.png'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 " style={{ backgroundImage: `url("${HeroImage}")`}}>
      <div className='flex justify-center items-end'>
        <p>Who makes your project possible</p>
      </div>
    </main>
  )
}

I do receave a 404 error (not found)

Request URL:
http://localhost:3000/[object%20Object]
Request Method:
GET
Status Code:
404 Not Found
Remote Address:
[::1]:3000
Referrer Policy:
strict-origin-when-cross-origin
Cache-Control:
no-store, must-revalidate
Connection:
keep-alive
Content-Encoding:
gzip
Content-Type:
text/html; charset=utf-8
Date:
Sat, 18 Nov 2023 11:14:43 GMT
Keep-Alive:
timeout=5
Transfer-Encoding:
chunked
Vary:
RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
X-Powered-By:
Next.js
Accept:
image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding:
gzip, deflate, br
Accept-Language:
pt-PT,pt;q=0.9,en-US;q=0.8,en;q=0.7
Connection:
keep-alive
Host:
localhost:3000
Referer:
http://localhost:3000/
Sec-Ch-Ua:
"Chromium";v="116", "Not)A;Brand";v="24", "Opera GX";v="102"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Windows"
Sec-Fetch-Dest:
image
Sec-Fetch-Mode:
no-cors
Sec-Fetch-Site:
same-origin
User-Agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 OPR/102.0.0.0