Adding HubSpot embed script to Next.js document head

Other Questions HubSpot
1

I’m working on integrating a HubSpot form into my Next.js application and running into some syntax issues. When I try to include the HubSpot script in my document head, I keep getting JavaScript parsing errors.

Here’s the form configuration I’m trying to use:

<script>
  hspt.forms.create({
    region: "eu1",
    portalId: "123456",
    formId: "abc-def-123"
  });
</script>

The errors I’m seeing are:

  • First error: Unexpected token, expecting {'}'} or &rbrace;
  • Second error: Syntax error on the region line, unexpected token

My current page setup looks like this:

import Head from "next/head";
import styled from "styled-components";
import MainBanner from "../components/sections/MainBanner";
import ContentSection from "../components/sections/ContentSection";

const Container = styled.div`
  padding-top: 8rem;
`;

export default function LandingPage() {
  return (
    <Container>
      <Head>
        <title>My App - Landing</title>
        <link rel="icon" href="/favicon.ico" />
        <script
          type="text/javascript"
          id="hubspot-loader"
          async
          defer
          src="//js.hs-scripts.com/123456.js"
        ></script>
        <script
          charset="utf-8"
          type="text/javascript"
          src="//js.hsforms.net/forms/shell.js"
        ></script>
        <script>
          hspt.forms.create(
          {
            region: "eu1",
            portalId: "123456",
            formId: "abc-def-123",
          }
          );
        </script>
      </Head>
      <MainBanner />
    </Container>
  );
}

The script code comes directly from HubSpot’s form generator, so I think the syntax should be correct. What’s the proper way to include this kind of script in Next.js?

2

Next.js is parsing your script content as JSX instead of plain JavaScript. When you put JavaScript directly in script tags within the Head component, it expects JSX syntax and chokes on your object literals. I’ve hit this before - easiest fix is moving your HubSpot code to _document.js with dangerouslySetInnerHTML, or create a custom hook that loads the form async. You could also use Next.js Script component with strategy=“afterInteractive” for better control over execution timing. Or just throw the form code in a separate .js file and import it dynamically. Any of these keeps your JSX clean and stops the parsing conflicts.

3

Had the same issue with HubSpot forms in Next.js. The problem is Next.js treats everything in Head components as JSX, so your JavaScript object syntax gets messed up during compilation. Skip the dangerouslySetInnerHTML workarounds - just create a separate HubSpotForm component instead. Use useRef to target a div, then call hbspt.forms.create inside useEffect with that reference. Way cleaner than fighting with script tags, and you can reuse it across pages.

4

been there with hubspot integration. nextjs is treating your script tag as jsx instead of regular javascript. move that form creation code into componentDidMount or useEffect so it runs after the page loads. also caught a typo - it’s ‘hbspt’ not ‘hspt’ in your forms.create call.

5

try wrapping the script content in dangerouslySetInnerHTML instead. next.js parses jsx differently so inline scripts break. something like <script dangerouslySetInnerHTML={{__html: 'hbspt.forms.create({region:"eu1",portalId:"123456",formId:"abc-def-123"});'}} /> should work better.

6

I hit this exact same issue with HubSpot forms in Next.js last year. You’re mixing JSX syntax with raw JavaScript inside script tags, which breaks the parser. Don’t put the form creation script directly in the Head component. Move it to a useEffect hook that runs after the component mounts - this lets the HubSpot shell script load first, then creates your form once the DOM is ready. Also caught a typo: you’ve got “hspt” instead of “hbspt” in your form creation call. That’ll break things even if you fix the syntax errors. The useEffect approach is way cleaner and sidesteps all these JSX parsing issues while getting the script loading order right.