Nextjs

How to optimize the nextjs application using third-party libraries?

Optimize your extensive nextjs application with minor changes.

Rajdeep Singh

Published in

FrontEnd web

4 min readApr 25, 2024

The nextjs @next/third-parties library or package provides a collection of components and utilities that improve the performance and developer experience in your Next.js application. The nextjs team maintains it.

The important thing about the@next/third-parties library is that you can easily use them in your nextjs application.

According to the nextjs team, @next/third-parties is currently under experimental and active development.

Steps

Install the @next/third-parties package
How to use it
∘ Google Tag Manager
∘ Google Analytics
∘ Google Maps Embed
∘ YouTube Embed
Conclusion

Install the @next/third-parties package

The First step is to install the @next/third-parties package using npm, yarn or pnpm in your nextjs application.

npm install @next/third-parties@latest
# or
yarn add @next/third-parties@latest
# or
pnpm add @next/third-parties@latest

I choose pnpm, and the command output looks like this.

pnpm add  @next/third-parties@latest

Packages: +2
++
Progress: resolved 360, reused 350, downloaded 2, added 2, done

dependencies:
+ @next/third-parties 14.2.2

Done in 3.8s

Restart your local development server after installing the @next/third-parties package.

How to use it

Previously, we used the nextjs Script component to add third-party scripts, such as Google Tag Manager, Google Analytics, Google Maps Embed, etc., to the nextjs website. This process is painful for new developers.

Newly Developers are confused about where to use it in the _app or _document file in nextjs.

Now, with the @next/third-parties package, You can use Google Tag Manager, Google Analytics, Google Maps Embed, and YouTube Embed
very easy in nextjs without any problem.

All components and utilities are optimized for nextjs. You can import from the @next/third-parties/google package.

Google Tag Manager

To add the Google Tag Manager in nextjs, you can use The GoogleTagManager component to instantiate a Google Tag Manager container on your website.

To load Google Tag Manager for all routes, include the component directly in your root layout and pass in your GTM container ID as props in the component.

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

Follow the code to load Google Tag Manager in a single route or include the component for that use.

// app/page.tsx

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function Page() {
  return (
   <> 
      <GoogleTagManager gtmId="GTM-XYZ" /> 
      ...
    </>
)}

To learn more about the Google Tag Manager component and its available options, read the nextjs documentation.

Google Analytics

The Google Analytics component supports Google Analytics 4. To add Google Analytics, you can use the GoogleAnalytics component in nextjs. It loads Google Analytics via gtag.js.

If you already used Google Tag Manager in your application, you can configure Google Analytics directly using Google Tag Manager; you do not need to add Google Analytics as a separate component.

To load Google Analytics for all routes, include the component directly in your root layout and pass your measurement ID as props in the component.

// app/layout.tsx

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

To load Google Analytics for a single route, include the GoogleAnalytics component in your specific page file.

// app/page.tsx

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return (
   <> 
      <GoogleAnalytics gaId="G-XYZ" /> 
      ...
   </> 
)}

To learn more about the Google Analytics component and its available options, read the nextjs documentation.

Google Maps Embed

The GoogleMapsEmbed component can help you to add Google Maps to your nextjs application.

By default, it comes with a lazy-loading attribute.

// app/contact/apge.tsx

import { GoogleMapsEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return (

    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />

  )
}

To learn more about the Google Map Embed component and its available options, read the nextjs documentation.

YouTube Embed

The YouTubeEmbed component can help you add a YouTube video to your nextjs application. The YouTubeEmbed component loads faster by using lite-youtube-embed.

import { YouTubeEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

To learn more about the Youtube Embed component and its available options, read the nextjs documentation.

Conclusion

My motivation behind this article is that developers often say that lazy loading is the only way to optimize nextjs applications. I always say that lazy loading is not a single one. It would be best to focus on other stuff, such as Third Party Libraries, scripts, images, etc.

To learn more about nextjs optimizations, you can read the nextjs optimizations section in the documentation.

To learn more about frontend developers, reactjs, nextjs, and Linux stuff, follow the frontend web publication on Medium and other updates. You can also follow me on Twitter (X) and Medium.