Skip to main content

activate-classification-nextjs-complete

tip

This section gets you to activating classification as quickly as possible. It does not explain each line of code.

  1. Open a terminal window in the root of the repository.

  2. Enter the following command:

    npm install @uniformdev/context @uniformdev/context-react
    About this step

    This adds references to the packages for React apps that need to use Uniform.

  3. Enter the following command:

    npm install -D @uniformdev/cli
    About this step

    This adds a reference to the package with the Uniform CLI, which is a tool that enables you to interact with Uniform from a command-line interface. This is needed in order to download the Uniform context manifest, which provides the instructions that power the classification process.

  4. Edit the following file:

    /package.json
    {
    "name": "my-uniform-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
    "dev": "npm run download:manifest && next dev",
    "build": "npm run download:manifest && next build",
    "download:manifest": "uniform context manifest download --output ./contextManifest.json",
    ...
    About this step

    This adds a step to the Next.js dev and build processes to download the context manifest from Uniform. This manifest includes information that tells Uniform how to classify visitors. Since the app doesn't make a call back to Uniform at runtime, this information is needed at build-time. All the details the app needs are provided at build-time.

  5. Enter the following command:

    npm run download:manifest
    About this step

    This command downloads the manifest immediately. The change you made previously configured the dev script so it downloads the manifest before the web app is started, but that only takes effect the next time you start the web app. The following steps expect the manifest has already been downloaded. This means you have two options: download the manifest manually, or restart the web app.

  6. Edit the following file:

    /pages/_app.js
    import { UniformContext } from "@uniformdev/context-react";
    import { Context, enableContextDevTools } from "@uniformdev/context";

    import manifest from "../contextManifest.json";

    import "../styles/globals.css";
    import "../styles/page.css";

    const context = new Context({
    manifest,
    defaultConsent: true,
    plugins: [
    enableContextDevTools(),
    ],
    });

    function MyApp({ Component, pageProps }) {
    return (
    <UniformContext context={context}>
    <Component {...pageProps} />
    </UniformContext>
    );
    }

    export default MyApp;
    About this step

    This is the completed app file.