Script.tsx

// just a reminder of a nice API for a <Script /> component,
// reference: https://nextjs.org/docs/basic-features/script#executing-code-after-mounting-onready

import { useRef } from 'react'
import Script from 'next/script'

export function Home() {
  const mapRef = useRef()
  return (
    <>
      <div ref={mapRef}></div>
      <Script
        id="google-maps"
        src="https://maps.googleapis.com/maps/api/js"
        onReady={() => {
          new google.maps.Map(mapRef.current, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        }}
      />
    </>
  )
}