{"id":15143714,"url":"https://github.com/contentful/compose-starter-helpcenter-nextjs","last_synced_at":"2025-09-29T12:30:49.395Z","repository":{"id":40386626,"uuid":"346388163","full_name":"contentful/compose-starter-helpcenter-nextjs","owner":"contentful","description":"A sample website frontend for Compose with Next.js","archived":true,"fork":false,"pushed_at":"2024-03-12T11:47:19.000Z","size":576,"stargazers_count":59,"open_issues_count":7,"forks_count":26,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-09-22T15:32:54.159Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://compose-starter-helpcenter-nextjs-contentful.vercel.app/","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":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-03-10T14:45:10.000Z","updated_at":"2024-09-03T08:33:02.000Z","dependencies_parsed_at":"2024-03-12T13:10:06.319Z","dependency_job_id":null,"html_url":"https://github.com/contentful/compose-starter-helpcenter-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fcompose-starter-helpcenter-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fcompose-starter-helpcenter-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fcompose-starter-helpcenter-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fcompose-starter-helpcenter-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/contentful","download_url":"https://codeload.github.com/contentful/compose-starter-helpcenter-nextjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219874544,"owners_count":16554590,"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":[],"created_at":"2024-09-26T10:03:04.338Z","updated_at":"2025-09-29T12:30:49.060Z","avatar_url":"https://github.com/contentful.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compose Starter: Help Center + Next.js\n\nThis is a sample website frontend to help you get started with Compose and\nNext.js. You can use this example with Compose's quick start \"Simple website\" content model for empty\nspaces.\n\n## Getting started\n\n### Installing dependencies\n\n```\nyarn\n```\n\n### Running locally\n\nCopy `.env.example` to `.env` and adapt the environment to your setup:\n\n- `CF_SPACE_ID`: The ID of a Compose compatible space to be used\n- `CF_DELIVERY_ACCESS_TOKEN`: A delivery API key for the space\n- `CF_PREVIEW_ACCESS_TOKEN`: A preview API key for the space\n\nand then\n\n```\nyarn run dev\n```\n\nto start the website on `http://localhost:3000`\n\n## Deploy to Vercel\n\nYou can use [Vercel](https://vercel.com/) to easily deploy the app by clicking the deploy button below:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcontentful%2Fcompose-starter-helpcenter-nextjs\u0026env=CF_SPACE_ID,CF_DELIVERY_ACCESS_TOKEN,CF_PREVIEW_ACCESS_TOKEN\u0026envDescription=Space%20ID%20and%20API%20Keys%20needed%20for%20the%20frontend%20to%20access%20your%20Contentful%20Space\u0026envLink=https%3A%2F%2Fapp.contentful.com%2Fdeeplink%3Flink%3Dapi\u0026project-name=contentful-compose-helpcenter-starter\u0026repo-name=contentful-compose-helpcenter-starter)\n\nFor manual deployment, you can following the steps below:\n\n1.  Open your Vercel dashboard and click on \"New project\".\n2.  Click on \"Import a Third-Party Git Repository\" and enter the url of this repo.\n3.  Choose the Vercel scope where you want to deploy the app.\n    - For example your personal scope.\n4.  Add the 3 environment variables in the project settings:\n    - `CF_SPACE_ID`: The ID of a Compose compatible space to be used;\n    - `CF_DELIVERY_ACCESS_TOKEN`: A delivery API key for the space;\n    - `CF_PREVIEW_ACCESS_TOKEN`: A preview API key for the space.\n\nYou are all set! When the deployment run completes, you will see the app at the url generated by Vercel. It can be seen in the overview page of the new project.\n\n## Tech used\n\n- [Next.js 12.x][nextjs]\n- [TypeScript 4.x][typescript]\n- [Tailwind CSS][tailwind]\n\n## Project structure\n\n```\npublic/\nsrc/\n  ├ components\n  ├ lib\n  │   ├ translations/\n  │   ├ generated-types/\n  │   ├ api.ts\n  │   └ ... etc\n  │\n  ├ pages/\n  │    ├ [locale]/\n  │    │   ├ articles/\n  │    │   │    └ [slug].tsx\n  │    │   │\n  │    │   ├ [slug].tsx\n  │    │   └ index.ts\n  │    │\n  │    ├ ...\n  │    └ index.tsx\n  │\n  └ styles/\nnext.config.js\n...\n```\n\n- **src/pages**\n  Lists all the pages/routes on the website. See the official Next.js [documentation][pages] about pages for more information.\n\n- **src/components**\n  It contains all React components other than Pages. The most important components here, those under `src/components/renderer`, correspond directly to the Content Types we support previewing.\n\n  The `block-renderer.tsx` responsibility is to correctly render a given entry depending on its Content Type.\n\n- **src/lib**\n\n  It contains any code that isn't a component or a Page, notably the fetching and translation logic and Content Types definitions (see below).\n\n## Generating Content Types\n\nWe use [cf-content-types-generator][cf-content-types-generator] to keep the Content Types definitions in `src/lib/generated-types` in sync with the space we use.\n\n```shell\n# Credentials to be used by cf-content-types-generator (see package.json)\nexport CF_SPACE_ID=\u003cspace-id\u003e\nexport CF_CMA_TOKEN=\u003cyour-cma-token\u003e\n\n# Generate\nyarn generate-types\n```\n\n## Reach out to us\n\n### You have questions about how to use this repo?\n\n- Reach out to our community forum: [![Contentful Community Forum](https://img.shields.io/badge/-Join%20Community%20Forum-3AB2E6.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1OSI+CiAgPHBhdGggZmlsbD0iI0Y4RTQxOCIgZD0iTTE4IDQxYTE2IDE2IDAgMCAxIDAtMjMgNiA2IDAgMCAwLTktOSAyOSAyOSAwIDAgMCAwIDQxIDYgNiAwIDEgMCA5LTkiIG1hc2s9InVybCgjYikiLz4KICA8cGF0aCBmaWxsPSIjNTZBRUQyIiBkPSJNMTggMThhMTYgMTYgMCAwIDEgMjMgMCA2IDYgMCAxIDAgOS05QTI5IDI5IDAgMCAwIDkgOWE2IDYgMCAwIDAgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0UwNTM0RSIgZD0iTTQxIDQxYTE2IDE2IDAgMCAxLTIzIDAgNiA2IDAgMSAwLTkgOSAyOSAyOSAwIDAgMCA0MSAwIDYgNiAwIDAgMC05LTkiLz4KICA8cGF0aCBmaWxsPSIjMUQ3OEE0IiBkPSJNMTggMThhNiA2IDAgMSAxLTktOSA2IDYgMCAwIDEgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0JFNDMzQiIgZD0iTTE4IDUwYTYgNiAwIDEgMS05LTkgNiA2IDAgMCAxIDkgOSIvPgo8L3N2Zz4K\u0026maxAge=31557600)][contentful-community]\n- Jump into our community slack channel: [![Contentful Community Slack](https://img.shields.io/badge/-Join%20Community%20Slack-2AB27B.svg?logo=slack\u0026maxAge=31557600)][contentful-slack]\n\n### You found a bug or want to improve this repo?\n\n- File an issue here on GitHub: [![File an issue](https://img.shields.io/badge/-Create%20Issue-6cc644.svg?logo=github\u0026maxAge=31557600)][new-issue]. Make sure to remove any credential from your code before sharing it.\n\n### You need to share confidential information or have other questions?\n\n- File a support ticket at our Contentful Customer Support: [![File support ticket](https://img.shields.io/badge/-Submit%20Support%20Ticket-3AB2E6.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1OSI+CiAgPHBhdGggZmlsbD0iI0Y4RTQxOCIgZD0iTTE4IDQxYTE2IDE2IDAgMCAxIDAtMjMgNiA2IDAgMCAwLTktOSAyOSAyOSAwIDAgMCAwIDQxIDYgNiAwIDEgMCA5LTkiIG1hc2s9InVybCgjYikiLz4KICA8cGF0aCBmaWxsPSIjNTZBRUQyIiBkPSJNMTggMThhMTYgMTYgMCAwIDEgMjMgMCA2IDYgMCAxIDAgOS05QTI5IDI5IDAgMCAwIDkgOWE2IDYgMCAwIDAgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0UwNTM0RSIgZD0iTTQxIDQxYTE2IDE2IDAgMCAxLTIzIDAgNiA2IDAgMSAwLTkgOSAyOSAyOSAwIDAgMCA0MSAwIDYgNiAwIDAgMC05LTkiLz4KICA8cGF0aCBmaWxsPSIjMUQ3OEE0IiBkPSJNMTggMThhNiA2IDAgMSAxLTktOSA2IDYgMCAwIDEgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0JFNDMzQiIgZD0iTTE4IDUwYTYgNiAwIDEgMS05LTkgNiA2IDAgMCAxIDkgOSIvPgo8L3N2Zz4K\u0026maxAge=31557600)][contentful-support]\n\n## License\n\nThis project is licensed under the MIT license.\n\n[nextjs]: https://nextjs.org/docs/getting-started\n[cf-content-types-generator]: https://github.com/contentful-labs/cf-content-types-generator\n[tailwind]: https://tailwindcss.com/\n[typescript]: https://www.typescriptlang.org/\n[pages]: https://nextjs.org/docs/basic-features/pages\n[contentful-community]: https://www.contentfulcommunity.com/\n[contentful-support]: https://contentful.com/support\n[contentful-slack]: https://www.contentful.com/slack/\n[new-issue]: https://github.com/contentful/compose-starter-helpcenter-nextjs/issues/new\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontentful%2Fcompose-starter-helpcenter-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontentful%2Fcompose-starter-helpcenter-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontentful%2Fcompose-starter-helpcenter-nextjs/lists"}