title: Next.js Head - You have included the Google Maps JavaScript API multiple times on this page
body: <p>In order to use the <a href="https://github.com/hibiken/react-places-autocomplete" rel="nofollow noreferrer">react-places-autocomplete</a> lib, I implemented the gmaps script as stated in the doc but I get a &quot;You have included the Google Maps JavaScript API multiple times on this page.&quot; error when I go to any page with 4-5 copy of the script tag.</p>
  <p>If I remove the GooglePlacesScript component, no instance of the script is added.</p>
  <p>If I put the GooglePlacesScript component at a page or component level, I still get the error wherever I go on the website somehow.</p>
  <p>Any idea why Next is duplicating the script?</p>
  <p>GooglePlacesScript component:</p>
  <pre><code>import React from &quot;react&quot;;
  import getConfig from &quot;next/config&quot;;
  import Head from &quot;next/head&quot;;
  
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
  const GOOGLE_MAPS_API_KEY =
    serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
    publicRuntimeConfig.GOOGLE_MAPS_API_KEY;
  
  const GooglePlacesScript = () =&gt; {
    return (
      &lt;Head&gt;
        &lt;script
          type=&quot;text/javascript&quot;
          src={
            &quot;https://maps.googleapis.com/maps/api/js?key=&quot; +
            GOOGLE_MAPS_API_KEY +
            &quot;&amp;libraries=places&quot;
          }
        &gt;&lt;/script&gt;
      &lt;/Head&gt;
    );
  };
  
  export default GooglePlacesScript;
  
  </code></pre>
  <p>_app.js:</p>
  <pre><code>import { ThemeProvider } from &quot;styled-components&quot;;
  import { theme } from &quot;@styles&quot;;
  import { BaseCSS } from &quot;styled-bootstrap-grid&quot;;
  import &quot;@fortawesome/fontawesome-svg-core/styles.css&quot;;
  import &quot;pure-react-carousel/dist/react-carousel.es.css&quot;;
  import &quot;react-input-range/lib/css/index.css&quot;;
  import &quot;@styles/_app.css&quot;;
  import &quot;swiper/swiper-bundle.min.css&quot;;
  import CartManager from &quot;@components/Cart/CartManager&quot;;
  import CartContextProvider from &quot;contexts/CartContext&quot;;
  import AuthContextProvider from &quot;contexts/AuthContext&quot;;
  import AuthManager from &quot;@components/Auth/AuthManager&quot;;
  import FavoritesManager from &quot;@components/Favorites/FavoritesManager&quot;;
  import FavoritesContextProvider from &quot;contexts/FavoritesContext&quot;;
  import GooglePlacesScript from &quot;@components/GooglePlacesScript&quot;;
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;BaseCSS /&gt;
        &lt;AuthContextProvider&gt;
          &lt;AuthManager&gt;
            &lt;CartContextProvider&gt;
              &lt;CartManager&gt;
                &lt;FavoritesContextProvider&gt;
                  &lt;FavoritesManager&gt;
                    &lt;GooglePlacesScript /&gt;
                    &lt;Component {...pageProps} /&gt;
                  &lt;/FavoritesManager&gt;
                &lt;/FavoritesContextProvider&gt;
              &lt;/CartManager&gt;
            &lt;/CartContextProvider&gt;
          &lt;/AuthManager&gt;
        &lt;/AuthContextProvider&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default MyApp;
  
  </code></pre>
  <h3>Solution Edit: Updated GooglePlacesScript code using next/script (Next v11+):</h3>
  <pre><code>import React from &quot;react&quot;;
  import getConfig from &quot;next/config&quot;;
  import Script from &quot;next/script&quot;;
  
  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}&amp;libraries=places`;
  
  const GooglePlacesScript = () =&gt; {
    return (
      &lt;Script type=&quot;text/javascript&quot; src={source} strategy=&quot;beforeInteractive&quot; /&gt;
    );
  };
  
  export default GooglePlacesScript;
  </code></pre>