Next.js Head - 您在此页面上多次包含 Google 地图 JavaScript API

Question

为了使用 react-places-autocomplete 库，我按照文档中的说明实现了 gmaps 脚本，但我得到一个“你已经包含了 Google 地图 JavaScript API 在此页面上多次。”当我使用脚本标签的 4-5 个副本转到任何页面时出错。

如果删除 GooglePlacesScript 组件，则不会添加任何脚本实例。

如果我将 GooglePlacesScript 组件放在页面或组件级别，无论我以何种方式访问网站，我仍然会遇到错误。

知道 Next 为什么要复制脚本吗？

GooglePlacesScript 组件：

import React from "react";
import getConfig from "next/config";
import Head from "next/head";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const GooglePlacesScript = () => {
  return (
    <Head>
      <script
        type="text/javascript"
        src={
          "https://maps.googleapis.com/maps/api/js?key=" +
          GOOGLE_MAPS_API_KEY +
          "&libraries=places"
        }
      ></script>
    </Head>
  );
};

export default GooglePlacesScript;

_app.js:

import { ThemeProvider } from "styled-components";
import { theme } from "@styles";
import { BaseCSS } from "styled-bootstrap-grid";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "pure-react-carousel/dist/react-carousel.es.css";
import "react-input-range/lib/css/index.css";
import "@styles/_app.css";
import "swiper/swiper-bundle.min.css";
import CartManager from "@components/Cart/CartManager";
import CartContextProvider from "contexts/CartContext";
import AuthContextProvider from "contexts/AuthContext";
import AuthManager from "@components/Auth/AuthManager";
import FavoritesManager from "@components/Favorites/FavoritesManager";
import FavoritesContextProvider from "contexts/FavoritesContext";
import GooglePlacesScript from "@components/GooglePlacesScript";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <BaseCSS />
      <AuthContextProvider>
        <AuthManager>
          <CartContextProvider>
            <CartManager>
              <FavoritesContextProvider>
                <FavoritesManager>
                  <GooglePlacesScript />
                  <Component {...pageProps} />
                </FavoritesManager>
              </FavoritesContextProvider>
            </CartManager>
          </CartContextProvider>
        </AuthManager>
      </AuthContextProvider>
    </ThemeProvider>
  );
}

export default MyApp;

解决方案编辑：使用 next/script（Next v11+）更新了 GooglePlacesScript 代码：

import React from "react";
import getConfig from "next/config";
import Script from "next/script";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;

const GooglePlacesScript = () => {
  return (
    <Script type="text/javascript" src={source} strategy="beforeInteractive" />
  );
};

export default GooglePlacesScript;

Answer 1

我建议使用 @googlemaps/react-wrapper。

import { Wrapper } from "@googlemaps/react-wrapper";

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"}>
    <MyMapComponent />
  </Wrapper>
);

Answer 2

找到解决方案：使用 next/script（Next v11+）更新了 GooglePlacesScript 代码：

import React from "react";
import getConfig from "next/config";
import Script from "next/script";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;

const GooglePlacesScript = () => {
  return (
    <Script type="text/javascript" src={source} strategy="beforeInteractive" />
  );
};

export default GooglePlacesScript;

Next.js Head - 您在此页面上多次包含 Google 地图 JavaScript API

Next.js Head - You have included the Google Maps JavaScript API multiple times on this page

google-maps

reactjs

next.js

解决方案编辑：使用 next/script（Next v11+）更新了 GooglePlacesScript 代码：

找到解决方案：使用 next/script（Next v11+）更新了 GooglePlacesScript 代码：