Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brob/hygraph-next
https://github.com/brob/hygraph-next
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/brob/hygraph-next
- Owner: brob
- License: mit
- Created: 2022-10-10T13:16:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T16:55:09.000Z (about 1 month ago)
- Last Synced: 2024-12-11T17:39:54.210Z (about 1 month ago)
- Language: JavaScript
- Size: 46.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# reference-marketing-website
> A [Next.js](https://nextjs.org/) starter for creating a SaaS Marketing Website with [Hygraph](https://hygraph.com)
• [Demo](https://marketing-websites.withheadlesscms.com/)
[](https://app.graphcms.com/clone/5f2c35155b33496999b9467afe88b34f?name=Marketing%20Website)
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FGraphCMS%2Freference-marketing-website&env=HYGRAPH_ENDPOINT&envDescription=Your%20GraphCMS%20API%20endpoint&envLink=https%3A%2F%2Fgraphcms.com%2Fdocs%2Fapi-reference%2Fbasics%2Fenvironments%23environment-endpoints&demo-title=GraphCMS%20Marketing%20Site%20Reference&demo-description=A%20Next.js%20starter%20for%20creating%20a%20SaaS%20Marketing%20Website%20with%20GraphCMS&demo-url=https%3A%2F%2Fmarketing-websites.withheadlesscms.com%2F&demo-image=https%3A%2F%2Fmedia.graphcms.com%2F0GnTWzWbRBSQzoDQs8R3)
## Quick start
1. Clone the repository and install project dependencies
```shell
npx degit Hygraph/reference-marketing-website#main reference-marketing-website
cd reference-marketing-website
yarn
```
2. **Provide your Hygraph project keys**
Navigate into your new site’s directory and copy the `.env.local.example` file.
```shell
cp .env.local.example .env.local
```
Inside of your newly created `.env.local` file, provide values for the variable. These variables can be found in the [project settings UI](https://hygraph.com/docs/guides/concepts/apis#working-with-apis).
```env
HYGRAPH_ENDPOINT=
```
3. **Start building!**
```shell
yarn dev
```
## Next.js Preview Mode
If you want to enable [Next.js Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) you'll need to add the following to your `.env`:
```env
GRAPHCMS_TOKEN=
GRAPHCMS_PREVIEW_TOKEN=
GRAPHCMS_PREVIEW_SECRET=
```
### `GRAPHCMS_TOKEN`
This should be a Permanent Auth Token that is set to fetch content from _PUBLISHED_ content stage by default.
### `GRAPHCMS_PREVIEW_TOKEN`
This should be a Permanent Auth Token that is set to fetch content from _DRAFT_ content stage by default.
## `GRAPHCMS_PREVIEW_SECRET`
You'll need to make sure when configuring the Preview URL inside Hygraph that it passes the same secret value you assigned to `GRAPHCMS_PREVIEW_SECRET`.
You'll need to update both the Page & Blog Post model to add a Preview URL. The URLs should look like this:
- **Page**: `https://[your-domain.com]/api/preview?secret=[GRAPHCMS_PREVIEW_SECRET_VALUE_HERE]&slug={slug}`
- **Blog Post**: `https://[your-domain.com]/api/preview?secret=[GRAPHCMS_PREVIEW_SECRET_VALUE_HERE]&slug=blog/{slug}`
## Features
- [Next.js Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)
- [next/image](https://nextjs.org/docs/api-reference/next/image)
- [Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing)
- [GraphQL Union Types (Polymorphic Relations)](https://hygraph.com/docs/schema/field-types)
- [next-seo](https://www.npmjs.com/package/next-seo)