How extract Script (next/script) from nextjs layout to a separate component?

Question

I use App Routing and Page Routing in my aplication and need add Script for VWO. For pages with Page Routing I added to _app : Import the Script module from 'next/script'.

Added these two properties on the Script tag: a. id = "vwoCode" b. strategy="beforeInteractive" 3.Added script inside "dangerouslySetInnerHTML” property.

In pages with App router:

Added script tag directly in head tag of the RootLayout component in layout.tsx file.

Added these two properties on the script tag: a. id = "vwoCode" b. type="text/javascript" 3.Added script inside "dangerouslySetInnerHTML” property.

But now I need extract it to a separate component if possible. Root layout should be clean and tidy.

Code for layout.tsx

const RootLayout = ({ children }: PropsWithChildren) => {
  return (
    <ReactQueryClientProvider>
      <html lang="en">
        <head> 
          <Script
            id="vwoCode"
            type="text/javascript"
            dangerouslySetInnerHTML={{
              __html: `
                <!-- Start VWO Async SmartCode -->
                <link rel="preconnect" href="" />
                <script >
               // code
                </script>
                <!-- End VWO Async SmartCode -->
            `,
            }}
          />
        </head>
        <body>
          
            <ReactQueryProvider>
            </ReactQueryProvider>
        </body>
      </html>
    </ReactQueryClientProvider>
  );
};

export default RootLayout;

Code for _app.tsx

const App = ({ Component, pageProps }: AppPropsWithLayout) => {
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);

  return (
    <>
      <Script
        id="vwoCode"
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          <!-- Start VWO Async SmartCode -->
            <link rel="preconnect" href="" />
            <script >
          //code
            </script>
            <!-- End VWO Async SmartCode -->
          `,
        }}
      />

      <AuthProvider>
        ///
      </AuthProvider>
    </>
  );
};

export default api.withTRPC(App);

How create separate component for Script and add for this 2 files?

Nidhi Tyagi · Accepted Answer · 2024-10-28 13:46:23Z

-1

You can create a component VWOScript.tsx with the content as shown in the attached screenshot. (Please note: account_id has dummy value and you will need to update that with your account_id).

Once added in layout.tsx file the VWO SmartCode doesn't need to be added in _app.tsx. So this part can be safely skipped.

This demo public repo can be referred for an example integration: https://github.com/Ragnarrlothbrok/tailnext-Test/blob/main/app/layout.tsx

edited Oct 28, 2024 at 13:46

answered Oct 28, 2024 at 13:44

Nidhi Tyagi

11 bronze badge

Add a comment |

Collectives™ on Stack Overflow

How extract Script (next/script) from nextjs layout to a separate component?

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related