newt-blog2-starter-nextjs: A TypeScript repository from kip693

Newt's starter

Demo | Newt

概要

newt-blog2-starter-nextjs
Newtを利用した2カラム版のブログ
技術構成： Next.js, TypeScript

開発をはじめる

Step1: Newtスペースをセットアップ

スペースを作成します
- スペースUIDを控えておきましょう。スペースUIDは管理画面URL（ https://app.newt.so/{スペースUID} ）もしくはスペース設定 > 一般から確認できます。
Appを作成します
- Appテンプレートから作成する場合、Blog2を選択し「このテンプレートを追加」をクリックしてください。
- スクラッチで作成する場合は、App名とAppUIDを設定して次のステップに進みます。
- AppUIDを控えておきましょう。AppUIDは管理画面URL（ https://app.newt.so/{スペースUID}/app/{AppUID} ）または App設定 > 一般から確認できます。
App設定から、Articleモデル, Tag, Authorモデルを作成します
- Appテンプレートから作成した場合、すでにモデルが作成されているためこのステップは飛ばします
- スクラッチで作成した場合は、Newtスペースの構成に従ってAppとモデルを作成します
スペース設定 > APIキーからCDN APIトークンを作成します
- スペース設定 > APIキーよりCDN APIトークンを作成します
- 複製マークをクリックしてトークンをコピーしましょう

Step2: .envファイルを書き換える

Step1で取得したスペースUID, AppUID, CDN APIトークンで環境変数を書き換えます

.envファイルのスペースUID, AppUID, CDN APIトークンを実際の値で書き換えます

NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
NEXT_PUBLIC_NEWT_API_TYPE=cdn
NEXT_PUBLIC_NEWT_ARTICLE_MODEL_UID=article
NEXT_PUBLIC_NEWT_TAG_MODEL_UID=tag
NEXT_PUBLIC_NEWT_AUTHOR_MODEL_UID=author
NEXT_PUBLIC_PAGE_LIMIT=12

Next.jsにおける環境変数の扱いについては、公式ドキュメントを参照してください。

Step3: devサーバーを起動する

Yarnを使う

# 依存パッケージをインストール
$ yarn install

# localhost:3000でdevサーバーを起動
$ yarn dev

NPMを使う

# 依存パッケージをインストール
$ npm install

# localhost:3000でdevサーバーを起動
$ npm run dev

Step4: Staticなサイトを生成して起動

# Staticなサイトを生成（SSG）
$ yarn generate

# サーバーを起動
$ yarn start

Newtスペースの構成

Blog2 appの中にArticle, Tag, Authorの3つのモデルを作ります。

App名（任意）	モデル名（モデルUID）
Blog2	Article (`article`)
	Tag (`tag`)
	Author (`author`)

Article（`uid: article`）モデル

フィールドID	フィールド名	フィールドタイプ	オプション
title	タイトル	テキスト	必須フィールド, このフィールドをタイトルに使う
slug	スラッグ	テキスト	必須フィールド
meta	メタ情報	カスタムフィールド
coverImage	カバー画像	画像
body	本文	Markdown or リッチテキスト
tags	カテゴリ	参照（Tagモデル）	複数値
author	著者	参照（Authorモデル）

Tag(`uid: tag`）モデル

フィールドID	フィールド名	フィールドタイプ	オプション
name	名前	テキスト	必須フィールド, このフィールドをタイトルに使う
slug	スラッグ	テキスト	必須フィールド

Author（`uid: author`）モデル

フィールドID	フィールド名	フィールドタイプ	オプション
fullName	名前	テキスト	必須フィールド, このフィールドをタイトルに使う
slug	スラッグ	テキスト	必須フィールド
profileImage	プロフィール画像	画像
biography	自己紹介	Markdown or リッチテキスト

メタ情報（`id: META`）カスタムフィールドタイプ

フィールドID	フィールド名	フィールドタイプ
title	Title	テキスト
description	Description	テキスト
ogImage	OG画像	画像

kip693/newt-blog2-starter-nextjs