Is it possible to use the Google maps api to load maps with Static Site Generation in Next?

Question

I have a page that is using a component that uses the google maps api to load a map, I want to know if I can use Next's SSG to make fewer requests, in order to save money

This is the GoogleMaps component:

import { useMemo, useEffect, useRef, ReactNode, useCallback } from 'react'
import { GoogleMap, useLoadScript } from '@react-google-maps/api'
import { directionsConfig } from '@/config'
import { getPolylineStyle } from '@/utils'
import { Spinner } from '.'

export type Direction = {
  title: string
  origin: {
    lat: number
    lng: number
  }
  destination: {
    lat: number
    lng: number
  }
  waypoints: {
    location: {
      lat: number
      lng: number
    }
  }[]
}

type Props = {
  directions: Direction[]
  children?: ReactNode
}

export function GoogleMaps({ directions, children }: Props) {
  const center = useMemo(() => ({ lat: -24.184977, lng: -53.036962 }), [])
  const mapRef = useRef<google.maps.Map>()
  const directionsRenderersRef = useRef<google.maps.DirectionsRenderer[]>([])
  const prevDirectionsRef = useRef<Direction[]>([])

  const onLoad = useCallback(
    (map: google.maps.Map) => {
      const { maps } = window.google
      const directionsService = new maps.DirectionsService()

      // Remove old directions renderers
      directionsRenderersRef.current.forEach((directionsRenderer) => {
        directionsRenderer.setMap(null)
      })
      directionsRenderersRef.current = []

      // Add new directions renderers
      directions.forEach((direction, index) => {
        const directionsRenderer = new maps.DirectionsRenderer(directionsConfig)
        const polylineOptions = getPolylineStyle(index)
        directionsRenderer.setOptions({ polylineOptions })
        directionsRenderer.setMap(map)
        directionsService.route(
          {
            language: 'pt-BR',
            travelMode: maps.TravelMode.WALKING,
            destination: direction.destination,
            origin: direction.origin,
            waypoints: direction.waypoints,
          },
          (result, status) => {
            if (status === maps.DirectionsStatus.OK) {
              directionsRenderer.setDirections(result)
            }
          },
        )
        directionsRenderersRef.current.push(directionsRenderer)
      })

      mapRef.current = map
    },
    [directions, directionsRenderersRef, mapRef],
  )

  useEffect(() => {
    if (
      JSON.stringify(directions) !== JSON.stringify(prevDirectionsRef.current)
    ) {
      prevDirectionsRef.current = directions
      if (mapRef.current) {
        onLoad(mapRef.current)
      }
    }
  }, [directions, onLoad])

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '',
  })

  if (!isLoaded) {
    return (
      <div
        data-testid="loading-maps"
        className="flex itens-center justify-center flex-col my-12"
      >
        <span className="text-lg font-inter text-white mb-4">
          Carregando Mapa
        </span>
        <Spinner />
      </div>
    )
  }

  return (
    <GoogleMap
      zoom={15}
      center={center}
      mapContainerStyle={{
        width: '98vw',
        height: '50vh',
        borderTopLeftRadius: '8px',
        borderTopRightRadius: '8px',
      }}
      onLoad={onLoad}
      options={{
        fullscreenControl: false,
        keyboardShortcuts: true,
        streetViewControl: false,
        mapTypeControl: false,
      }}
    >
      {children}
    </GoogleMap>
  )
}

I tried using getStaticProps on the page that is using this component, but I don't know if it works