Firs of all amazing work on this template, I find it really nice to use the approach you guys are using with fragments and codegen!

I'm finding it challenging to use SSG instead of SSR in such template, given the fact that each ctf-component ( some of them ) has a graphql.tsx file that does the custom fetching if provided with an id on its own that means it'll always request data from contentful on page reload?

I'm wondering if we have a very complex graphql query in each page, each page then will have nested queries and will take a while until everything loads, is there a guide somewhere to use SSG with this? also, any plans to add the new app directory?

Cheers!

First of all, congratulations for this great work on this template! The dev experience is very pleasant!

My first attempt was to create a basic component that I could use on the home page.

Despite the steps described in the README I took some time to understand what steps to follow to create a component.

It would be good to add a step by step guide to create a component from Contentful to React code.

Maybe this guide already exists and I just couldn't find it?

I wrote down the steps I followed to create my first component

Goal

Create a component with a "Title" field that can be inserted on the home page

On Contentful backoffice

1. Go to Content model → +Add content type
2. On name field → 💎 Demo component
3. On Api Identifier → componentDemo
   ( !!! This will be used in the code and it may be difficult to change it later, make sure you use a correct identifier)
4. Click “Create”
5. Click “Add a field” → Text (Name: title, field ID: title)
6. Check “This field represents the Entry title” —> Confirm —> Save
7. On “Content model” → 📜 Landing page → Top section → click on “Settings”
8. Add “💎 Demo component” to list bellow Accept only specified entry type → confirm → Save
9. On “Content” → Add entry → 💎 Demo component
10. On title → Demo Component Example
11. Click on Publish
12. On Content → Homepage → Top Section → Add existing content → Demo Component Example → Insert 1 Entry → “Publish changes”

On Code repository

Run following command

yarn run graphql-codegen:generate

Create component graphql query

src/components/features/ctf-components/ctf-demo/ctf-demo.tsx

Note that componentDemo in the query represent your Api Identifier previously defined

fragment DemoFields on ComponentDemo {
  __typename
  sys {
    id
  }
  title
}

query CtfDemo($id: String!, $locale: String, $preview: Boolean) {
  componentDemo(id: $id, locale: $locale, preview: $preview) {
    ...DemoFields
  }
}

Create Functional components

More detail here

src/components/features/ctf-components/ctf-demo/ctf-demo.tsx

the React component which is actually rendering the content type.

import { makeStyles } from '@mui/styles';
import { Theme } from '@mui/material';
import { DemoFieldsFragment } from './__generated/ctf-demo.generated';

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    marginTop: theme.spacing(8),
    marginBottom: theme.spacing(8),
    textAlign: 'center',
  },
}));

export const CtfDemo = (props: DemoFieldsFragment) => {
  const { title } = props;
  const classes = useStyles();
  return <div className={classes.root}>{title}</div>;
};

src/components/features/ctf-components/ctf-demo/ctf-demo-gql.tsx

React component which executes the GraphQL query and passes the result to a component for rendering.

import { useContentfulLiveUpdates } from '@contentful/live-preview/react';
import React from 'react';

import { useCtfDemoQuery } from './__generated/ctf-demo.generated';
import { CtfDemo } from './ctf-demo';

interface CtfDemoGqlPropsInterface {
  id: string;
  locale: string;
  preview: boolean;
}

export const CtfDemoGql = ({ id, locale, preview }: CtfDemoGqlPropsInterface) => {
  const { data, isLoading } = useCtfDemoQuery({
    id,
    locale,
    preview,
  });

  const componentDemo = useContentfulLiveUpdates(data?.componentDemo, locale);

  if (isLoading || !componentDemo) {
    return null;
  }

  return <CtfDemo {...componentDemo} />;
};

Add component to mapping

on src/mappings.ts

add import to demo component into componetMap and componentGqlMap constants

export const componentMap = {
  ComponentDemo: dynamic(() => 
    import('@src/components/features/ctf-components/ctf-demo/ctf-demo').then(module => module.CtfDemo),
  ),
  ...
}

export const componentGqlMap = {
  ...pageTopicMap,
  ComponentDemo: dynamic(() =>
    import('@src/components/features/ctf-components/ctf-demo/ctf-demo-gql').then(
      module => module.CtfDemoGql,
    ),
  ),
  ...
}

Run your code

yarn dev

You should see your component display on http://localhost:3000/

Bug report

if you use npm run export it will generate error
Error: i18n support is not compatible with next export.

if you use it without i18n
it comes as
Error: Error serializing '.dehydratedState.queries[0].queryKey[1].locale' returned from 'getStaticProps' in "/404".

Summary

if you use npm run export it will generate error
Error: i18n support is not compatible with next export.

if you use it without i18n
it comes as
Error: Error serializing '.dehydratedState.queries[0].queryKey[1].locale' returned from 'getStaticProps' in "/404".

Environment

node 18.19

Steps to reproduce

it is your repository without .husky hooks
git clone https://github.com/anna-liepina/explore-cwa-next
npm i
npm run export

Expected results

successful export

Actual results

error :(

Template feedback

Are there any plans to upgrade this template to nextjs 13 with app router