Skip to main content

Next.js

This section guides you through the process of activating Uniform Canvas in a web app using Next.js.

tip

You can catch up with the previous steps using the following links. Be sure to set the environment variables in the file .env

  • StackBlitz - Open the code in a web container that runs entirely in your browser.
  • GitHub - Clone the repo on your own machine.

Add npm packages​

  1. Open a CLI in the root of the web application.

  2. Enter the following command:

    npm install @uniformdev/canvas @uniformdev/canvas-react
    About this command

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

Update API key​

You have already created an API key, but that API key only has access to Uniform Context. You must add Uniform Canvas rights to the API key.

  1. In the Uniform dashboard, click the Uniform logo to return to the dashboard home page.

  2. Navigate to Settings > API Keys

  3. Click Change

  4. Click Uniform Context to select all of the permissions in that section.

  5. Click Save

    tip

    You might need to scroll down to find the Save button.

Add personalized content​

Edit the following file:

/lib/content.json
[
  {
    "id": "home",
    "url": "/",
    "fields": {
      "title": "Home",
      "description": "As you navigate around, content will change."
    }
  },
  {
    "id": "home-for-architecture",
    "fields": {
      "title": "Home",
      "description": "You triggered the architecture signal."
    }
  },
  {
    "id": "development",
    "url": "/development",
  ...
About this change

This adds the data that is used when personalization is activated.

Add enhancer​

In this example, the business user specifies the content id for the component (either home or home-for-architecture), but the front-end also needs the fields from the data file. An enhancer is the component that reads that additional data and makes it available to the front-end component.

Add the following file:

/lib/enhancer.js
import { enhance, EnhancerBuilder } from "@uniformdev/canvas";

import content from "../lib/content.json";

//
//Uses the parameter value from the composition
//to look up the topic from the data file. If
//the topic is found, the fields are returned.
const dataEnhancer = async ({ component }) => {
  const contentId = component?.parameters?.contentId?.value;
  if (contentId) {
    const topic = content.find((e) => e.id == contentId);
    if (topic) {
      return { ...topic.fields };
    }
  }
};

export default function doEnhance(composition) {
  const enhancers = new EnhancerBuilder().data("fields", dataEnhancer);
  return enhance({
    composition,
    enhancers,
  });
}

Add component resolver​

When you configure personalization, Uniform Context determines which component is appropriate. Context provides the front-end with the name of the component as it is defined in Uniform. This means the front-end must map the Uniform component name to React components.

Add the following file:

/lib/resolveRenderer.js
import Body from "../src/components/Body";

function UnknownComponent(component) {
  return <div>[unknown component: {component.type}]</div>;
}

export default function resolveRenderer({ type }) {
  if (type == "defaultBody") {
    return Body;
  }
  return UnknownComponent;
}

Add layout component for Canvas​

Add the following file:

/src/components/LayoutCanvas.jsx
import Head from "next/head";
import { Slot } from "@uniformdev/canvas-react";

import Footer from "./Footer";

export default function LayoutCanvas({ title }) {
  return (
    <div className="container">
      <Head>
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Slot name="body" />
      <Footer />
    </div>
  );
}

Add Canvas to the home page​

Edit the following file:

/pages/index.js
import { CanvasClient } from "@uniformdev/canvas";
import { Composition } from "@uniformdev/canvas-react";

import LayoutCanvas from "../src/components/LayoutCanvas";

import content from "../lib/content.json";
import doEnhance from "../lib/enhancer";
import resolveRenderer from "../lib/resolveRenderer";

//
//Get the composition from Uniform.
async function getComposition(slug) {
  const client = new CanvasClient({
    apiKey: process.env.UNIFORM_API_KEY,
    projectId: process.env.UNIFORM_PROJECT_ID,
  });
  const { composition } = await client.getCompositionBySlug({
    slug,
  });
  return composition;
}

export async function getStaticProps() {
  const slug = "/";
  const topic = content.find((e) => e.url == slug);

  const composition = await getComposition(slug);

  await doEnhance(composition);

  //
  //Return props for the home page that
  //include the composition and content
  //required by the page components.
  return {
    props: {
      composition,
      fields: topic.fields,
    },
  };
}

export default function Home({ composition, fields }) {
  return (
    <Composition data={composition} resolveRenderer={resolveRenderer}>
      <LayoutCanvas composition={composition} fields={fields} />
    </Composition>
  );
}

Finished code​

The application with all of the steps to this point is available here:

  • StackBlitz - Open the code in a web container that runs entirely in your browser.
  • GitHub - Clone the repo on your own machine.
tip

Be sure to set the environment variables in the file .env