Skip to main content

add-new-layout-component-nextjs-steps

tip

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

  1. Copy the file /src/components/Layout.jsx to /src/components/HomeLayout.jsx.

  2. Open the new file in a text editor.

  3. Make the following changes:

    import Head from "next/head";

    import Body from "./Body";
    import Footer from "./Footer";

    export default function HomeLayout({ fields }) {
    const { title } = fields;
    ...
  4. Make the following changes:

    import Head from "next/head";

    import Body from "./Body";
    import Footer from "./Footer";

    import { Personalize } from '@uniformdev/context-react';
    ...
  5. Make the following changes:

    import Head from "next/head";

    import Body from "./Body";
    import Footer from "./Footer";

    import { Personalize } from '@uniformdev/context-react';
    import variants from "../../content/home-variants.json";
    ...
  6. Make the following changes:

    ...
    export default function HomeLayout({ fields }) {
    const { title } = fields;
    return (
    <div className="container">
    <Head>
    <title>{title}</title>
    <link rel="icon" href="/favicon.ico" />
    </Head>
    <Personalize
    variations={variants}
    name="bodyPersonalized"
    component={Body}
    />
    <Footer />
    </div>
    );
    }