Newt's starter

Demo | Newt

概要

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

開発をはじめる

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

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

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

1. 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