feat: integrate google adsense

src/app/layout.tsx

@@ -10,6 +10,7 @@ import { siteMetadata } from "@/data/siteMetadata";
 import Head from "./head";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { ENV } from "@/lib/env";
+import { GoogleAdsense } from "@/components/google-adsense";
 
 const space_grotesk = Space_Grotesk({
   subsets: ["latin"],
@@ -79,6 +80,7 @@ export default function RootLayout({
           <TailwindIndicator />
         </ThemeProvider>
         <GoogleAnalytics gaId={ENV.GOOGLE_ANALYTICS_ID} />
+        <GoogleAdsense pId={ENV.ADSENSE_CLIENT_ID} />
       </body>
     </html>
   );

src/components/google-adsense.tsx

@@ -0,0 +1,17 @@
+import { ENV } from "@/lib/env";
+import Script from "next/script";
+
+export const GoogleAdsense = ({ pId }: { pId: string }) => {
+  if (process.env.NODE_ENV !== "production") {
+    return null;
+  }
+
+  return (
+    <Script
+      async
+      src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-${pId}`}
+      crossOrigin="anonymous"
+      strategy="afterInteractive"
+    />
+  );
+};

src/lib/env.ts

@@ -1,4 +1,5 @@
 export const ENV = {
   GOOGLE_ANALYTICS_ID: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID!,
   NODE_ENV: process.env.NODE_ENV!,
+  ADSENSE_CLIENT_ID: process.env.NEXT_PUBLIC_ADSENSE_CLIENT_ID!,
 };