Using with Next.js

Contza is designed for Next.js from the ground up. At the moment, Contza does not have a Next.js specific package, so we strongly advise you to use @contza/client package when using Contza with Next.js.

See this article to learn more about Contza client.

Try out Contza Next.js Boilerplate (opens in a new tab) if you want to get started fast.

Using App Router

Server components

pages/index.tsx

import { ContzaClient } from "@contza/client";
import { ContentProvider } from "@contza/react";
 
const IndexPage = async () => {
    const contzaClient = new ContzaClient("contza-website-id", "contza-api-key");
    const content = await contzaClient.findOne("index");
 
    return (
        <ContentProvider slug="index" initialContent={content}>
           {/* Rest of the page */}
        </ContentProvider>
    );
};
 
export default IndexPage;

Client components

pages/index.tsx

"use client";
 
import { ContentProvider } from "@contza/react";
 
const IndexPage = () => {
    return (
        <ContentProvider slug="index">
           {/* Rest of the page */}
        </ContentProvider>
    );
};
 
export default IndexPage;

Using Pages Router

Server-side rendering (SSR)

pages/index.tsx

import { ContzaClient, ContzaContent } from "@contza/client";
import { ContentProvider } from "@contza/react";
import { GetServerSideProps, NextPage } from "next";
 
interface IndexPageData {
  content: ContzaContent;
}
 
const IndexPage: NextPage<IndexPageData> = ({ content }) => {
  return (
    <ContentProvider slug="index" initialContent={content}>
      {/* Rest of the page */}
    </ContentProvider>
  );
};
 
export const getServerSideProps: GetServerSideProps = async () => {
  const contzaClient = new ContzaClient("contza-website-id", "contza-api-key");
  const content = await contzaClient.findOne("index");
 
  return {
    props: {
      content,
    },
  };
};
 
export default IndexPage;

Statis Site Generation (SSG)

pages/index.tsx

import { ContzaClient, ContzaContent } from "@contza/client";
import { ContentProvider } from "@contza/react";
import { GetStaticProps, NextPage } from "next";
 
interface IndexPageData {
  content: ContzaContent;
}
 
const IndexPage: NextPage<IndexPageData> = ({ content }) => {
  return (
    <ContentProvider slug="index" initialContent={content}>
      {/* Rest of the page */}
    </ContentProvider>
  );
};
 
export const getStaticProps: GetStaticProps = async () => {
  const contzaClient = new ContzaClient("contza-website-id", "contza-api-key");
  const content = await contzaClient.findOne("index");
 
  return {
    props: {
      content,
    },
  };
};
 
export default IndexPage;

Content Provider @contza/react