{"id":26761703,"url":"https://github.com/soranoo/next-google-adsense","last_synced_at":"2025-04-08T04:16:21.640Z","repository":{"id":202935679,"uuid":"708428314","full_name":"soranoo/next-google-adsense","owner":"soranoo","description":"Add Google AdSense to your Next.js app.","archived":false,"fork":false,"pushed_at":"2025-04-02T22:40:17.000Z","size":167,"stargazers_count":31,"open_issues_count":3,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T08:02:07.539Z","etag":null,"topics":["adsense","google","nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soranoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-22T14:38:02.000Z","updated_at":"2025-03-23T13:57:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"774cce90-6b79-431a-b1bf-7b3c3a082241","html_url":"https://github.com/soranoo/next-google-adsense","commit_stats":null,"previous_names":["soranoo/next-google-adsense"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soranoo%2Fnext-google-adsense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soranoo%2Fnext-google-adsense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soranoo%2Fnext-google-adsense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soranoo%2Fnext-google-adsense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soranoo","download_url":"https://codeload.github.com/soranoo/next-google-adsense/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451644,"owners_count":20940939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adsense","google","nextjs","react","typescript"],"created_at":"2025-03-28T18:26:47.726Z","updated_at":"2025-04-08T04:16:21.608Z","avatar_url":"https://github.com/soranoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NEXT-GOOGLE-ADSENSE\n\n[![Weekly Download](https://img.shields.io/npm/dw/next-google-adsense?color=0066cc\u0026style=flat)](https://www.npmjs.com/package/next-google-adsense) ![Tests](https://github.com/soranoo/next-google-adsense/actions/workflows/auto_test.yml/badge.svg) [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\u0026nbsp;\u0026nbsp;\u0026nbsp;[![Donation](https://img.shields.io/static/v1?label=Donation\u0026message=❤️\u0026style=social)](https://github.com/soranoo/Donation)\n\nAdd Google AdSense to your Next.js app.\n\nThis package is deeply inspired by [nextjs-google-adsense](https://github.com/btk/nextjs-google-adsense/).\n\nWhy I don't use [nextjs-google-adsense](https://github.com/btk/nextjs-google-adsense/) directly? Because it only support Auto Ads and Responsive Display Ad. I want to use In-article Ads. So I decided to create a new package. (read [👾 Why next-google-adsense?](#-why-next-google-adsense) for more details)\n\nGive me a ⭐ if you like it.\n\n## 🗝️ Features\n\n- Support SSR (Server-Side Rendering), SSG (Static Site Generation) and CSR (Client-Side Rendering)\n- Support TypeScript\n- Zero Dependencies\n- Theoretically support all AdSense AD types (see [🎨 Create a custom layout](#-create-a-custom-layout) for more details)\n- Create `ads.txt` automatically (see [Initialization / Verification](#initialization--verification-) for more details)\n\n## 📑 Table of Contents\n\n- [👾 Why next-google-adsense?](#-why-next-google-adsense)\n- [📦 Requirements](#-requirements)\n- [🚀 Getting Started](#-getting-started)\n  - [Installation](#installation)\n  - [Initialization / Verification](#initialization--verification-)\n  - [Usage](#usage-)\n    - [Auto Ads](#auto-ads)\n    - [Manual Ads](#manual-ads)\n- [📖 API Reference](#-api-reference)\n  - [Components](#components)\n    - [GoogleAdSense](#initializes-the-google-adsense)\n    - [AdUnit](#manual-ad)\n- [🎨 Create a custom layout](#-create-a-custom-layout)\n  - [How to convert the given html to a custom layout?](#how-to-convert-the-given-html-to-a-custom-layout)\n- [🐛 Known Issues](#-known-issues)\n- [⭐ TODO](#-todo)\n- [🤝 Contributing](#-contributing)\n- [📝 License](#-license)\n- [☕ Donation](#-donation)\n\n## 👾 Why next-google-adsense?\n\n|                            | next-google-adsense (this) | [nextjs-google-adsense](https://github.com/btk/nextjs-google-adsense/) |\n| -------------------------- | -------------------------- | ---------------------------------------------------------------------- |\n| TypeScript                 | ✅                         | ✅                                                                     |\n| Support Auto Ads           | ✅                         | ✅                                                                     |\n| Support Display Ad         | ✅                         | ✅                                                                     |\n| Support In-feed Ad         | ✅                         | ❌                                                                     |\n| Support In-article Ad      | ✅                         | ❌                                                                     |\n| Support Matched Content Ad | ✅                         | ❌                                                                     |\n| Dynamic `ads.txt`          | ✅                         | ❌                                                                     |\n| Multiple ADs on one page   | ✅                         | ⚠️\\*1                                                                  |\n\n\\*1: According to the their [documentation](https://github.com/btk/nextjs-google-adsense/blob/master/README.md) seems it is ok to use multiple ADs on one page. But I found that it will cause an error.\n\n## 📦 Requirements\n\n- Next.js 11.0.0 or higher.\n- React 17.0.0 or higher.\n\n## 🚀 Getting Started\n\n### Installation\n\n```bash\nnpm install next-google-adsense\n```\n\nVisit the [npm](https://www.npmjs.com/package/next-google-adsense) page.\n\n### Initialization / Verification 🍀\n\nThere are two ways to verify your site (of course you can implement both):\n\n1. AdSense code snippet\n\n   ```typescript\n   // pages/_app.tsx\n\n   // import the module\n   import { GoogleAdSense } from \"next-google-adsense\";\n\n   const App = ({ Component, pageProps }) =\u003e {\n     return (\n       \u003c\u003e\n         \u003cGoogleAdSense publisherId=\"pub-XXXXXXXXXXXXXXXX\" /\u003e {/* 👈 16 digits */}\n         {/* or */}\n         \u003cGoogleAdSense /\u003e {/* if NEXT_PUBLIC_ADSENSE_PUBLISHER_ID is set */}\n         \u003cComponent {...pageProps} /\u003e\n       \u003c/\u003e\n     );\n   };\n\n   export default App;\n   ```\n    You can also add the `publisherId` as environment variable as `NEXT_PUBLIC_ADSENSE_PUBLISHER_ID`. The environment variable will override the prop if both are set.\n\n2. Ads.txt snippet\n   ```js\n   // package.json\n   \n   // ...\n   \"scripts\": {\n      \"build\": \"next build \u0026\u0026 create-ads-txt\", // 👈 if you want to create ads.txt automatically, recommended\n      \"create-ads-txt\": \"create-ads-txt\" // 👈 if you want to create ads.txt manually\n   },\n   // ...\n   ```\n\n   \u003e ⚠️ Your old `ads.txt` will be overwritten during the generation process.\n\n   You must set `NEXT_PUBLIC_ADSENSE_PUBLISHER_ID` as environment variable. The environment variable will be used to generate the `ads.txt`.\n\n\n\n### Usage 🎉\n\n#### Auto Ads\n\nIf you decide to use Auto Ads, you are good to go. The ads will be automatically displayed on your page. (Setup [Auto Ads](https://support.google.com/adsense/answer/9261307))\n\n#### Manual Ads\n\n```typescript\nimport { AdUnit } from \"next-google-adsense\";\n\nconst Page = () =\u003e {\n  return (\n    \u003c\u003e\n       \u003cAdUnit\n        publisherId=\"pub-XXXXXXXXXXXXXXXX\"  {/* 👈 16 digits */}\n        slotId=\"XXXXXXXXXX\"                 {/* 👈 10 digits */}\n        layout=\"display\"                    {/* See the API Reference for more options */}\n        /\u003e\n      {/* or */}\n       \u003cAdUnit                              {/* if NEXT_PUBLIC_ADSENSE_PUBLISHER_ID is set */}\n        slotId=\"XXXXXXXXXX\"\n        layout=\"display\"\n        /\u003e\n\n        \u003cYourContent /\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Page;\n```\n\n## 📖 API Reference\n\n### Components\n\n#### Initializes the Google AdSense.\n\n```typescript\n\u003cGoogleAdSense publisherId={string}\u003e\n```\n\n| Parameter   | Optional | Type   | Default | Description                                                                                         |\n| ----------- | -------- | ------ | ------- | --------------------------------------------------------------------------------------------------- |\n| publisherId | Yes      | string | n/a     | You can skip this parameter if you set the environment variable `NEXT_PUBLIC_ADSENSE_PUBLISHER_ID`. |\n\n#### Manual AD.\n\n```typescript\n\u003cAdUnit publisherId={string} slotId={string} layout={\"display\" | \"in-article\" | \"custom\"} customLayout={JSX.Element}\u003e\n```\n\n| Parameter    | Optional | Type                                  | Default   | Description                                                                                         |\n| ------------ | -------- | ------------------------------------- | --------- | --------------------------------------------------------------------------------------------------- |\n| publisherId  | Yes      | string                                | n/a       | You can skip this parameter if you set the environment variable `NEXT_PUBLIC_ADSENSE_PUBLISHER_ID`. |\n| slotId       | No       | string                                | n/a       | Google AdSense Slot ID.                                                                             |\n| layout       | Yes      | \"display\" \\| \"in-article\" \\| \"custom\" | \"display\" | The layout of the AD.                                                                               |\n| customLayout | Yes      | JSX.Element                           | n/a       | The custom layout of the AD. This parameter is required if `layout` is set to \"custom\".             |\n\n## 🎨 Create a custom layout\n\nNo layout fits your needs? Let's create a custom layout.\n\nSample custom layout:\n\n```typescript\nexport const InFeedAd = () =\u003e {\n  return (\n    \u003cins\n      className=\"adsbygoogle\"\n      style={{ display: \"block\" }}\n      data-ad-format=\"fluid\"\n      data-ad-layout-key=\"\u003cAD_LAYOUT_KEY\u003e\"\n      data-ad-client=\"ca-pub-XXXXXXXXXXXXXXXX\"\n      data-ad-slot=\"XXXXXXXXXX\"\n    /\u003e\n  );\n};\n```\n\n#### How to convert the given html to a custom layout?\n\nExample (provided by Google AdSense):\n\n```html\n\u003cscript\n  async\n  src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX\"\n  crossorigin=\"anonymous\"\n\u003e\u003c/script\u003e\n\u003cins\n  class=\"adsbygoogle\"\n  style=\"display:block\"\n  data-ad-format=\"fluid\"\n  data-ad-layout-key=\"\u003cAD_LAYOUT_KEY\u003e\"\n  data-ad-client=\"ca-pub-XXXXXXXXXXXXXXXX\"\n  data-ad-slot=\"XXXXXXXXXX\"\n\u003e\u003c/ins\u003e\n\u003cscript\u003e\n  (adsbygoogle = window.adsbygoogle || []).push({});\n\u003c/script\u003e\n```\n\n1. Remove all the `\u003cscript\u003e` tags.\n2. You will get the following html:\n\n   ```html\n   \u003cins\n     class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"\u003cAD_LAYOUT_KEY\u003e\"\n     data-ad-client=\"ca-pub-XXXXXXXXXXXXXXXX\"\n     data-ad-slot=\"XXXXXXXXXX\"\n   \u003e\n   \u003c/ins\u003e\n   ```\n\n3. Convert the html to JSX:\n   ```typescript\n   export const InFeedAd = () =\u003e {\n     return (\n       \u003cins\n         className=\"adsbygoogle\"\n         style={{ display: \"block\" }}\n         data-ad-format=\"fluid\"\n         data-ad-layout-key=\"\u003cAD_LAYOUT_KEY\u003e\"\n         data-ad-client=\"ca-pub-XXXXXXXXXXXXXXXX\"\n         data-ad-slot=\"XXXXXXXXXX\"\n       /\u003e\n     );\n   };\n   ```\n4. Done! You can now use the custom layout in your app.\n   ```typescript\n   \u003cAdUnit publisherId=\"\u003cyour-publisher-id\u003e\" slotId=\"\u003cyour-slot-id\u003e\" layout=\"custom\" customLayout={InFeedAd}\u003e\n   ```\n\nFull Code:\n\n```typescript\nimport { AdUnit } from \"next-google-adsense\";\n\nexport const InFeedAd = () =\u003e {\n  return (\n    \u003cins\n      className=\"adsbygoogle\"\n      style={{ display: \"block\" }}\n      data-ad-format=\"fluid\"\n      data-ad-layout-key=\"\u003cAD_LAYOUT_KEY\u003e\"\n      data-ad-client=\"ca-pub-XXXXXXXXXXXXXXXX\"\n      data-ad-slot=\"XXXXXXXXXX\"\n    /\u003e\n  );\n};\n\nconst Page = () =\u003e {\n  return (\n    \u003c\u003e\n       \u003cAdUnit\n        publisherId=\"pub-XXXXXXXXXXXXXXXX\"  {/* 👈 16 digits */}\n        slotId=\"XXXXXXXXXX\"                 {/* 👈 10 digits */}\n        layout=\"custom\"\n        customLayout={InFeedAd}\n        /\u003e\n\n        \u003cYourContent /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## 🐛 Known Issues\n\n- Waiting for your report.\n\n## ⭐ TODO\n\n- Add custom layout validation.\n\n## 🤝 Contributing\n\nContributions are welcome! If you find a bug or have a feature request, please open an issue. If you want to contribute code, please fork the repository and submit a pull request.\n\nBefore you open a pull request, please make sure that you run `npm run dev:test` to make sure the code run as expected.\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n\n## ☕ Donation\n\nLove it? Consider a donation to support my work.\n\n[![\"Donation\"](https://raw.githubusercontent.com/soranoo/Donation/main/resources/image/DonateBtn.png)](https://github.com/soranoo/Donation) \u003c- click me~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoranoo%2Fnext-google-adsense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoranoo%2Fnext-google-adsense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoranoo%2Fnext-google-adsense/lists"}