https://github.com/contentful/compose-starter-helpcenter-nextjs
A sample website frontend for Compose with Next.js
https://github.com/contentful/compose-starter-helpcenter-nextjs
Last synced: 10 months ago
JSON representation
A sample website frontend for Compose with Next.js
- Host: GitHub
- URL: https://github.com/contentful/compose-starter-helpcenter-nextjs
- Owner: contentful
- License: mit
- Archived: true
- Created: 2021-03-10T14:45:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T11:47:19.000Z (over 2 years ago)
- Last Synced: 2024-09-22T15:32:54.159Z (almost 2 years ago)
- Language: TypeScript
- Homepage: https://compose-starter-helpcenter-nextjs-contentful.vercel.app/
- Size: 563 KB
- Stars: 59
- Watchers: 15
- Forks: 26
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Compose Starter: Help Center + Next.js
This is a sample website frontend to help you get started with Compose and
Next.js. You can use this example with Compose's quick start "Simple website" content model for empty
spaces.
## Getting started
### Installing dependencies
```
yarn
```
### Running locally
Copy `.env.example` to `.env` and adapt the environment to your setup:
- `CF_SPACE_ID`: The ID of a Compose compatible space to be used
- `CF_DELIVERY_ACCESS_TOKEN`: A delivery API key for the space
- `CF_PREVIEW_ACCESS_TOKEN`: A preview API key for the space
and then
```
yarn run dev
```
to start the website on `http://localhost:3000`
## Deploy to Vercel
You can use [Vercel](https://vercel.com/) to easily deploy the app by clicking the deploy button below:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcontentful%2Fcompose-starter-helpcenter-nextjs&env=CF_SPACE_ID,CF_DELIVERY_ACCESS_TOKEN,CF_PREVIEW_ACCESS_TOKEN&envDescription=Space%20ID%20and%20API%20Keys%20needed%20for%20the%20frontend%20to%20access%20your%20Contentful%20Space&envLink=https%3A%2F%2Fapp.contentful.com%2Fdeeplink%3Flink%3Dapi&project-name=contentful-compose-helpcenter-starter&repo-name=contentful-compose-helpcenter-starter)
For manual deployment, you can following the steps below:
1. Open your Vercel dashboard and click on "New project".
2. Click on "Import a Third-Party Git Repository" and enter the url of this repo.
3. Choose the Vercel scope where you want to deploy the app.
- For example your personal scope.
4. Add the 3 environment variables in the project settings:
- `CF_SPACE_ID`: The ID of a Compose compatible space to be used;
- `CF_DELIVERY_ACCESS_TOKEN`: A delivery API key for the space;
- `CF_PREVIEW_ACCESS_TOKEN`: A preview API key for the space.
You 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.
## Tech used
- [Next.js 12.x][nextjs]
- [TypeScript 4.x][typescript]
- [Tailwind CSS][tailwind]
## Project structure
```
public/
src/
├ components
├ lib
│ ├ translations/
│ ├ generated-types/
│ ├ api.ts
│ └ ... etc
│
├ pages/
│ ├ [locale]/
│ │ ├ articles/
│ │ │ └ [slug].tsx
│ │ │
│ │ ├ [slug].tsx
│ │ └ index.ts
│ │
│ ├ ...
│ └ index.tsx
│
└ styles/
next.config.js
...
```
- **src/pages**
Lists all the pages/routes on the website. See the official Next.js [documentation][pages] about pages for more information.
- **src/components**
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.
The `block-renderer.tsx` responsibility is to correctly render a given entry depending on its Content Type.
- **src/lib**
It contains any code that isn't a component or a Page, notably the fetching and translation logic and Content Types definitions (see below).
## Generating Content Types
We 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.
```shell
# Credentials to be used by cf-content-types-generator (see package.json)
export CF_SPACE_ID=
export CF_CMA_TOKEN=
# Generate
yarn generate-types
```
## Reach out to us
### You have questions about how to use this repo?
- Reach out to our community forum: [][contentful-community]
- Jump into our community slack channel: [][contentful-slack]
### You found a bug or want to improve this repo?
- File an issue here on GitHub: [][new-issue]. Make sure to remove any credential from your code before sharing it.
### You need to share confidential information or have other questions?
- File a support ticket at our Contentful Customer Support: [][contentful-support]
## License
This project is licensed under the MIT license.
[nextjs]: https://nextjs.org/docs/getting-started
[cf-content-types-generator]: https://github.com/contentful-labs/cf-content-types-generator
[tailwind]: https://tailwindcss.com/
[typescript]: https://www.typescriptlang.org/
[pages]: https://nextjs.org/docs/basic-features/pages
[contentful-community]: https://www.contentfulcommunity.com/
[contentful-support]: https://contentful.com/support
[contentful-slack]: https://www.contentful.com/slack/
[new-issue]: https://github.com/contentful/compose-starter-helpcenter-nextjs/issues/new