This guide explains how to integrate Termly’s Consent Management Platform into your Next.js application. We will create a 'Termly' component and include it based on the router type used (either pages router or app router).
Step 1: Create the Termly Component
Create a new file for your Termly CMP component in your Next.js project, e.g.: src/components/TermlyCMP.js
This component dynamically generates the Termly CMP script and appends it to the page. It uses React hooks like useEffect and useMemo to manage the lifecycle of the script and ensure it initializes properly on navigation changes:
// File: src/components/TermlyCMP.js
'use client'
import { useEffect, useMemo, useRef } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
const SCRIPT_SRC_BASE = 'https://app.termly.io'
export default function TermlyCMP({ autoBlock, masterConsentsOrigin, websiteUUID }) {
const scriptSrc = useMemo(() => {
const src = new URL(SCRIPT_SRC_BASE)
src.pathname = `/resource-blocker/${websiteUUID}`
if (autoBlock) {
src.searchParams.set('autoBlock', 'on')
}
if (masterConsentsOrigin) {
src.searchParams.set('masterConsentsOrigin', masterConsentsOrigin)
}
return src.toString()
}, [autoBlock, masterConsentsOrigin, websiteUUID])
const isScriptAdded = useRef(false)
useEffect(() => {
if (isScriptAdded.current) return
const script = document.createElement('script')
script.src = scriptSrc
document.head.appendChild(script)
isScriptAdded.current = true
}, [scriptSrc])
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
window.Termly?.initialize()
}, [pathname, searchParams])
return null
}
Step 2: Use the Termly Component Based on Your Router Type
Next.js provides two router options: pages router and app router. Follow the relevant steps based on which one your project uses.
In both router configurations, remember to replace 'Your Termly website UUID goes here' with the actual UUID from Termly's dashboard.
Using the pages Router
If your project is using the pages router, add the Termly CMP component in your app src/pages/_app.jsx.
// File: src/pages/_app.jsx
import TermlyCMP from '@/components/TermlyCMP'
const WEBSITE_UUID = 'Your Termly website UUID goes here'
export default function App({ Component, pageProps }) {
return (
<>
<TermlyCMP websiteUUID={WEBSITE_UUID} />
<Component {...pageProps} />
</>
)
}
Here, the TermlyCMP component is embedded at the top level to ensure the banner is loaded across all pages.
Using the app Router
If your project uses the app router, add the Termly CMP component in your app layout src/app/layout.js.
// File: src/app/layout.js
import TermlyCMP from '@/components/TermlyCMP'
const WEBSITE_UUID = 'Your Termly website UUID goes here'
export default function Layout({ children }) {
return (
<html lang="en">
<body>
<TermlyCMP websiteUUID={WEBSITE_UUID} />
{children}
</body>
</html>
)
}
In this setup, the TermlyCMP component is added to the layout to ensure the consent banner is available across all routes.