Next.js Integration Guide

Overview

Welcome to our guide on integrating Concord into a Next.js application. We make it easy to integrate Concord into your Next.js applications in just a few minutes and this guide will help you get up and running quickly. This guide includes the following information:

• Initial Concord configuration.
• Google Consent Mode V2 configuration.
• Integrating Concord into a Next.js application.

Getting Started With Concord

As part of the initial onboarding process that occurs when you set up a new organization or project in Concord, you will be able to choose your preferred consent settings, including the Consent Mode (Implied vs. Express), the Blocking mode (how trackers like cookies, scripts, iFrames, etc. are processed and blocked), the Google Consent Mode V2 setting, the Consent Duration (how long consent lasts), and other options (Sensitive Information consent, Do Not Sell, Global Privacy Control, etc.).

During that process, we provide sensible defaults that are recommended as the default global settings, but those settings can always be adjusted and additional regions can also be added and customized later in all paid plans.

For more details on this process or to complete it for the first time, please follow the instructions in this guide: Getting Started

If you utilize Google services like Google Analytics, Google Tag Manager, or Google Ads, we also recommend configuring and verifying Google Consent Mode V2, which allows you to adjust how and when data is shared with Google based on user consent collected via the Concord Consent Banner & Privacy Center.

To learn more about Google Consent Mode V2 and the recommended settings, please refer to this document: Understanding & Configuring Google Consent Mode (GCM) V2

Integrating Concord Into a Next.js Application

The final step is to Integrate Concord into your Next.js application, which typically takes just a few minutes. Please follow the instructions below to complete this part of the process using the latest version of Next.js and the app router:

1. Login to your Concord organization and go to Deployment → Installation → Install Concord and locate and copy the Project ID for the project you want to add to your Next.js application (projects can be changed via the Projects selector in the page header if needed).

2. In your Next.js application open your layout.tsx/layout.js file. In this example, we have created a standard Next.js application via Create Next App so the file is in the root of the app folder.

3. Choose how to load Concord. We recommend a plain script at the top of your root layout's <head>, the same way Concord installs on every other platform. Concord's automatic blocking works with every option below. The earlier Concord loads, the more trackers it can catch before they send a request, so loading it first gives you the best coverage. Next.js also offers two next/script options, covered under Other Loading Options:

4. Add the Concord script to the <head> of your root layout (app/layout.tsx), using the Project ID you copied above:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://api.concord.tech" />
        <script
          id="concord-consent"
          src={`https://api.concord.tech/site-v1/${process.env.NEXT_PUBLIC_CONCORD_ID}/site-client`}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

• Note: keep it first in <head>, above any other script, and don't add async or defer, so Concord loads before your other scripts.
• Note: store the ID you copied above in an environment variable (for example NEXT_PUBLIC_CONCORD_ID) rather than hardcoding it. In Next.js the NEXT_PUBLIC_ prefix is what exposes the value to the browser.
• Note: if your project uses eslint-config-next, its @next/next/no-sync-scripts rule flags this line. Add {/* eslint-disable-next-line @next/next/no-sync-scripts */} on the line above the script.
• Note: in most cases no further work is required. Concord automatically detects and blocks most common marketing, analytics, and advertising trackers, including scripts that dynamically inject other scripts via document.createElement. Occasionally an inline or problematic script fires a network request before Concord can intercept it and needs additional handling; wrap it using the Manually Blocking Trackers Before Consent guide.
• Note: if you load third-party tags through Google Tag Manager, you can also gate them on consent inside GTM using Concord's Google Consent Mode V2 integration. See Conditionally Load Third-Party Tags in GTM.

Other Loading Options

If you prefer Next.js's next/script component, Concord works with either of these strategies. Import Script first:

import Script from 'next/script';

beforeInteractive

Next.js suggests beforeInteractive for consent managers. Concord loads as Next.js starts the page, ahead of scripts you add with the other next/script strategies.

<Script
  id="concord-consent"
  strategy="beforeInteractive"
  src={`https://api.concord.tech/site-v1/${process.env.NEXT_PUBLIC_CONCORD_ID}/site-client`}
/>

• Note: beforeInteractive only works from the root layout (app/layout.tsx), not an individual page. See the Next.js Script docs.
• Note: keep the preconnect from step 4 in your <head>.

afterInteractive

afterInteractive is the Next.js default. It loads Concord once the page is interactive and can live in any page or layout. Choose it when page speed comes first, and gate your other scripts on Concord's concord-ready event or load them through Google Tag Manager so Concord's blocking covers them.

<Script
  id="concord-consent"
  strategy="afterInteractive"
  src={`https://api.concord.tech/site-v1/${process.env.NEXT_PUBLIC_CONCORD_ID}/site-client`}
/>

If you are unsure which option fits your setup, contact support and we will help you evaluate it.

5. Deploy your application and open it in your browser. Confirm Concord is running: the consent banner appears, or typing window.concord in the browser's developer console returns an object.

6. Go back to Concord to verify your integration under Deployment → Installation → Install Concord. If successfully added and deployed, you should see "Recent Data Detected" in the upper right corner of the Direct Integrations section:

Congratulations. You have successfully integrated Concord into your Next.js application and any future changes to your attached project in Concord will be automatically synced to your application.