@c15t/nextjs 2.0.0-rc.0 → 2.0.0-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -3
- package/client/components/consent-dialog-link.js +3 -0
- package/dist/headless.cjs +1 -1
- package/dist/iab/styles.css +12 -0
- package/dist/iab/styles.tw3.css +14 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/libs/browser-initial-data.cjs +1 -0
- package/dist/libs/browser-initial-data.js +1 -0
- package/dist/libs/initial-data.cjs +1 -1
- package/dist/libs/initial-data.js +1 -1
- package/dist/styles.css +10 -0
- package/dist/styles.tw3.css +13 -0
- package/dist/types.cjs +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.js +1 -1
- package/{dist → dist-types}/headless.d.ts +0 -1
- package/{dist → dist-types}/index.d.ts +3 -2
- package/dist-types/libs/browser-initial-data.d.ts +9 -0
- package/{dist → dist-types}/libs/initial-data.d.ts +7 -2
- package/dist-types/types.d.ts +38 -0
- package/dist-types/version.d.ts +1 -0
- package/docs/README.md +73 -0
- package/docs/building-headless-components.md +377 -0
- package/docs/callbacks.md +184 -0
- package/docs/components/consent-banner.md +269 -0
- package/docs/components/consent-dialog-link.md +59 -0
- package/docs/components/consent-dialog-trigger.md +103 -0
- package/docs/components/consent-dialog.md +177 -0
- package/docs/components/consent-manager-provider.md +425 -0
- package/docs/components/consent-widget.md +133 -0
- package/docs/components/dev-tools.md +63 -0
- package/docs/components/frame.md +73 -0
- package/docs/concepts/client-modes.md +175 -0
- package/docs/concepts/consent-categories.md +97 -0
- package/docs/concepts/consent-models.md +116 -0
- package/docs/concepts/cookie-management.md +122 -0
- package/docs/concepts/glossary.md +23 -0
- package/docs/concepts/initialization-flow.md +148 -0
- package/docs/concepts/policy-packs.md +229 -0
- package/docs/headless.md +190 -0
- package/docs/hooks/use-color-scheme.md +40 -0
- package/docs/hooks/use-consent-manager/checking-consent.md +94 -0
- package/docs/hooks/use-consent-manager/location-info.md +95 -0
- package/docs/hooks/use-consent-manager/overview.md +420 -0
- package/docs/hooks/use-consent-manager/setting-consent.md +92 -0
- package/docs/hooks/use-draggable.md +57 -0
- package/docs/hooks/use-focus-trap.md +41 -0
- package/docs/hooks/use-reduced-motion.md +35 -0
- package/docs/hooks/use-ssr-status.md +31 -0
- package/docs/hooks/use-text-direction.md +49 -0
- package/docs/hooks/use-translations.md +118 -0
- package/docs/iab/consent-banner.md +94 -0
- package/docs/iab/consent-dialog.md +134 -0
- package/docs/iab/overview.md +126 -0
- package/docs/iab/use-gvl-data.md +20 -0
- package/docs/iframe-blocking.md +107 -0
- package/docs/integrations/building-integrations.md +405 -0
- package/docs/integrations/databuddy.md +203 -0
- package/docs/integrations/google-tag-manager.md +153 -0
- package/docs/integrations/google-tag.md +122 -0
- package/docs/integrations/linkedin-insights.md +109 -0
- package/docs/integrations/meta-pixel.md +342 -0
- package/docs/integrations/microsoft-uet.md +112 -0
- package/docs/integrations/overview.md +105 -0
- package/docs/integrations/posthog.md +199 -0
- package/docs/integrations/tiktok-pixel.md +113 -0
- package/docs/integrations/x-pixel.md +143 -0
- package/docs/internationalization.md +197 -0
- package/docs/network-blocker.md +178 -0
- package/docs/optimization.md +234 -0
- package/docs/policy-packs.md +246 -0
- package/docs/quickstart.md +161 -0
- package/docs/script-loader.md +321 -0
- package/docs/server-side.md +176 -0
- package/docs/styling/classnames.md +92 -0
- package/docs/styling/color-scheme.md +82 -0
- package/docs/styling/css-variables.md +92 -0
- package/docs/styling/overview.md +456 -0
- package/docs/styling/slots.md +127 -0
- package/docs/styling/tailwind.md +113 -0
- package/docs/styling/tokens.md +216 -0
- package/docs/troubleshooting.md +146 -0
- package/iab/styles.css +1 -0
- package/package.json +38 -17
- package/readme.json +4 -0
- package/src/iab/styles.css +12 -0
- package/src/iab/styles.tw3.css +14 -0
- package/src/styles.css +10 -0
- package/src/styles.tw3.css +13 -0
- package/styles.css +1 -0
- package/dist/headless.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/libs/initial-data.d.ts.map +0 -1
- package/dist/types.d.ts +0 -16
- package/dist/types.d.ts.map +0 -1
- package/dist/version.d.ts +0 -2
- package/dist/version.d.ts.map +0 -1
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Design Tokens
|
|
3
|
+
description: The six base token categories that control colors, typography, spacing, radius, shadows, and motion, plus optional dark-mode overrides.
|
|
4
|
+
---
|
|
5
|
+
## Color Tokens
|
|
6
|
+
|
|
7
|
+
Color tokens define the palette for all consent components. Set `colors` for light mode and `dark` for dark mode overrides.
|
|
8
|
+
|
|
9
|
+
When `textOnPrimary` is omitted, c15t derives it automatically from `primary` to keep text readable on primary-filled surfaces such as stock branding tags and buttons. Set `textOnPrimary` explicitly when you need a specific foreground color.
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
const theme = {
|
|
13
|
+
colors: {
|
|
14
|
+
primary: '#6366f1',
|
|
15
|
+
primaryHover: '#4f46e5',
|
|
16
|
+
surface: '#ffffff',
|
|
17
|
+
surfaceHover: '#f9fafb',
|
|
18
|
+
border: '#e5e7eb',
|
|
19
|
+
borderHover: '#d1d5db',
|
|
20
|
+
text: '#1f2937',
|
|
21
|
+
textMuted: '#6b7280',
|
|
22
|
+
textOnPrimary: '#ffffff',
|
|
23
|
+
overlay: 'rgba(0, 0, 0, 0.5)',
|
|
24
|
+
switchTrack: '#d1d5db',
|
|
25
|
+
switchTrackActive: '#6366f1',
|
|
26
|
+
switchThumb: '#ffffff',
|
|
27
|
+
},
|
|
28
|
+
dark: {
|
|
29
|
+
primary: '#818cf8',
|
|
30
|
+
surface: '#1f2937',
|
|
31
|
+
text: '#f9fafb',
|
|
32
|
+
textMuted: '#9ca3af',
|
|
33
|
+
border: '#374151',
|
|
34
|
+
},
|
|
35
|
+
} satisfies Theme;
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### ColorTokens
|
|
39
|
+
|
|
40
|
+
|Property|Type|Description|Default|Required|
|
|
41
|
+
|:--|:--|:--|:--|:--:|
|
|
42
|
+
|primary|string \|undefined|Primary brand/accent color for interactive elements.|-|Optional|
|
|
43
|
+
|primaryHover|string \|undefined|Hover/active state for primary elements.|-|Optional|
|
|
44
|
+
|surface|string \|undefined|Main background color for panels and containers.|-|Optional|
|
|
45
|
+
|surfaceHover|string \|undefined|Hover state for surface elements.|-|Optional|
|
|
46
|
+
|border|string \|undefined|Border color for containers and inputs.|-|Optional|
|
|
47
|
+
|borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
|
|
48
|
+
|text|string \|undefined|Primary text color for headings and body.|-|Optional|
|
|
49
|
+
|textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
|
|
50
|
+
|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
|
|
51
|
+
|overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
|
|
52
|
+
|switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
|
|
53
|
+
|switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
|
|
54
|
+
|switchThumb|string \|undefined|Toggle thumb color.|-|Optional|
|
|
55
|
+
|
|
56
|
+
## Typography Tokens
|
|
57
|
+
|
|
58
|
+
Control font family, sizes, weights, and line heights.
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
const theme = {
|
|
62
|
+
typography: {
|
|
63
|
+
fontFamily: 'Inter, system-ui, sans-serif',
|
|
64
|
+
fontSize: { sm: '0.875rem', base: '1rem', lg: '1.125rem' },
|
|
65
|
+
fontWeight: { normal: 400, medium: 500, semibold: 600 },
|
|
66
|
+
lineHeight: { tight: '1.25', normal: '1.5', relaxed: '1.75' },
|
|
67
|
+
},
|
|
68
|
+
} satisfies Theme;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### TypographyTokens
|
|
72
|
+
|
|
73
|
+
|Property|Type|Description|Default|Required|
|
|
74
|
+
|:--|:--|:--|:--|:--:|
|
|
75
|
+
|fontFamily|string \|undefined|Font family for all components.|-|Optional|
|
|
76
|
+
|fontSize|Object \|undefined|Font sizes for text hierarchy.|-|Optional|
|
|
77
|
+
|fontWeight|Object \|undefined|Font weights for emphasis.|-|Optional|
|
|
78
|
+
|lineHeight|Object \|undefined|Line heights for readability.|-|Optional|
|
|
79
|
+
|
|
80
|
+
#### `fontSize`
|
|
81
|
+
|
|
82
|
+
Font sizes for text hierarchy.
|
|
83
|
+
|
|
84
|
+
|Property|Type|Description|Default|Required|
|
|
85
|
+
|:--|:--|:--|:--|:--:|
|
|
86
|
+
|sm|string \|undefined|@default '0.875rem'|-|Optional|
|
|
87
|
+
|base|string \|undefined|@default '1rem'|-|Optional|
|
|
88
|
+
|lg|string \|undefined|@default '1.125rem'|-|Optional|
|
|
89
|
+
|
|
90
|
+
#### `fontWeight`
|
|
91
|
+
|
|
92
|
+
Font weights for emphasis.
|
|
93
|
+
|
|
94
|
+
|Property|Type|Description|Default|Required|
|
|
95
|
+
|:--|:--|:--|:--|:--:|
|
|
96
|
+
|normal|number \|undefined|@default 400|-|Optional|
|
|
97
|
+
|medium|number \|undefined|@default 500|-|Optional|
|
|
98
|
+
|semibold|number \|undefined|@default 600|-|Optional|
|
|
99
|
+
|
|
100
|
+
#### `lineHeight`
|
|
101
|
+
|
|
102
|
+
Line heights for readability.
|
|
103
|
+
|
|
104
|
+
|Property|Type|Description|Default|Required|
|
|
105
|
+
|:--|:--|:--|:--|:--:|
|
|
106
|
+
|tight|string \|undefined|@default '1.25'|-|Optional|
|
|
107
|
+
|normal|string \|undefined|@default '1.5'|-|Optional|
|
|
108
|
+
|relaxed|string \|undefined|@default '1.75'|-|Optional|
|
|
109
|
+
|
|
110
|
+
## Spacing Tokens
|
|
111
|
+
|
|
112
|
+
Five-step scale for internal padding, margins, and gaps.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
const theme = {
|
|
116
|
+
spacing: {
|
|
117
|
+
xs: '0.25rem', // 4px
|
|
118
|
+
sm: '0.5rem', // 8px
|
|
119
|
+
md: '1rem', // 16px
|
|
120
|
+
lg: '1.5rem', // 24px
|
|
121
|
+
xl: '2rem', // 32px
|
|
122
|
+
},
|
|
123
|
+
} satisfies Theme;
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### SpacingTokens
|
|
127
|
+
|
|
128
|
+
|Property|Type|Description|Default|Required|
|
|
129
|
+
|:--|:--|:--|:--|:--:|
|
|
130
|
+
|xs|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
|
|
131
|
+
|sm|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
|
|
132
|
+
|md|string \|undefined|@default '1rem' (16px)|'1rem' (16px)|Optional|
|
|
133
|
+
|lg|string \|undefined|@default '1.5rem' (24px)|'1.5rem' (24px)|Optional|
|
|
134
|
+
|xl|string \|undefined|@default '2rem' (32px)|'2rem' (32px)|Optional|
|
|
135
|
+
|
|
136
|
+
## Radius Tokens
|
|
137
|
+
|
|
138
|
+
Border radius scale for rounded corners.
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
const theme = {
|
|
142
|
+
radius: {
|
|
143
|
+
sm: '0.25rem', // 4px
|
|
144
|
+
md: '0.5rem', // 8px
|
|
145
|
+
lg: '0.75rem', // 12px
|
|
146
|
+
full: '9999px', // Pill shape
|
|
147
|
+
},
|
|
148
|
+
} satisfies Theme;
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### RadiusTokens
|
|
152
|
+
|
|
153
|
+
|Property|Type|Description|Default|Required|
|
|
154
|
+
|:--|:--|:--|:--|:--:|
|
|
155
|
+
|sm|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
|
|
156
|
+
|md|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
|
|
157
|
+
|lg|string \|undefined|@default '0.75rem' (12px)|'0.75rem' (12px)|Optional|
|
|
158
|
+
|full|string \|undefined|@default '9999px'|'9999px'|Optional|
|
|
159
|
+
|
|
160
|
+
## Shadow Tokens
|
|
161
|
+
|
|
162
|
+
Box shadow scale for depth and elevation.
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
const theme = {
|
|
166
|
+
shadows: {
|
|
167
|
+
sm: '0 1px 2px hsla(0, 0%, 0%, 0.05)',
|
|
168
|
+
md: '0 4px 12px hsla(0, 0%, 0%, 0.08)',
|
|
169
|
+
lg: '0 8px 24px hsla(0, 0%, 0%, 0.12)',
|
|
170
|
+
},
|
|
171
|
+
} satisfies Theme;
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### ShadowTokens
|
|
175
|
+
|
|
176
|
+
|Property|Type|Description|Default|Required|
|
|
177
|
+
|:--|:--|:--|:--|:--:|
|
|
178
|
+
|sm|string \|undefined|@default '0 1px 2px hsla(0, 0%, 0%, 0.05)'|'0 1px 2px hsla(0, 0%, 0%, 0.05)'|Optional|
|
|
179
|
+
|md|string \|undefined|@default '0 4px 12px hsla(0, 0%, 0%, 0.08)'|'0 4px 12px hsla(0, 0%, 0%, 0.08)'|Optional|
|
|
180
|
+
|lg|string \|undefined|@default '0 8px 24px hsla(0, 0%, 0%, 0.12)'|'0 8px 24px hsla(0, 0%, 0%, 0.12)'|Optional|
|
|
181
|
+
|
|
182
|
+
## Motion Tokens
|
|
183
|
+
|
|
184
|
+
Animation duration and easing presets.
|
|
185
|
+
|
|
186
|
+
```tsx
|
|
187
|
+
const theme = {
|
|
188
|
+
motion: {
|
|
189
|
+
duration: { fast: '100ms', normal: '200ms', slow: '300ms' },
|
|
190
|
+
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
191
|
+
easingOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
|
192
|
+
easingInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
|
|
193
|
+
easingSpring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
194
|
+
},
|
|
195
|
+
} satisfies Theme;
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### MotionTokens
|
|
199
|
+
|
|
200
|
+
|Property|Type|Description|Default|Required|
|
|
201
|
+
|:--|:--|:--|:--|:--:|
|
|
202
|
+
|duration|Object \|undefined|Duration presets for transitions.|-|Optional|
|
|
203
|
+
|easing|string \|undefined|Default CSS easing function for general animation curves.|'cubic-bezier(0.4, 0, 0.2, 1)'|Optional|
|
|
204
|
+
|easingOut|string \|undefined|CSS easing function for enter/exit animations. Use for modals, tooltips, dropdowns, and any element entering or exiting.|'cubic-bezier(0.215, 0.61, 0.355, 1)'|Optional|
|
|
205
|
+
|easingInOut|string \|undefined|CSS easing function for on-screen movement. Use when elements already on screen need to move or morph.|'cubic-bezier(0.645, 0.045, 0.355, 1)'|Optional|
|
|
206
|
+
|easingSpring|string \|undefined|CSS easing function with spring-like overshoot. Use for playful, bouncy animations.|'cubic-bezier(0.34, 1.56, 0.64, 1)'|Optional|
|
|
207
|
+
|
|
208
|
+
#### `duration`
|
|
209
|
+
|
|
210
|
+
Duration presets for transitions.
|
|
211
|
+
|
|
212
|
+
|Property|Type|Description|Default|Required|
|
|
213
|
+
|:--|:--|:--|:--|:--:|
|
|
214
|
+
|fast|string \|undefined|@default '100ms'|-|Optional|
|
|
215
|
+
|normal|string \|undefined|@default '200ms'|-|Optional|
|
|
216
|
+
|slow|string \|undefined|@default '300ms'|-|Optional|
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Troubleshooting
|
|
3
|
+
description: Solutions for common issues with @c15t/nextjs — provider errors, missing banners, consent persistence, and more.
|
|
4
|
+
---
|
|
5
|
+
## "Provider not found" Error
|
|
6
|
+
|
|
7
|
+
**Symptom:** `useConsentManager must be used within a ConsentManagerProvider` error.
|
|
8
|
+
|
|
9
|
+
**Fix:** Ensure the component calling `useConsentManager()` (or any c15t hook) is rendered inside a `ConsentManagerProvider`:
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
// Wrong — hook is outside the provider
|
|
13
|
+
function App() {
|
|
14
|
+
const { consents } = useConsentManager(); // throws
|
|
15
|
+
return <ConsentManagerProvider options={...}>...</ConsentManagerProvider>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Correct — hook is inside the provider
|
|
19
|
+
function App() {
|
|
20
|
+
return (
|
|
21
|
+
<ConsentManagerProvider options={...}>
|
|
22
|
+
<MyComponent /> {/* useConsentManager works here */}
|
|
23
|
+
</ConsentManagerProvider>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Banner Doesn't Show
|
|
29
|
+
|
|
30
|
+
**Possible causes:**
|
|
31
|
+
|
|
32
|
+
1. **Opt-out jurisdiction** — In CCPA/opt-out regions, the banner is not shown because tracking is allowed by default. Check `model` from `useConsentManager()` — if it's `'opt-out'`, the banner is intentionally hidden.
|
|
33
|
+
|
|
34
|
+
2. **Consent already given** — If the user has already made a consent choice, the banner won't reappear. Clear cookies or use `resetConsents()` to test again.
|
|
35
|
+
|
|
36
|
+
3. **`activeUI` is `'none'`** — Something is explicitly setting `activeUI` to `'none'`. Check the DevTools panel for the current consent state.
|
|
37
|
+
|
|
38
|
+
4. **Backend not responding** — In `'c15t'` mode, the banner waits for the backend `/init` response. Check the Network tab for failed requests to your `backendURL`.
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
// Debug: check what the consent manager sees
|
|
42
|
+
const { activeUI, model, isLoadingConsentInfo } = useConsentManager();
|
|
43
|
+
console.log({ activeUI, model, isLoadingConsentInfo });
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Consent Not Persisting
|
|
47
|
+
|
|
48
|
+
**Symptom:** Consent is lost after page reload.
|
|
49
|
+
|
|
50
|
+
**Possible causes:**
|
|
51
|
+
|
|
52
|
+
1. **Incognito/private mode** — Some browsers restrict cookie storage in private browsing.
|
|
53
|
+
|
|
54
|
+
2. **Cookie settings** — In `'offline'` mode, consent is stored in cookies. Ensure cookies are not being blocked by browser settings or extensions.
|
|
55
|
+
|
|
56
|
+
3. **Different domains** — Cookies are domain-scoped. If your dev server uses a different domain than production, consent won't carry over.
|
|
57
|
+
|
|
58
|
+
4. **Backend errors** — In `'c15t'` mode, check that the backend is saving consent successfully. Enable `debug: true` in provider options to see detailed logs.
|
|
59
|
+
|
|
60
|
+
## Scripts Not Loading
|
|
61
|
+
|
|
62
|
+
**Symptom:** Third-party scripts configured in the `scripts` option don't load after consent is granted.
|
|
63
|
+
|
|
64
|
+
**Checklist:**
|
|
65
|
+
|
|
66
|
+
1. **Wrong category name** — The `category` on the script must match one of the `consentCategories` names. For example, `'measurement'` not `'analytics'`.
|
|
67
|
+
|
|
68
|
+
2. **Consent condition not met** — Use `has('measurement')` to verify the category is actually consented.
|
|
69
|
+
|
|
70
|
+
3. **Script error** — Check the browser DevTools Console for script loading errors. The `onError` callback can help debug:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
{
|
|
74
|
+
id: 'analytics',
|
|
75
|
+
src: 'https://...',
|
|
76
|
+
category: 'measurement',
|
|
77
|
+
onError: ({ error }) => console.error('Script failed:', error),
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
4. **Ad blocker** — Browser extensions may block the script regardless of consent. The `anonymizeId` option (default: `true`) helps avoid pattern-based blocking.
|
|
82
|
+
|
|
83
|
+
## SSR Hydration Mismatch
|
|
84
|
+
|
|
85
|
+
**Symptom:** React hydration warnings, consent banner flashes briefly, or consent state differs between server and client.
|
|
86
|
+
|
|
87
|
+
**Fixes:**
|
|
88
|
+
|
|
89
|
+
1. **Missing `ssrData`** — Ensure you're passing the SSR data Promise to the provider. Do **not** `await` `fetchInitialData()` in Server Components:
|
|
90
|
+
|
|
91
|
+
```tsx title="app/layout.tsx"
|
|
92
|
+
import { fetchInitialData } from '@c15t/nextjs';
|
|
93
|
+
import ConsentManager from '@/components/consent-manager';
|
|
94
|
+
|
|
95
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
96
|
+
const ssrData = fetchInitialData({ backendURL: '/api/c15t' });
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<html lang="en">
|
|
100
|
+
<body>
|
|
101
|
+
<ConsentManager ssrData={ssrData}>
|
|
102
|
+
{children}
|
|
103
|
+
</ConsentManager>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
2. **Stale cache** — If using a CDN or caching layer, ensure the SSR data is fresh per-request and not shared across users.
|
|
111
|
+
|
|
112
|
+
3. **Debug with `useSSRStatus`** — Check if SSR data was actually consumed:
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
const { ssrDataUsed, ssrSkippedReason } = useSSRStatus();
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
See [Server-Side Data Fetching](/docs/frameworks/next/server-side) for full SSR setup.
|
|
119
|
+
|
|
120
|
+
## TypeScript Errors
|
|
121
|
+
|
|
122
|
+
**Common import issues:**
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
// Components and hooks — main entry point
|
|
126
|
+
import { ConsentManagerProvider, useConsentManager } from '@c15t/nextjs';
|
|
127
|
+
|
|
128
|
+
// Server-side data fetching
|
|
129
|
+
import { fetchInitialData } from '@c15t/nextjs';
|
|
130
|
+
|
|
131
|
+
// Headless (hooks only, no components)
|
|
132
|
+
import { useConsentManager } from '@c15t/nextjs/headless';
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
If you see type errors after updating, try:
|
|
136
|
+
|
|
137
|
+
```sh
|
|
138
|
+
rm -rf node_modules/.cache
|
|
139
|
+
bun install
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Still Stuck?
|
|
143
|
+
|
|
144
|
+
* Enable `debug: true` in provider options for verbose console logging
|
|
145
|
+
* Use the [DevTools](/docs/frameworks/next/components/dev-tools) panel to inspect live consent state
|
|
146
|
+
* Check the [GitHub issues](https://github.com/c15t/c15t/issues) for known bugs
|
package/iab/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "../dist/iab/styles.css";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c15t/nextjs",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.10",
|
|
4
4
|
"description": "Developer-first CMP for Next.js: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"nextjs",
|
|
@@ -26,48 +26,69 @@
|
|
|
26
26
|
"url": "https://github.com/c15t/c15t.git",
|
|
27
27
|
"directory": "packages/nextjs"
|
|
28
28
|
},
|
|
29
|
-
"license": "
|
|
30
|
-
"sideEffects":
|
|
29
|
+
"license": "Apache-2.0",
|
|
30
|
+
"sideEffects": [
|
|
31
|
+
"**/*.css"
|
|
32
|
+
],
|
|
31
33
|
"type": "module",
|
|
32
34
|
"exports": {
|
|
35
|
+
"./styles.css": "./dist/styles.css",
|
|
36
|
+
"./styles.tw3.css": "./dist/styles.tw3.css",
|
|
37
|
+
"./iab/styles.css": "./dist/iab/styles.css",
|
|
38
|
+
"./iab/styles.tw3.css": "./dist/iab/styles.tw3.css",
|
|
33
39
|
"./headless": {
|
|
34
|
-
"types": "./dist/headless.d.ts",
|
|
40
|
+
"types": "./dist-types/headless.d.ts",
|
|
35
41
|
"import": "./dist/headless.js",
|
|
36
42
|
"require": "./dist/headless.cjs"
|
|
37
43
|
},
|
|
44
|
+
"./components/consent-dialog-link": {
|
|
45
|
+
"types": "./dist-types/index.d.ts",
|
|
46
|
+
"import": "./client/components/consent-dialog-link.js",
|
|
47
|
+
"require": "./dist/index.cjs"
|
|
48
|
+
},
|
|
38
49
|
".": {
|
|
39
|
-
"types": "./dist/index.d.ts",
|
|
50
|
+
"types": "./dist-types/index.d.ts",
|
|
40
51
|
"import": "./dist/index.js",
|
|
41
52
|
"require": "./dist/index.cjs"
|
|
42
53
|
}
|
|
43
54
|
},
|
|
44
55
|
"main": "./dist/index.js",
|
|
45
|
-
"module": "./dist/index.
|
|
46
|
-
"types": "./dist/index.d.ts",
|
|
56
|
+
"module": "./dist/index.js",
|
|
57
|
+
"types": "./dist-types/index.d.ts",
|
|
47
58
|
"files": [
|
|
48
|
-
"dist"
|
|
59
|
+
"dist",
|
|
60
|
+
"docs",
|
|
61
|
+
"dist-types",
|
|
62
|
+
"client",
|
|
63
|
+
"styles.css",
|
|
64
|
+
"iab",
|
|
65
|
+
"src/styles.css",
|
|
66
|
+
"src/styles.tw3.css",
|
|
67
|
+
"src/iab/styles.css",
|
|
68
|
+
"src/iab/styles.tw3.css"
|
|
49
69
|
],
|
|
50
70
|
"scripts": {
|
|
51
71
|
"prebuild": "genversion --esm --semi src/version.ts",
|
|
52
|
-
"build": "bun prebuild && rslib build",
|
|
72
|
+
"build": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs && bun scripts/generate-distribution-css.ts && bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/nextjs",
|
|
73
|
+
"build:agent-docs": "bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/nextjs",
|
|
53
74
|
"check-types": "bun prebuild && tsc --noEmit",
|
|
54
|
-
"dev": "bun prebuild && rslib build",
|
|
75
|
+
"dev": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs && bun scripts/generate-distribution-css.ts",
|
|
55
76
|
"fmt": "bun biome format --write . && bun biome check --formatter-enabled=false --linter-enabled=false --write",
|
|
56
77
|
"lint": "bun biome lint ./src",
|
|
78
|
+
"prepack": "cd ../.. && bunx turbo run build --filter=@c15t/nextjs",
|
|
57
79
|
"test": "bun prebuild && vitest run --passWithNoTests",
|
|
58
80
|
"test:watch": "bun prebuild && vitest --passWithNoTests"
|
|
59
81
|
},
|
|
60
82
|
"dependencies": {
|
|
61
|
-
"@c15t/react": "
|
|
62
|
-
"@c15t/translations": "
|
|
63
|
-
"c15t": "
|
|
83
|
+
"@c15t/react": "2.0.0-rc.10",
|
|
84
|
+
"@c15t/translations": "2.0.0-rc.8",
|
|
85
|
+
"c15t": "2.0.0-rc.10"
|
|
64
86
|
},
|
|
65
87
|
"devDependencies": {
|
|
66
|
-
"@c15t/
|
|
67
|
-
"@c15t/
|
|
68
|
-
"@c15t/vitest-config": "workspace:*",
|
|
88
|
+
"@c15t/typescript-config": "0.0.1-beta.1",
|
|
89
|
+
"@c15t/vitest-config": "1.0.0",
|
|
69
90
|
"genversion": "3.2.0",
|
|
70
|
-
"typescript": "
|
|
91
|
+
"typescript": "6.0.2"
|
|
71
92
|
},
|
|
72
93
|
"peerDependencies": {
|
|
73
94
|
"next": "^16.0.0 || ^15.0.0 || ^14.0.0 || ^13.0.0",
|
package/readme.json
CHANGED
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
"",
|
|
22
22
|
"```bash\npnpm add @c15t/nextjs\n```",
|
|
23
23
|
"",
|
|
24
|
+
"Then add the prebuilt stylesheet to your app-level CSS entrypoint:",
|
|
25
|
+
"",
|
|
26
|
+
"```css\n/* app/globals.css */\n@import \"@c15t/nextjs/styles.css\";\n```",
|
|
27
|
+
"",
|
|
24
28
|
"To manually install, follow the guide in our [docs – manual setup](https://c15t.com/docs/frameworks/nextjs/quickstart#manual-setup)."
|
|
25
29
|
],
|
|
26
30
|
"usage": [
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @c15t/nextjs — IAB TCF component styles.
|
|
3
|
+
*
|
|
4
|
+
* Add this stylesheet to the same global CSS entrypoint as your base c15t styles
|
|
5
|
+
* when using IAB consent components in Next.js. Do not import either stylesheet
|
|
6
|
+
* from JS/TSX.
|
|
7
|
+
*
|
|
8
|
+
* Usage (app/globals.css):
|
|
9
|
+
* @import "@c15t/nextjs/styles.css";
|
|
10
|
+
* @import "@c15t/nextjs/iab/styles.css";
|
|
11
|
+
*/
|
|
12
|
+
@import "@c15t/react/iab/styles.css";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @c15t/nextjs/iab — Tailwind 3-compatible IAB component styles.
|
|
3
|
+
*
|
|
4
|
+
* Add this stylesheet to the same global CSS entrypoint as your base c15t styles.
|
|
5
|
+
* Do not import either stylesheet from JS/TSX files.
|
|
6
|
+
*
|
|
7
|
+
* Usage (app/globals.css):
|
|
8
|
+
* @tailwind base;
|
|
9
|
+
* @tailwind components;
|
|
10
|
+
* @import "@c15t/nextjs/styles.tw3.css";
|
|
11
|
+
* @import "@c15t/nextjs/iab/styles.tw3.css";
|
|
12
|
+
* @tailwind utilities;
|
|
13
|
+
*/
|
|
14
|
+
@import "@c15t/react/iab/styles.tw3.css";
|
package/src/styles.css
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @c15t/nextjs — Non-IAB prebuilt component styles.
|
|
3
|
+
*
|
|
4
|
+
* Import this stylesheet once from your app-level CSS entrypoint when using
|
|
5
|
+
* prebuilt (styled) consent components.
|
|
6
|
+
*
|
|
7
|
+
* Usage (app/globals.css):
|
|
8
|
+
* @import "@c15t/nextjs/styles.css";
|
|
9
|
+
*/
|
|
10
|
+
@import "@c15t/react/styles.css";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @c15t/nextjs — Tailwind 3-compatible prebuilt component styles.
|
|
3
|
+
*
|
|
4
|
+
* Import this stylesheet in the same global CSS entrypoint as Tailwind 3,
|
|
5
|
+
* after `@tailwind components;` and before `@tailwind utilities;`.
|
|
6
|
+
*
|
|
7
|
+
* Usage (app/globals.css):
|
|
8
|
+
* @tailwind base;
|
|
9
|
+
* @tailwind components;
|
|
10
|
+
* @import "@c15t/nextjs/styles.tw3.css";
|
|
11
|
+
* @tailwind utilities;
|
|
12
|
+
*/
|
|
13
|
+
@import "@c15t/react/styles.tw3.css";
|
package/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "./dist/styles.css";
|
package/dist/headless.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
|
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EACX,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,GACnB,MAAM,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"initial-data.d.ts","sourceRoot":"","sources":["../../src/libs/initial-data.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAE3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAsB,gBAAgB,CACrC,OAAO,EAAE,uBAAuB,GAC9B,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CASrC"}
|
package/dist/types.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { ConsentManagerProviderProps } from '@c15t/react';
|
|
2
|
-
import type { FetchSSRDataOptionsBase } from '@c15t/react/server';
|
|
3
|
-
export type InitialDataPromise = NonNullable<ConsentManagerProviderProps['options']['store']>['ssrData'];
|
|
4
|
-
/**
|
|
5
|
-
* Options for the fetchInitialData function.
|
|
6
|
-
*
|
|
7
|
-
* @remarks
|
|
8
|
-
* Uses the base options from @c15t/react/server - headers are
|
|
9
|
-
* resolved automatically from Next.js.
|
|
10
|
-
*/
|
|
11
|
-
export type FetchInitialDataOptions = FetchSSRDataOptionsBase;
|
|
12
|
-
export interface ConsentManagerProps {
|
|
13
|
-
children: React.ReactNode;
|
|
14
|
-
ssrData?: InitialDataPromise;
|
|
15
|
-
}
|
|
16
|
-
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAC3C,2BAA2B,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAC/C,CAAC,SAAS,CAAC,CAAC;AAEb;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,uBAAuB,CAAC;AAE9D,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC7B"}
|
package/dist/version.d.ts
DELETED
package/dist/version.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,eAAe,CAAC"}
|