Newt

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