reference-marketing-website

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

Quick start

Clone the repository and install project dependencies

npx degit Hygraph/reference-marketing-website#main reference-marketing-website
cd reference-marketing-website
yarn

https://github.com/hygraph/reference-marketing-website

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.

NEXT_PUBLIC_GRAPHCMS_URL=

Start building!

yarn dev

next-sitemap

You can add sitemap in backend reference Next-sitemap

Installation

yarn add next-sitemap

Create config file next-sitemap requires a basic config file (next-sitemap.config.js) under your project root

✅ next-sitemap will load environment variables from .env files by default.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

Building sitemaps Add next-sitemap as your sitemap script in package.json

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "sitemap": "next-sitemap",
    "lint": "next lint"
  },

Run Build

Yarn Build

Sitemap urls https://www.website.com/sitemap.xml https://www.website.com/sitemap-0.xml

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}

ibnhabib / Marketing-Website