{"id":16178768,"url":"https://github.com/rabelais88/consent-nextjs","last_synced_at":"2026-03-14T20:55:12.230Z","repository":{"id":239305688,"uuid":"799162769","full_name":"rabelais88/consent-nextjs","owner":"rabelais88","description":"cookie and private data consent management in Next.js with lightning-fast setup","archived":false,"fork":false,"pushed_at":"2024-05-19T22:34:33.000Z","size":383,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T20:15:49.130Z","etag":null,"topics":["compliance","cookie","cookie-consent","cookie-consent-banner","data-consent","data-privacy","gdpr","next","nextjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rabelais88.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-05-11T10:43:23.000Z","updated_at":"2024-05-19T22:34:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"41fa6d87-d4b4-4eec-b1ab-1cef00ef30ce","html_url":"https://github.com/rabelais88/consent-nextjs","commit_stats":null,"previous_names":["rabelais88/consent-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rabelais88%2Fconsent-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rabelais88%2Fconsent-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rabelais88%2Fconsent-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rabelais88%2Fconsent-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rabelais88","download_url":"https://codeload.github.com/rabelais88/consent-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243392326,"owners_count":20283565,"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":["compliance","cookie","cookie-consent","cookie-consent-banner","data-consent","data-privacy","gdpr","next","nextjs"],"created_at":"2024-10-10T05:24:29.491Z","updated_at":"2025-12-26T21:19:38.365Z","avatar_url":"https://github.com/rabelais88.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# consent-nextjs\n- Cookie \u0026 Private Data Usage Consent Management System for Next.js.\n- Aims to provide fastest way to setting it up.\n- Developer experience oriented. Easy to modify.\n- Provides React Store as controller.\n\n# Caveat\n\n- Next.js 14 currently has bugs regarding client component. It is encoraged to use nextjs canary version.\n- 👨‍⚖️The legal compliance of the provided text may vary by country. It's best to use it only for quick initial deployment and verification, and afterward, it's a good idea to seek legal advice.\n- Languages currently provided by the package: English(en-us), Korean(ko-kr), Japanese(ja-jp).\n\n# Install\n\n```\n# all in one install\nnpm i consent-nextjs\n# separate install\nnpm i @consent-nextjs/client @consent-nexjts/ui @consent-nextjs/lang\n```\n\n- `consent-nextjs`: all in one\n- `@consent-nextjs/client`: nextjs provider, client hooks\n- `@consent-nextjs/ui`: popup, banner UI\n- `@consent-nextjs/lang`: languages\n\n# Screenshot\n\n## Popup UI\n![popup screenshot](https://github.com/rabelais88/consent-nextjs/blob/main/consent-nextjs-screenshot-popup.png?raw=true)\n\n## Banner UI\n![banner screenshot](https://github.com/rabelais88/consent-nextjs/blob/main/consent-nextjs-screenshot-banner.png?raw=true)\n\n# Get Started\n\n```tsx\n// --- consent.ts\n'use client';\nimport { initUseConsent } from 'consent-nextjs';\n// import { initUseConsent } from '@consent-nextjs/client';\n\nexport const { useConsent } = initUseConsent();\n\n// --- components/Popup.tsx\nimport { PopupConsent, enUS } from 'consent-nextjs';\n// import { enUS } from '@consent-nextjs/lang';\n// import { PopupConsent } from '@consent-nextjs/ui/PopupConsent';\n// import { BannerConsent } from '@consent-nextjs/ui/BannerConsent';\nimport { useConsent } from './consent';\n\nconst Popup = () =\u003e {\n  const { consentState, onRejectClick, onConsentClick } = useConsent();\n  const showPopup = consentState.consent === 'idle' \u0026\u0026 consentState.showPopup;\n\n  if (!showPopup) return null;\n  return (\n    \u003cdiv data-comp=\"consent-nextjs-overlay\"\u003e\n      \u003cPopupConsent\n        areaTop={\u003cb\u003e{enUS.title}\u003c/b\u003e}\n        areaBottom={\n          \u003c\u003e\n            \u003ca href=\"/privacy\" style={{ textAlign: 'center' }}\u003e\n              Privacy Policy\n            \u003c/a\u003e\n            \u003cbutton onClick={() =\u003e onConsentClick()}\u003e{enUS.buttonConsent}\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e onRejectClick()}\u003e{enUS.buttonReject}\u003c/button\u003e\n          \u003c/\u003e\n        }\n      \u003e\n        {enUS.consentGeneral}\n      \u003c/PopupConsent\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Popup;\n\n// --- components/ClientProvider.tsx\n'use client';\nimport { ConsentProvider } from 'consent-nextjs';\n// import { ConsentProvider } from '@consent-nextjs/client';\nimport dynamic from 'next/dynamic';\nimport Script from 'next/script';\nimport { PropsWithChildren } from 'react';\nconst Popup = dynamic(() =\u003e import('./Popup'), { ssr: false });\n\nconst ClientProvider = ({ children }: PropsWithChildren) =\u003e {\n  return (\n    \u003cConsentProvider\n      scriptSlots={\n        {/* scripts are automatically enabled when user consents */}\n        \u003c\u003e\n          \u003cScript id=\"google-ga\" /\u003e\n          \u003cScript id=\"some-ad\" /\u003e\n        \u003c/\u003e\n      }\n    \u003e\n      {children}\n      \u003cPopup /\u003e\n    \u003c/ConsentProvider\u003e\n  );\n};\n\nexport default ClientProvider;\n\n// --- layout.tsx\n// default theme, dark and light\nimport 'consent-nextjs/ui/style-popup.css';\nimport 'consent-nextjs/ui/style-overlay.css';\nconst Layout = () =\u003e {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cClientProvider\u003e{children}\u003c/ClientProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n};\n```\n\n# Alternative/Banner Style UI\n\n```jsx\nimport { enUS } from '@consent-nextjs/lang';\nimport { BannerConsent } from 'consent-nextjs';\n// import { BannerConsent } from '@consent-nextjs/ui/BannerConsent';\nimport { useConsent } from './consent';\nconst Popup = () =\u003e {\n  const { consentState, onRejectClick, onConsentClick } = useConsent();\n  const showPopup = consentState.consent === 'idle' \u0026\u0026 consentState.showPopup;\n\n  if (!showPopup) return null;\n  return (\n    \u003cdiv data-comp=\"consent-nextjs-overlay\"\u003e\n      \u003cBannerConsent\n        areaControl={\n          \u003c\u003e\n            \u003cbutton onClick={() =\u003e onConsentClick()}\u003e{enUS.buttonConsent}\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e onRejectClick()}\u003e{enUS.buttonReject}\u003c/button\u003e\n          \u003c/\u003e\n        }\n      \u003e\n        \u003c\u003e\n          \u003cp\u003e{enUS.consentGeneral}\u003c/p\u003e\n          \u003ca href=\"/privacy\" style={{ textAlign: 'center' }}\u003ePrivacy Policy\u003c/a\u003e\n        \u003c/\u003e\n      \u003c/BannerConsent\u003e\n    \u003c/div\u003e\n  );\n};\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frabelais88%2Fconsent-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frabelais88%2Fconsent-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frabelais88%2Fconsent-nextjs/lists"}