How can i add adsense ads units in nextjs project

[gsahab0007]

Summary

I have already added google adsense auto ads code successfully, but i want to add adsense ads units in website pages made in next js latest version. Kindly help me in this regard.
Thanks in advance.

Additional information

No response

Example

No response

[shriekdj]

For App Router

'use client';
import React, { Fragment, ReactNode, useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

type Props = {
  children: ReactNode;
};

declare global {
  interface Window {
    adsbygoogle?: any | any[];
  }
}

const GoogleAdUnit = ({ children }: Props) => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {
      console.error(err);
    }
  }, [pathname, searchParams]);
  return <Fragment>{children}</Fragment>;
}


export default GoogleAdUnit;

And Use That Component with children as ins script

[shriekdj]

if you are using pages router use next-google-adsense package instead

[gsahab0007]

Thanks bro .............great.......

[gsahab0007]

Any blog for full placement of code for ad units of adsense in next js latest version plz.....

[gsahab0007]

@shriekdj bro thanks again........I implemented in my website.............

[shriekdj]

@shriekdj bro thanks again........I implemented in my website.............

No Problem @gsahab0007 , i also had that issue :).

[calcgenie]

i never tired this one, previous i have a tried various set of codes but didnt help for this site https://www.calcgenie.com/distance-calculators/cm-to-inch. this one is my last hope. because perfromance of my site is hurting because of this

[shriekdj]

@calcgenie I Would Suggest Use 2 Files Here for Performance Improvement, One Is Client Side Component Like GoogleAdUnitClient above code and Create Other Server Side Component GoogleAdUnit Like Below.
This Also Includes Code to Run Only in Production

import React, { Fragment, ReactNode, Suspense } from 'react';
import GoogleAdUnitClient from './GoogleAdUnitClient';

type Props = {
  children: ReactNode;
};

const isProduction = env.NODE_ENV === 'production';

const GoogleAdUnit = ({ children }: Props) => {
  return (
    <Suspense>
      {
        isProduction ?
        // only run on Live Website
        <GoogleAdUnitClient>
          {children}
        </GoogleAdUnitClient> :

        // don't need to load unit code
        <Fragment>
          {children}
        </Fragment>
      }
    </Suspense>
  );
};

export default GoogleAdUnit;

[shriekdj]

@calcgenie All The Other Packages Use useRouter from next/router which only works in pages router, but NextJS 13 Uses App Router Which Uses useRouter from next/navigation.

This is reason why old next.js packages for google adsense ad unit are not working, I think.