GraphCMS + Next.jsで

最高の Jamstack 環境を

手に入れよう

GraphCMS とは？

GraphQL での API

わかりやすい拡張性

CMS

費用

実装の流れ

https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms

基本は以下を参考

1. GraphCMSプロジェクト作成

エンドポイントを控える

トークンを控える

2. Next.js プロジェクト作成

• 一覧と詳細ページ

• GraphQL での API

• プレビューモード API

.env.local の設定

3. Vercel にリポジトリを追加

環境変数の設定

Web Hook の追加

4. GraphCMS で Hooks 設定

DEMO

https://github.com/syuji-higa/demo-nextjs-graphcms

- プレビューモード

- 更新時自動デプロイ

- 段階的な静的再生成

Jamstack は

まだまだ進化している

Theanks!