Newt と Next.js を利用したドキュメントサイトです。
App Router を用いて、ドキュメントサイトを作成してみたい方はぜひお試しください。
- スペースを作成します
- スペース UID を控えておきましょう。スペース UID は 管理画面 URL（
https://app.newt.so/{スペースUID}） もしくは スペース設定 > 一般 から確認できます。
- スペース UID を控えておきましょう。スペース UID は 管理画面 URL（
- App を作成します
- Appを追加 > テンプレートから追加 から、Docsを選んで「このテンプレートを追加」をクリックしてください。
- AppUID を控えておきましょう。AppUID は管理画面 URL（
https://app.newt.so/{スペースUID}/app/{AppUID}） または App 設定 > 一般 から確認できます。
- スペース設定 > API キー から CDN API トークンを作成します
.env.local.example ファイルを参考に、.env.local ファイルを作成します。
Step1 で取得したスペース UID・AppUID・CDN API トークンの値を設定します。
NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=document-site
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 における環境変数の扱いについては、公式ドキュメントを参照してください。
Yarn を使う
# 依存パッケージをインストール
$ yarn install
# localhost:3000でdevサーバーを起動
$ yarn devnpm を使う
# 依存パッケージをインストール
$ npm install
# localhost:3000でdevサーバーを起動
$ npm run dev| ページ | パス | ファイル |
|---|---|---|
| トップ | / ※ 詳細ページにリダイレクトします |
ソース |
| 検索結果 | /search?q=hoge | ソース |
| 詳細 | /articles/article-1 | ソース |
Docs app の中に Article, Category の 2 つのモデルを作ります。
| App 名（任意） | モデル名（モデル UID） |
|---|---|
| Docs | Article (article) |
Category (category) |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| title | タイトル | テキスト | 必須フィールド このフィールドをタイトルに使う |
| slug | スラッグ | テキスト | 必須フィールド 一意の文字列（ユニーク） |
| meta | メタ情報 | カスタムフィールド | |
| body | 本文 | Markdown or リッチテキスト | 必須フィールド |
| category | カテゴリ | 参照（Category モデル） | 必須フィールド |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| name | 名前 | テキスト | 必須フィールド このフィールドをタイトルに使う |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| title | タイトル | テキスト | |
| description | ディスクリプション | テキスト | |
| ogImage | OG 画像 | 画像 |