Newt と Next.js を利用したアップデートノートです。
App Router を用いて、アップデートノートを作成してみたい方はぜひお試しください。
- スペースを作成します
- スペース UID を控えておきましょう。スペース UID は 管理画面 URL（
https://app.newt.so/{スペースUID}） もしくは スペース設定 > 一般 から確認できます。
- スペース UID を控えておきましょう。スペース UID は 管理画面 URL（
- App を作成します
- App テンプレートから作成する場合、Updatesを選択し「このテンプレートを追加」をクリックしてください。
- 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=updates
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_PUBLIC_PAGE_LIMIT=12
Next.js における環境変数の扱いについては、公式ドキュメントを参照してください。
Yarn を使う
# 依存パッケージをインストール
$ yarn install
# localhost:3000でdevサーバーを起動
$ yarn devnpm を使う
# 依存パッケージをインストール
$ npm install
# localhost:3000でdevサーバーを起動
$ npm run dev| ページ | パス | ファイル |
|---|---|---|
| 一覧 | / | ソース |
| 一覧 （ページ遷移時） |
/page/1・/page/2... | ソース |
| カテゴリで絞り込み | /categories/improved /categories/improved/1・/categories/improved/2…（ページ遷移時） |
ソース |
| 検索結果 | /search?q=hoge | ソース |
| 詳細 | /articles/article-1 | ソース |
Updates app の中に Article・Author・Category の 3 つのモデルを作ります。
| App 名（任意） | モデル名（モデル UID） |
|---|---|
| Updates | Article (article) |
Author (author) |
|
Category (category) |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| title | タイトル | テキスト | 必須フィールド このフィールドをタイトルに使う |
| slug | スラッグ | テキスト | 必須フィールド 一意の文字列（ユニーク） |
| meta | メタ情報 | カスタムフィールド | |
| body | 本文 | Markdown or リッチテキスト | 必須フィールド |
| author | 著者 | 参照（Author モデル） | 必須フィールド |
| categories | カテゴリ | 参照（Category モデル） | 複数値 必須フィールド |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| fullName | 名前 | テキスト | 必須フィールド このフィールドをタイトルに使う |
| profileImage | プロフィール画像 | 画像 |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| emoji | 絵文字 | 絵文字 | 必須フィールド |
| name | 名前 | テキスト | 必須フィールド このフィールドをタイトルに使う |
| slug | スラッグ | テキスト | 必須フィールド 一意の文字列（ユニーク） |
| colorCode | 色コード | カラー | 必須フィールド |
| フィールド ID | フィールド名 | フィールドタイプ | オプション |
|---|---|---|---|
| title | タイトル | テキスト | |
| description | ディスクリプション | テキスト | |
| ogImage | OG 画像 | 画像 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent