snelsi/next-hubspot

Next.js 13 app directory support

uixmat opened this issue · 7 comments

uixmat commented

I've tried implementing this with the experimental app directory in Next.js 13 using a layout.tsx and page.tsx - would be really useful to see how to implement next-hubspot with this situation

snelsi commented

app/providers.tsx

'use client';

import { HubspotProvider } from 'next-hubspot';

const Providers = ({ children }) => (
  <HubspotProvider>
    {children}
  </HubspotProvider>
)

export default Providers.

app/layout.tsx

import Providers from "./providers";

const RootLayout = ({ children }) => (
  <html>
    <body>
      <Providers>
        {children}
      </Providers>
    </body>
  </html>
);

export default RootLayout;

Add 'use client'; to any component in which you use useHubspotForm hook.
Everything else stays the same.

  • 🚀2
uixmat commented

Thanks @snelsi 👌🏼

vygandas commented

Hello. Will it not destroy all SSR by adding 'use client'? 🤔 I tried adding Provider only on the form containing component and it also works.

snelsi commented

Hello. Will it not destroy all SSR by adding 'use client'?

Hubspot form can't be server-side rendered. It requires scripts to be executed on the client side. So you should mark any component that imports and uses useHubspot hook with use client.

But adding Providers component from the example above will not affect other components on your page. The children is still rendered on the server and just passed down as a prop

vygandas commented

Doesn't all children automatically become client-sided if the parent has 'use client'? My point here was that maybe it's not best to wrap it with the Provider at the very top level. 😉