Make your Next.js project dynamic

npm install @apollo/client @apollo/experimental-nextjs-app-support

import {HttpLink} from "@apollo/client";
import {ApolloClient, InMemoryCache, registerApolloClient,} from "@apollo/experimental-nextjs-app-support";
 
export const {getClient, query, PreloadQuery} = registerApolloClient(() => {
    return new ApolloClient({
        cache: new InMemoryCache(),
        link: new HttpLink({
            // this needs to be an absolute url, as relative urls cannot be used in SSR
            uri: process.env.PREPR_GRAPHQL_URL,
            // you can disable result caching here if you want to
            // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
            // fetchOptions: { cache: "no-store" },
        }),
    });
});

PREPR_GRAPHQL_URL=<YOUR-PREPR-GRAPHQL-URL>

npm run dev

npm install graphql
npm install -D typescript @graphql-codegen/cli

npx graphql-code-generator init

npm install @graphql-codegen/client-preset @graphql-codegen/typescript @graphql-codegen/typescript-react-apollo @graphql-codegen/typescript-resolvers

import type {CodegenConfig} from '@graphql-codegen/cli';
 
const config: CodegenConfig = {
    overwrite: true,
    schema: "<YOUR-PREPR-GRAPHQL-URL>",
    documents: ['!src/gql/**/*', 'src/queries/**/*.{ts,tsx}'],
    generates: {
        "src/gql/": {
            preset: 'client',
            plugins: [],
            presetConfig: {
              fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
            },
            config: {
                reactApolloVersion: 3,
            },
        },
        "./graphql.schema.json": {
            plugins: ["introspection"]
        }
    }
};
 
export default config;

npm run dev

import {graphql} from '@/gql'
 
// The GetPageBySlug query uses the input a slug parameter to retrieve a specific page
export const GET_PAGE_BY_SLUG = graphql(`
    query GetPageBySlug($slug: String) {
        Page(slug: $slug) {
            _id
            title
            _slug
            stack {
                __typename
                ... on SectionImageAndText {
                    ...SectionImageAndTextFragment
                }
                ... on SectionHeader {
                    ...SectionHeaderFragment
                }
            }
        }
    }
`)
 
// A fragment for the image and text section
export const SECTION_IMAGE_AND_TEXT_FRAGMENT = graphql(`
    fragment SectionImageAndTextFragment on SectionImageAndText {
        _context {
            variant_id
            variant_key
        }
        title
        _id
        cta_button {
            ...CTAButtonFragment
        }
        align
    }
`)
 
// A fragment for the image and text section
export const SECTION_HEADER_FRAGMENT = graphql(`
    fragment SectionHeaderFragment on SectionHeader {
        _context {
            variant_id
            group_id
            variant_key
        }
        title
        image {
            url
            caption
        }
        cta_button {
            ...CTAButtonFragment
        }
        _id
    }
 
`)
 
// A fragment for the CTA button
export const CTA_BUTTON_FRAGMENT = graphql(`
    fragment CTAButtonFragment on CTAButton {
        link
        text
        internal_link {
            _slug
        }
    }
`)

npm run codegen

import HeaderSection from "@/components/HeaderSection";
import ImageAndTextSection from "@/components/ImageAndTextSection";
import {getClient} from "@/ApolloClient";
import {GetPageBySlugDocument, GetPageBySlugQuery} from "@/gql/graphql";
import {notFound} from "next/navigation";
 
async function getData(slug: string) {
    const {data} = await getClient().query<GetPageBySlugQuery>({
        query: GetPageBySlugDocument,
        variables: {
            slug: slug,
        },
        fetchPolicy: 'no-cache',
    })
 
    if (!data) {
        return notFound()
    }
    return data
}
 
// Include parameters to check the slug in the URL
export default async function Page({params}: { params: { slug: string | string[] } }) {
    let {slug} = params
 
    // Set the slug to the home page slug if there's no slug 
    if (!slug) {
        slug = '/'
    }
 
    // Add a forward slash to the slug to navigate to the correct page.
    if (slug instanceof Array) {
        slug = slug.join('/')
    }
 
    const data = await getData(slug)
    console.log(JSON.stringify(data.Page, undefined, 2))
    
    return (
        <div>
          <HeaderSection/>
          <ImageAndTextSection/>
          <ImageAndTextSection align='right'/>
          <ImageAndTextSection/>
        </div>
    );
}

import HeaderSection from "@/components/HeaderSection";
import ImageAndTextSection from "@/components/ImageAndTextSection";
import {getClient} from "@/ApolloClient";
import {GetPageBySlugDocument, GetPageBySlugQuery} from "@/gql/graphql";
import {notFound} from "next/navigation";
 
async function getData(slug: string) {
    const {data} = await getClient().query<GetPageBySlugQuery>({
        query: GetPageBySlugDocument,
        variables: {
            slug: slug,
        },
        fetchPolicy: 'no-cache',
    })
 
    if (!data) {
        return notFound()
    }
 
    return data
}
 
export default async function Page({params}: { params: { slug: string | string[] } }) {
    let {slug} = params
 
    if (!slug) {
        slug = '/'
    }
 
    if (slug instanceof Array) {
        slug = slug.join('/')
    }
 
    const data = await getData(slug)
    const elements = data.Page?.stack.map((element, index) => {
        if (element.__typename === 'SectionImageAndText') {
            return <ImageAndTextSection key={index} data={element}/>
        } else if (element.__typename === 'SectionHeader') {
            return <HeaderSection key={index} data={element}/>
        }
    })
 
    return (
        <div>
            {elements}
        </div>
    );
}