Skip to main content

add-canvas-nextjs-steps

tip

This section guides you through the process of activating canvas by explaining each step. It takes longer to go through, but it will help you understand why each line of code is needed.

  1. Edit the following file:

    /pages/index.js
    import Layout from "../src/components/Layout";

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

    async function getComposition(slug) {
    }

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

    export default function Home({ fields }) {
    return <Layout content={content} fields={fields} />;
    }
    About this step

    This adds a function that will hold the logic needed to retrieve the composition from Uniform.

  2. Edit the following file:

    /pages/index.js
    import { CanvasClient } from "@uniformdev/canvas";
    import Layout from "../src/components/Layout";

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

    async function getComposition(slug) {
    const client = new CanvasClient({
    apiKey: process.env.UNIFORM_API_KEY,
    projectId: process.env.UNIFORM_PROJECT_ID,
    });
    }

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

    export default function Home({ fields }) {
    return <Layout content={content} fields={fields} />;
    }
    About this step

    This adds the client object used to make API calls to Uniform.

  3. Edit the following file:

    /pages/index.js
    import { CanvasClient } from "@uniformdev/canvas";
    import Layout from "../src/components/Layout";

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

    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);
    return { props: { fields: topic.fields } };
    }

    export default function Home({ fields }) {
    return <Layout content={content} fields={fields} />;
    }
    About this step

    This retrieves the composition from Uniform and returns it.

  4. Edit the following file:

    /pages/index.js
    import { CanvasClient } from "@uniformdev/canvas";
    import Layout from "../src/components/Layout";

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

    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);

    return { props: { fields: topic.fields } };
    }

    export default function Home({ fields }) {
    return <Layout content={content} fields={fields} />;
    }
    About this step

    This adds a call to the function that retrieves the composition from Uniform.

  5. Edit the following file:

    /pages/index.js
    import { CanvasClient } from "@uniformdev/canvas";
    import Layout from "../src/components/Layout";

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

    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: { fields: topic.fields } };
    }

    export default function Home({ fields }) {
    return <Layout content={content} fields={fields} />;
    }
    About this step

    This runs the enhancer, which adds data to the composition.

  6. Edit the following file:

    /pages/index.js
    import { CanvasClient } from "@uniformdev/canvas";
    import Layout from "../src/components/Layout";

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

    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({ fields }) {
    return <Layout content={content} fields={fields} />;
    }
    About this step

    This returns the props.

  7. Edit the following file:

    /pages/index.js
    import { CanvasClient } from "@uniformdev/canvas";
    import Layout from "../src/components/Layout";

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

    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 <Layout content={content} fields={fields} />;
    }
    About this step

    This makes the composition available to the React component.

  8. Edit the following file:

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

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

    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}>
    <Layout content={content} fields={fields} />
    </Composition>
    );
    }
    About this step

    This adds the Uniform component that handles composition tasks in the app.

  9. 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 "../content/content.json";
    import doEnhance from "../lib/enhancer";
    import resolveRenderer from "../lib/resolveRenderer";

    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>
    );
    }
    About this step

    This replaces the default layout component with one that is Canvas-aware.