{"id":14991023,"url":"https://github.com/contentful/template-marketing-webapp-nextjs","last_synced_at":"2025-04-04T11:09:34.260Z","repository":{"id":64829616,"uuid":"536505602","full_name":"contentful/template-marketing-webapp-nextjs","owner":"contentful","description":"Next.js marketing website starter template","archived":false,"fork":false,"pushed_at":"2025-03-24T05:17:05.000Z","size":3734,"stargazers_count":99,"open_issues_count":5,"forks_count":90,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-03-28T10:06:08.697Z","etag":null,"topics":["contentful","graphql","marketing-website","material-ui","nextjs","react","starter-templates","typescript"],"latest_commit_sha":null,"homepage":"https://marketing-site.templates.contentful.com/?referrer=github","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/contentful.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-14T09:29:47.000Z","updated_at":"2025-03-24T14:18:43.000Z","dependencies_parsed_at":"2024-06-24T06:50:38.080Z","dependency_job_id":"24a447f6-8000-4da2-aa14-75a834e0bb6f","html_url":"https://github.com/contentful/template-marketing-webapp-nextjs","commit_stats":{"total_commits":113,"total_committers":15,"mean_commits":7.533333333333333,"dds":0.6283185840707964,"last_synced_commit":"0f9734d17fcfac9895a51f45f7beb73480a1e9ee"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Ftemplate-marketing-webapp-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Ftemplate-marketing-webapp-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Ftemplate-marketing-webapp-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Ftemplate-marketing-webapp-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/contentful","download_url":"https://codeload.github.com/contentful/template-marketing-webapp-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contentful","graphql","marketing-website","material-ui","nextjs","react","starter-templates","typescript"],"created_at":"2024-09-24T14:21:20.004Z","updated_at":"2025-04-04T11:09:34.220Z","avatar_url":"https://github.com/contentful.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contentful Marketing Starter Template\n\nA Marketing Starter Template powered by Next.js \u0026 Contentful, pre-designed with optimized \u0026 adjustable pages,\ncomponents, and data management.\n\n![The homepage of the Marketing Starter Template](marketing-starter-template.jpg 'The homepage of the Marketing Starter Template')\n\n$~$\n\n## What is Contentful?\n\n[Contentful](https://www.contentful.com/) provides content infrastructure for digital teams to power websites, apps, and\ndevices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for\nstructured content, powerful management, and delivery APIs, and a customizable web app that enables developers and\ncontent creators to ship their products faster.\n\n$~$\n\n## DISCLAIMER ⚠️\n\nThe Starter Templates experience is currently only available to new users.\n\nTo benefit from this experience, please follow this link to create a new\naccount and select the template to install: [https://www.contentful.com/starter-templates/marketing-website/sign-up/?action=create_starter_template](https://www.contentful.com/starter-templates/marketing-website/sign-up/?action=create_starter_template\u0026utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=template-marketing-webapp-nextjs).\n\nAlternatively, to immediately start the auto installation of this template after creating a new account, please follow this link:\n[https://www.contentful.com/starter-templates/marketing-website/sign-up/?action=create_starter_template\u0026template_name=marketing](https://www.contentful.com/starter-templates/marketing-website/sign-up/?action=create_starter_template\u0026template_name=marketing\u0026utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=template-marketing-webapp-nextjs).\n\n$~$\n\n## Begin your journey with Contentful and the Marketing Starter Template\n\nFollow this [guide](https://github.com/contentful/template-marketing-webapp-nextjs/blob/main/docs/tutorials/contentful-and-the-starter-template.md/?utm_source=github.com-guide\u0026utm_medium=referral\u0026utm_campaign=template-marketing-webapp-nextjs) to understand the relationship between\nContentful and the Starter Template source code through guided steps:\n\n- Entry editing, and updates preview in the Starter Template application (online/locally)\n- Content type editing in the Contentful web app, as well as in the Starter Template's code\n\n$~$\n\n## Features\n\n- Composable content through powerful \u0026 flexible content modeling.\n- Localization ready.\n- SEO ready.\n- Server-side rendering with Next.js[^1].\n- Optimized data management with React Query[^2].\n- Generation of GraphQL[^3] typed code (schema, types, and React Query hooks), in sync with the content types through\n  graphql-codegen[^4].\n- Enhanced Developer Experience with TypeScript[^5].\n\n$~$\n\n## Getting started\n\nTo get started, read the following guidelines.\n\n- [Environment variables](./README.md#environment-variables)\n- [Dependencies](./README.md#dependencies)\n- [Development](./README.md#development)\n- [Contentful API \u0026 GraphQL](./README.md#contentful-api--graphql)\n- [Contentful Components](./README.md#contentful-components)\n- [Deployment](./README.md#deployment)\n\n$~$\n\n### Environment variables\n\nIn order to authenticate the requests to the Contentful APIs, the following values are necessary:\n\n- Your space ID: [https://www.contentful.com/help/find-space-id/](https://www.contentful.com/help/find-space-id/)\n- Contentful Delivery API\n  token: [https://www.contentful.com/developers/docs/references/content-delivery-api/](https://www.contentful.com/developers/docs/references/content-delivery-api/)\n- Contentful Preview API\n  token: [https://www.contentful.com/developers/docs/references/content-preview-api/](https://www.contentful.com/developers/docs/references/content-preview-api/)\n\nRename the `.env.example` file to `.env` and add the necessary values.\n\n$~$\n\n### Dependencies\n\nTo install the necessary dependencies, run:\n\n```bash\nyarn\n```\n\n### Run the Starter Template in development mode\n\n```bash\nyarn dev\n```\n\nThe Starter Template should be up and running on `http://localhost:3000`.\n\nAll necessary dependencies are installed under `node_modules` and any necessary tools can be accessed via npm scripts.\n\n$~$\n\n## Development\n\n### Node\n\nIt is recommended to use the Node version listed in the `.nvmrc` file, we recommend\nusing [nvm](https://github.com/nvm-sh/nvm) to easily switch between Node versions.\n\n$~$\n\n### Husky \u0026 git hooks\n\nThis repository makes use of [Husky](https://github.com/typicode/husky) to enforce commit hooks.\n\nThe config for both the `pre-commit` and `pre-push` hooks can be found in the `.husky` folder, located in the root of\nthe project.\n\n---\n\n#### Pre-commit\n\nBefore allowing a commit, we require a successful result from the TypeScript compiler (`tsc`) and our `lint-staged`\nscript will be run.\n\nThis ensures all ESLint and Prettier rules are enforced on the files that are staged to be committed.\n\nThe `tsc` command is run separately from the `lint-staged` step because we require the Typescript compiler to sample\n_all_ files.\n\nThis is important to ensure that no deviating types were introduced by\nthe [codegen](./README.md#graphql--code-generation) for example.\n\n---\n\n#### Pre-push\n\nThe same two tasks are run for pre-push and for pre-commit.\n\n---\n\n#### Overriding the Husky git hooks\n\nIn case of wanting to bypass the `pre-commit` or `pre-push` hooks, pass a `--noVerify` flag to your Git commands.\n\n⚠️ Make sure you only use this if you know why you're using it. ⚠️\n\n$~$\n\n### Contentful API \u0026 GraphQL\n\nThis project makes use of Contentful's [GraphQL API](https://www.contentful.com/developers/docs/references/graphql/).\n\nAPI calls made to the Contentful GraphQL endpoint are made through React Query `useQuery` hooks.\n\nThe hooks are generated from the `.graphql` files collocated within the components, the following happens:\n\n1. `[folderName]/[fileName].graphql` file, containing a query, is detected by\n   the [codegen](./README.md#graphql--code-generation)\n2. `[folderName]/__generated/[fileName].generated.ts` is generated\n3. Within the generated file, a new hook is generated with the following pattern: `use[fileName]`\n4. The hook can now be imported and used within the `.ts(x)` files in the component folder\n\n$~$\n\n### GraphQL \u0026 code generation\n\nWe use `graphql-codegen` to generate a type-safe API client, utilizing [React Query](https://tanstack.com/query/v4/) as\nthe \"client\".\n\nThe data for the hooks is pre-fetched on the server-side.\n\nFor more information on how this data is hydrated please\nread [the official documentation](https://tanstack.com/query/v4/docs/guides/ssr#using-hydration).\n\n---\n\n#### Commands\n\nIn order to (re-)generate the GraphQL schema, types and hooks, please use either of the following commands:\n\n- `yarn graphql-codegen:generate` generates a schema, types and code to fetch data from the Contentful APIs\n- `yarn graphql-codegen:watch` similar to the `generate` command, but it runs as a watch task which will rerun the steps\n  when changes are made in the `.graphql` files\n\nThe first steps of the codegen generate files that contain the GraphQL schema and matching TypeScript types.\nThey're generated to the `src/lib/__generated` folder and ought to be committed once altered/added to the repository.\n\nAdditionally, the codegen watches .graphql files in our `src` folder, if it runs successfully it generates\na `__generated` folder collocated in the folder where the `.graphql` file was found.\n\nOne exception to this rule is the `src/lib/fragments` folder which contains shared GraphQL Fragments that are used in\nseveral other queries/fragments.\n\nThe TS types for these files are generated in the same location, in a `__generated` folder and like the other files\nought to be committed.\n\n---\n\n#### Configuration\n\nThe configuration for the codegen can be found in `codegen.ts`, located in the root of the project.\n\n$~$\n\n### Contentful Components\n\nThe term _Contentful Components_ (_ctf-components_ for short) is used for React components that have an equivalent\nContentful _content type_.\n\nE.g. all React components needed for rendering the _content-type_ `HeroBanner` can be found in the\nfolder `src/features/ctf-components/ctf-hero-banner`.\n\nUsually a _ctf-component_ is composed of 3 files:\n\n- `ctf-[contentypeName].graphql`: holding the query strings needed for the GraphQL request to fetch the components data.\n- `ctf-[contentypeName]-gql.tsx`: React component which executes the GraphQL query and passes the result to a component\n  for rendering.\n- `ctf-[contentypeName].tsx`: the React component which is actually rendering the content type.\n\nOptionally, a folder with TypeScript interfaces which were generated by GraphQL codegen can also be included:\n\n- `/__generated/`: (see [GraphQL \u0026 code generation](./README.md#graphql--code-generation)).\n\n$~$\n\n### Component Resolver and content type mapping\n\nThere is a _component-resolver_ (_./src/components/component-resolver.tsx_) React component, which is used to pick the\nright React component for rendering a _content-type_.\n\nIt requires as properties the _content type_ `id`, its `__typename` (used by live preview), and optionally the content.\n\nThe **component-resolver** then uses a key map to find the right React component (`./src/mappings.ts`), where the key is\nthe _content type_ name and the value is the React component.\n\nIt will check the map `componentMap` first, and if the _content type_ could be resolved it is assumed all content is\navailable.\nThe content is then passed to the React component.\n\nIf the _content type_ could not be resolved, `componentGqlMap` will be used for resolving.\nIf the React component is found the _content type_ `id` and `__typename` will be passed, which is used\nby the component to fetch its data.\n\nAccording to this pattern, all _ctf-components_ suffixed with `-gql` should be added to `componentGqlMap` and all\nwithout a suffix should be added to `componentMap`.\n\n$~$\n\n### Creating new Contentful Components\n\nCreating new _ctf-components_ involve the following steps:\n\n- Create a folder for the component files (`./src/ctf-components/ctf-[contentTypeName]`)\n- Create the file for the GraphQL query strings (`./src/ctf-components/ctf-[contentTypeName].graphql`)\n- Optionally, generate TypeScript interfaces for the GraphQL result by calling `yarn graphql-codegen:generate` (\n  see [GraphQL \u0026 code generation](./README.md#graphql--code-generation)).\n- Create the React components for rendering (`./src/ctf-components/ctf-[contentTypeName]-gql.tsx`\n  and `./src/ctf-components/ctf-[contentTypeName].tsx`).\n- Add the component to the `componentGqlMap` in `./src/mappings.ts`.\n\n$~$\n\n---\n\n$~$\n\n## Deployment\n\nThe Starter Template can be deployed to your hosting provider of choice.\n\nWe offer integrations with Vercel and Netlify to speed up the process by clicking one of the deploy buttons below. The GitHub repository and\nthe necessary environment variables keys are pre-configured in the hosting provider space.\n\n| Vercel                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Netlify                                                                                                                                                                                                                                                                                                                                           |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcontentful%2Ftemplate-marketing-webapp-nextjs\u0026env=CONTENTFUL_SPACE_ID,CONTENTFUL_ACCESS_TOKEN,CONTENTFUL_PREVIEW_ACCESS_TOKEN\u0026envDescription=API%20Keys%20needed%20for%20the%20application\u0026envLink=https%3A%2F%2Fgithub.com%2Fcontentful%2Ftemplate-marketing-webapp-nextjs%23environment-variables) | [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https%3A%2F%2Fgithub.com%2Fcontentful%2Ftemplate-marketing-webapp-nextjs#CONTENTFUL_SPACE_ID=\u0026CONTENTFUL_ACCESS_TOKEN=\u0026CONTENTFUL_PREVIEW_ACCESS_TOKEN=) |\n| [Environment variables docs](https://vercel.com/docs/concepts/projects/environment-variables)                                                                                                                                                                                                                                                                                                                                                                                              | [Environment variables docs](https://docs.netlify.com/environment-variables/overview/)                                                                                                                                                                                                                                                            |\n\nMake sure to add the necessary [environment variables values](./README.md#environment-variables) to the hosting provider\nenvironment variables.\n\n---\n\n### Content preview \u0026 live preview\n\nOnce you have the Starter Template deployed on your hosting provider, you can update the Content preview URL in your\nspace settings.\n\nYou can follow our guide to learn how to do\nso: [https://www.contentful.com/help/setup-content-preview](https://www.contentful.com/help/setup-content-preview/?utm_source=github.com-preview-guide\u0026utm_medium=referral\u0026utm_campaign=template-marketing-webapp-nextjs).\n\nFor the live preview the basic field tagging for the inspector mode and live updates are already implemented.\nFor custom components, you can find the instructions at our [guide](https://www.contentful.com/developers/docs/tutorials/general/live-preview/).\n\n$~$\n\n---\n\n$~$\n\n## Support\n\nIf you have a problem with this Starter Template, post a message in\nour [Contentful Community Slack](https://www.contentful.com/slack/).\n\nCan't find your answer there? You can file a feedback issue\nthrough [this template](https://github.com/contentful/template-marketing-webapp-nextjs/tree/main/.github/ISSUE_TEMPLATE/feedback.md).\n\nIf you have other problems with Contentful not related to the Starter Template, you can contact\nthe [Customer Support](https://support.contentful.com/).\n\n$~$\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n$~$\n\n## License\n\nMIT License, see [LICENSE](./LICENSE).\n\n$~$\n\n\u003c!-- FOOTNOTES --\u003e\n\n[^1]: [Next.js docs](https://nextjs.org/docs/getting-started)\n[^2]: [React Query](https://tanstack.com/query/v4/docs/overview)\n[^3]: [GraphQL docs](https://graphql.org/learn/)\n[^4]: [graphql-codegen](https://www.the-guild.dev/graphql/codegen)\n[^5]: [TypeScript](https://www.typescriptlang.org/)\n[^note]: [React docs](https://reactjs.org/docs/getting-started.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontentful%2Ftemplate-marketing-webapp-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontentful%2Ftemplate-marketing-webapp-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontentful%2Ftemplate-marketing-webapp-nextjs/lists"}