https://github.com/microcmsio/nextjs-simple-blog-template

https://github.com/microcmsio/nextjs-simple-blog-template

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/microcmsio/nextjs-simple-blog-template
• Owner: microcmsio
• License: mit
• Created: 2023-03-14T08:59:54.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-11T04:01:47.000Z (11 months ago)
• Last Synced: 2024-04-28T05:52:27.584Z (7 months ago)
• Language: TypeScript
• Homepage: https://nextjs-simple-blog-template.vercel.app
• Size: 1.17 MB
• Stars: 37
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# シンプルなブログ

![](public/img-cover.png)

microCMS 公式のシンプルなブログのテンプレートです。

## 動作環境

Node.js 18 以上

## 環境変数の設定

ルート直下に`.env`ファイルを作成し、下記の情報を入力してください。

```

MICROCMS_API_KEY=xxxxxxxxxx

MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx

BASE_URL=xxxxxxxxxx

```

`MICROCMS_API_KEY`  

microCMS 管理画面の「サービス設定 > API キー」から確認することができます。

`MICROCMS_SERVICE_DOMAIN`  

microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。

`BASE_URL`

デプロイ先の URL です。プロトコルから記載してください。

例）  

開発環境 → http://localhost:3000  

本番環境 → https://xxxxxxxx.vercel.app/ など

## 開発の仕方

1. パッケージのインストール

```bash

npm install

```

2. 開発環境の起動

```bash

npm run dev

```

3. 開発環境へのアクセス  

   [http://localhost:3000](http://localhost:3000)にアクセス

## 画面プレビューの設定

下書き状態のコンテンツをプレビューするために、microCMS管理画面にて画面プレビューの設定が必要です。

ブログAPIの「API設定 > 画面プレビュー」に下記のように設定してください。  

※`your-domain`部分はデプロイ先のドメインに置き換えてください。（localhost指定でも動作します）

![blog-preview](https://github.com/microcmsio/nextjs-simple-blog-template/assets/4659294/5045ac9e-3699-47b4-8927-4187114d75bd)

設定後はコンテンツ編集画面にて画面プレビューボタンが利用可能になります。

## Vercel へのデプロイ

[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)から簡単にデプロイが可能です。

リポジトリを紐付け、環境変数を `Environment Variables` に登録後、デプロイしてみましょう。

![](public/img-vercel-settings.png)