contentful / template-marketing-webapp-nextjs Goto Github PK
View Code? Open in Web Editor NEWNext.js marketing website starter template
Home Page: https://marketing-site.templates.contentful.com/?referrer=github
License: MIT License
Next.js marketing website starter template
Home Page: https://marketing-site.templates.contentful.com/?referrer=github
License: MIT License
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
Create a component with a "Title" field that can be inserted on the home page
Run following command
yarn run graphql-codegen:generate
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
}
}
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} />;
};
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,
),
),
...
}
yarn dev
You should see your component display on http://localhost:3000/
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".
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".
node 18.19
it is your repository without .husky
hooks
git clone https://github.com/anna-liepina/explore-cwa-next
npm i
npm run export
successful export
error :(
Are there any plans to upgrade this template to nextjs 13 with app router
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.