# @opencookie-dev/next > Next.js client boundary for the OpenCookie React binding Latest version **0.2.0** (published 2026-09-24) · MIT license · 0 weekly downloads ## Install ```sh npm install @opencookie-dev/next pnpm add @opencookie-dev/next yarn add @opencookie-dev/next bun add @opencookie-dev/next ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.2.0 | | Published | 2026-09-24 | | First published | 2026-09-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=20.9.0 | | Dependencies | 1 | | Unpacked size | 7.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | jacksonxly | ## Links - npm: https://www.npmjs.com/package/@opencookie-dev/next - npm.io page: https://npm.io/package/@opencookie-dev/next ## Dependencies (1) - [@opencookie-dev/react](https://npm.io/package/@opencookie-dev/react.md) ^0.2.0 ## Recent versions - 0.2.0 (latest) — 2026-09-24 - 0.1.0 — 2026-09-23 ## README # @opencookie-dev/next The Next.js client boundary for OpenCookie. This package adds the `"use client"` entry point that Next.js requires for a hook-based library and re-exports the provider and hooks from `@opencookie-dev/react`. It creates no second context and contains no consent-domain behavior. The package is tested with Next.js 16.3.2. It supports both the App Router and the Pages Router. ## App Router Keep the non-serializable external store inside a small Client Component. Do not construct it in module scope or pass it from a Server Component because its methods are functions and therefore are not serializable Client Component props. ```tsx // app/opencookie-provider.tsx "use client"; import type { OpenCookie } from "@opencookie-dev/core"; import { OpenCookieProvider } from "@opencookie-dev/next"; import { useEffect, useState, type ReactNode } from "react"; import { createOpenCookieStore } from "@/lib/opencookie"; export function OpenCookieClientProvider({ children, }: { children: ReactNode; }) { const [store] = useState(createOpenCookieStore); useEffect(() => { void store.initialize(); }, [store]); return {children}; } ``` The root layout stays a Server Component and can pass its rendered children through the client provider: ```tsx // app/layout.tsx import type { ReactNode } from "react"; import { OpenCookieClientProvider } from "./opencookie-provider"; export default function RootLayout({ children }: { children: ReactNode }) { return ( {children} ); } ``` Components that call OpenCookie hooks are Client Components: ```tsx "use client"; import type { OpenCookieSnapshot } from "@opencookie-dev/core"; import { useOpenCookieSnapshot } from "@opencookie-dev/next"; export function ConsentStatus() { const snapshot = useOpenCookieSnapshot(); return {snapshot.readiness}; } ``` ## Pages Router Install the provider once in the custom App so the same mounted store survives client-side page transitions: ```tsx // pages/_app.tsx import type { OpenCookie } from "@opencookie-dev/core"; import { OpenCookieProvider } from "@opencookie-dev/next"; import type { AppProps } from "next/app"; import { useEffect, useState } from "react"; import { createOpenCookieStore } from "@/lib/opencookie"; export default function App({ Component, pageProps }: AppProps) { const [store] = useState(createOpenCookieStore); useEffect(() => { void store.initialize(); }, [store]); return ( ); } ``` ## SSR and hydration rules `createOpenCookieStore` must be safe to call during rendering. Keep construction free of `window`, `document`, `localStorage`, cookies, current-time reads, random identifiers, and other browser-only or nondeterministic work. Load persisted consent after mount through `initialize()`. The server and the browser's first render must expose equivalent `getServerSnapshot()` values. `@opencookie-dev/react` uses React's `useSyncExternalStore` with `getServerSnapshot`, so SSR does not subscribe or read the client snapshot. Browser state is read after hydration through the normal external-store subscription. Do not silence hydration warnings or disable SSR for the banner. Fix a differing initial snapshot at its source. ## Official Next.js references Accessed 2026-08-22: - [App Router: Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components) - [`use client` directive](https://nextjs.org/docs/app/api-reference/directives/use-client) - [Hydration mismatch guidance](https://nextjs.org/docs/messages/react-hydration-error) - [Pages Router overview](https://nextjs.org/docs/pages) - [Pages Router custom App](https://nextjs.org/docs/pages/building-your-application/routing/custom-app) - [Pages Router server-side rendering](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) OpenCookie is a technical tool, not legal advice. --- _Source: https://npm.io/package/@opencookie-dev/next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._