hygraph / reference-marketing-website

Next.js starter for creating a SaaS Marketing Website with Hygraph ⚡️

reference-marketing-website

A Next.js starter for creating a SaaS Marketing Website with Hygraph

• Demo

Quick start

1. Clone the repository and install project dependencies

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.

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.

HYGRAPH_ENDPOINT=

3. Start building!

yarn dev

Next.js Preview Mode

If you want to enable Next.js Preview Mode you'll need to add the following to your .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
• next/image
• Internationalized Routing
• GraphQL Union Types (Polymorphic Relations)
• next-seo

reference-marketing-website's Issues

Comments and documentation is completely absent

Hi,

This is a very useful repository! I like how well it integrates with the example project on graphcms. And it helped me to integrate graphcms into my next.js project, I'm so happy this repo uses all known and standard packages, including Chakra-ui for styling.

Question: why the docs missing? Was it intentional?

For example, repo structure is not obvious. Components seem well organized and have multi-level references, however it is impossible to understand the overall design for components.

The code is not documented either. So things like parseColumnsMdx https://github.com/GraphCMS/reference-marketing-website/blob/main/utils/_parseColumnsMdx.js#L13 are pretty hard to understand unless one adds multiple debugging statements and logging.

Unit tests would be nice to have, even for a demo purpose without full coverage.

Thanks!

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency react-transition-group to v4.4.5
• chore(deps): update dependency next-seo to v5.15.0
• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update dependency framer-motion to v10
• chore(deps): update dependency graphql-request to v6
• chore(deps): update dependency next-seo to v6
• chore(deps): update dependency prettier to v3
• chore(deps): update nextjs monorepo to v14 (major) (eslint-config-next, next)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @chakra-ui/react to v1.8.9
• chore(deps): update dependency eslint to v8.53.0
• chore(deps): update dependency framer-motion to v6.5.1
• chore(deps): update dependency graphql to v16.8.1
• chore(deps): update dependency graphql-request to v4.3.0
• chore(deps): update dependency next-mdx-remote to v4.4.1
• chore(deps): update emotion monorepo (@emotion/react, @emotion/styled)
• chore(deps): update nextjs monorepo to v12.3.4 (eslint-config-next, next)
• chore(deps): update dependency @chakra-ui/react to v2
• chore(deps): update react monorepo to v18 (major) (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @chakra-ui/react 1.8.8
• @emotion/react 11.8.2
• @emotion/styled 11.8.1
• framer-motion 6.2.9
• graphql 16.3.0
• graphql-request 4.2.0
• he 1.2.0
• lodash.camelcase 4.3.0
• lodash.startcase 4.4.0
• next 12.1.4
• next-mdx-remote 4.0.2
• next-seo 5.4.0
• react 17.0.2
• react-dom 17.0.2
• react-transition-group 4.4.2
• eslint 8.13.0
• eslint-config-next 12.1.4
• prettier 2.6.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Za 4 all

K

Module not found: Can't resolve @/svgs

Upgraded to latest versions of dependencies in the package.json after working with this template successfully for a few months. This error now pops up and I can't seem to find a good solution googling around. Appreciate any trailheads.

error - ./components/navigation.js:16:0
Module not found: Can't resolve '@/svgs'
14 | import { Transition } from 'react-transition-group'
15 |

16 | import { LogoSVG, MarkSVG } from '@/svgs'
17 | import { MenuIcon, XIcon } from '@/icons'
18 |
19 | const defaultStyle = {

Import trace for requested module:
./components/layout/content.js
./components/layout/index.js
./pages/_app.js

Which Hygraph Endpoint do we use?

Secondary Pages Not Rendering Markdown Formatting?

Fairly new to GraphCMS, when I create a page on the CMS, the markdown is intact. But when I pull it into the next.js app, line breaks, etc. are lost. Appreciate any guidance re: modifications to the layout component "page.js", I think.

Website logo - not able to change

sorry to post my question here, i am still learning and was trying to replace the navigation logo but couldn't change. I replace the svg code but no help.
can you please quite, how can i change the logo?

TypeError: _jsxDEV is not a function

If anyone encountered this issue, the bundled next-mdx-remote dependency had ver. 4.0.2 installed.

Just update to the latest version:

npm uninstall next-mdx-remote && npm install next-mdx-remote.

This installed ver 4.4.1 and fixed the issue.