@c15t/nextjs
Version:
Developer-first CMP for Next.js: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization.
134 lines (100 loc) • 5.4 kB
Markdown
<p align="center">
<a href="https://c15t.com?utm_source=github&utm_medium=repopage_%40c15t%2Fnextjs" target="_blank" rel="noopener noreferrer">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="../../docs/assets/c15t-banner-readme-dark.svg" type="image/svg+xml">
<img src="../../docs/assets/c15t-banner-readme-light.svg" alt="c15t Banner" type="image/svg+xml">
</picture>
</a>
<br />
<h1 align="center">@c15t/nextjs: Next.js Integration</h1>
</p>
[](https://github.com/c15t/c15t)
[](https://github.com/c15t/c15t/actions/workflows/ci.yml)
[](https://github.com/c15t/c15t/blob/main/LICENSE.md)
[](https://c15t.com/discord)
[](https://www.npmjs.com/package/@c15t/nextjs)
[](https://github.com/c15t/c15t)
[](https://github.com/c15t/c15t/commits/main)
[](https://github.com/c15t/c15t/issues)
Developer-first CMP for Next.js: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization
## Key Features
- Works with Next.js 15, 14, and 13
- Full 'use client' support for React Server Components
- Server-side rendering support for both app and pages routers
- Automatic GDPR, CCPA, and LGPD compliance
- Minimal configuration with TypeScript-first design
- Headless, customisable UI components (Cookie Banner, Consent Dialog, etc.)
- Built-in internationalisation support
- Seamless consent storage and tracking
## Prerequisites
- Next.js 13.5.4 or later
- React 18 or later
- Node.js 18.17.0 or later
- A hosted [c15t instance](https://consent.io) (free sign-up) or [self-hosted deployment](https://c15t.com/docs/self-host/v2)
## Quick Start
Easiest setup with @c15t/cli:
```bash
# Generate schema and code
pnpm dlx @c15t/cli generate
# Alternatives:
# npx @c15t/cli generate
# bunx --bun @c15t/cli generate
```
The CLI will:
- Install necessary packages
- Configure your c15t instance
- Set up environment variables
- Add consent management components to your app
## Manual Installation
```bash
pnpm add @c15t/nextjs
```
To manually install, follow the guide in our [docs – manual setup](https://c15t.com/docs/frameworks/nextjs/quickstart#manual-setup).
## Usage
1. Import `ConsentManagerProvider` in your app's root layout
2. Add `CookieBanner` and `ConsentManagerDialog` components
3. Customise styling and behaviour to fit your app
4. For full implementation details, see the [Next.js quickstart docs](https://c15t.com/docs/frameworks/next/quickstart)
```tsx
// app/layout.tsx
import { ConsentManagerProvider, CookieBanner } from '@c15t/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ConsentManagerProvider>
{children}
<CookieBanner />
</ConsentManagerProvider>
</body>
</html>
)
}
```
## Documentation
For further information, guides, and examples visit the [reference documentation](https://c15t.com/docs/frameworks/next/quickstart).
## Support
- Join our [Discord community](https://c15t.com/discord)
- Open an issue on our [GitHub repository](https://github.com/c15t/c15t/issues)
- Visit [consent.io](https://consent.io) and use the chat widget
- Contact our support team via email [support@consent.io](mailto:support@consent.io)
## Contributing
- We're open to all community contributions!
- Read our [Contribution Guidelines](https://c15t.com/docs/oss/contributing)
- Review our [Code of Conduct](https://c15t.com/docs/oss/code-of-conduct)
- Fork the repository
- Create a new branch for your feature
- Submit a pull request
- **All contributions, big or small, are welcome and appreciated!**
## Security
If you believe you have found a security vulnerability in c15t, we encourage you to **_responsibly disclose this and NOT open a public issue_**. We will investigate all legitimate reports.
Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. To do this, please visit [https://github.com/c15t/c15t/security](https://github.com/c15t/c15t/security) and click the "Report a vulnerability" button.
### Security Policy
- Please do not share security vulnerabilities in public forums, issues, or pull requests
- Provide detailed information about the potential vulnerability
- Allow reasonable time for us to address the issue before any public disclosure
- We are committed to addressing security concerns promptly and transparently
## License
[GNU General Public License v3.0](https://github.com/c15t/c15t/blob/main/LICENSE.md)
---
**Built with ❤️ by the [consent.io](https://www.consent.io?utm_source=github&utm_medium=repopage_%40c15t%2Fnextjs) team**