Next.jsReactSaaS企业官网启动器

reference-marketing-website — Next.js SaaS模板

作者 hygraph

基于 Next.js 与 Hygraph 无头 CMS 的 SaaS 营销网站启动器，包含页面、博客与多语言路由示例。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

Next.js 营销网站启动器，内容由 Hygraph 无头 CMS 通过 GraphQL 提供

02

内置页面与博客文章两类内容模型示例，含首页与代表性内页

03

支持 Next.js Preview Mode，可预览 Hygraph 中的草稿内容

04

使用 next/image 处理图片、next-seo 管理页面 SEO 元信息

05

演示国际化路由与 GraphQL 联合类型（多态关系）

06

MIT 许可，允许修改、商用与分发该版本代码

模板详细介绍

这是一个面向 SaaS 营销场景的 Next.js 启动器，内容由 Hygraph（原 GraphCMS）无头 CMS 通过 GraphQL 提供。仓库提供了可直接克隆的示例站点，包含营销首页、内页与博客等页面结构，并演示了页面与博客文章两类内容模型。

在内容获取方面，项目通过环境变量 HYGRAPH_ENDPOINT 连接 Hygraph 项目，并支持 Next.js Preview Mode：配置 GRAPHCMS_TOKEN、GRAPHCMS_PREVIEW_TOKEN 与 GRAPHCMS_PREVIEW_SECRET 后，可在 Hygraph 中为 Page 和 Blog Post 模型设置预览 URL，分别指向 /api/preview 并携带 slug。

技术特性上，README 列出了 next/image、国际化路由（Internationalized Routing）、GraphQL 联合类型（多态关系）以及 next-seo 的使用。项目采用 MIT 许可，免费范围限于该版本代码；演示图片、字体、图标等第三方素材以及 Hygraph、托管等外部服务需另行核对许可与费用。

Next.jsSaaS企业官网启动器

适合你的项目吗？

适用场景

  • 搭建 SaaS 产品的营销官网与博客
  • 以无头 CMS 驱动内容、前端负责渲染的站点架构
  • 需要草稿预览与多语言路由的营销页面
  • 作为企业官网或营销站点的起始代码进行二次开发

适合人群

  • 熟悉 Next.js 与 GraphQL、希望以 Hygraph 管理内容的开发者
  • 需要营销官网加博客组合结构的 SaaS 团队
  • 希望基于现成示例快速调整页面与内容模型的二次开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    使用 npx degit Hygraph/reference-marketing-website#main 克隆仓库并安装依赖

  2. 2

    复制 .env.local.example 为 .env.local，填入 HYGRAPH_ENDPOINT

  3. 3

    如需预览模式，补充 GRAPHCMS_TOKEN、GRAPHCMS_PREVIEW_TOKEN、GRAPHCMS_PREVIEW_SECRET

  4. 4

    在 Hygraph 中为 Page 与 Blog Post 模型配置指向 /api/preview 的预览 URL

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用该模板必须自行注册 Hygraph 账号并创建项目，在 .env.local 中填入 HYGRAPH_ENDPOINT 等密钥，内容依赖 Hygraph 这一外部无头 CMS 服务，其免费额度与后续收费由 Hygraph 决定。
  • 启用预览模式需在 Hygraph 后台生成永久 Auth Token（GRAPHCMS_TOKEN、GRAPHCMS_PREVIEW_TOKEN）并配置 GRAPHCMS_PREVIEW_SECRET，属于外部服务账号与密钥要求。
  • 草稿预览功能需在 Hygraph 中手动为 Page 与 Blog Post 模型配置指向 /api/preview 的预览 URL，属于外部服务端配置步骤。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Provide your Hygraph project keys

README 原文

This should be a Permanent Auth Token that is set to fetch content from _PUBLISHED_ content stage by default.

README 原文

You'll need to update both the Page & Blog Post model to add a Preview URL.

README 原文
https://github.com/hygraph/reference-marketing-website/blob/main/LICENSE.mdhttps://github.com/hygraph/reference-marketing-website/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 90 / 100
技术栈
Next.js · React
网站类型
SaaS · 企业官网 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2025-01-22
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 6adcc71fe142408f7328a352799a4ce1cb997f57e3fb7d784c8dd23b74e32f79

2026-10-01T01:22:25.543Z

来源文件 / 仓库
# 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/)

[![Clone project](https://hygraph.com/button)](https://app.graphcms.com/clone/5f2c35155b33496999b9467afe88b34f?name=Marketing%20Website)
[![Deploy with Vercel](https://vercel.com/button)](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)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

ai-website-cloner-template

ai-website-cloner-template

Clone any website with one command using AI coding agents

Next.js · 启动器

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …

Next.js · 电商

Next-js-Boilerplate

Next-js-Boilerplate

Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。

Next.js · 启动器

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

next-forge

next-forge

Production-grade Turborepo template for Next.js apps.

Next.js · 启动器