newt-docs-starter-nextjs: A TypeScript repository from takex5g

Newt's starter

Demo | Newt

概要

newt-docs-starter-nextjs
Newtを利用したドキュメントサイト
技術構成： Next.js, TypeScript

開発をはじめる

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

スペースを作成します
- スペースUIDを控えておきましょう。スペースUIDは管理画面URL（ https://app.newt.so/{スペースUID} ）もしくはスペース設定 > 一般から確認できます。
Appを作成します
- Appテンプレートから作成する場合、Docsを選択し「このテンプレートを追加」をクリックしてください。
- スクラッチで作成する場合は、App名とAppUIDを設定して次のステップに進みます。
- AppUIDを控えておきましょう。AppUIDは管理画面URL（ https://app.newt.so/{スペースUID}/app/{AppUID} ）または App設定 > 一般から確認できます。
App設定から、Articleモデル, Categoryモデルを作成します
- 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=スペースID
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_CATEGORY_MODEL_UID=category

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 build

# サーバーを起動
$ yarn start

Newtスペースの構成

Docs appの中にArticle, Category の2つのモデルを作ります。

App名（任意）	モデル名（モデルUID）
Docs	Article (`article`)
	Category (`category`)

Article（`uid: article`）モデル

フィールドID	フィールド名	フィールドタイプ	オプション
title	タイトル	テキスト	必須フィールド, このフィールドをタイトルに使う
slug	スラッグ	テキスト	必須フィールド
meta	メタ情報	カスタムフィールド
body	本文	Markdown or リッチテキスト
category	カテゴリ	参照（Categoryモデル）
sortOrder	順番（昇順）	数字

Category（`uid: category`）モデル

フィールドID	フィールド名	フィールドタイプ	オプション
name	名前	テキスト	必須フィールド, このフィールドをタイトルに使う
sortOrder	順番（昇順）	数字

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

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

License

MIT License

takex5g/newt-docs-starter-nextjs