Newt's starter

Demo | Newt

概要

Newt と Next.js を利用したアップデートノートです。
App Router を用いて、アップデートノートを作成してみたい方はぜひお試しください。

開発をはじめる

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

1. スペースを作成します
   • スペース UID を控えておきましょう。スペース UID は 管理画面 URL（ https://app.newt.so/{スペースUID} ） もしくは スペース設定 > 一般 から確認できます。
2. App を作成します
   • App テンプレートから作成する場合、Updatesを選択し「このテンプレートを追加」をクリックしてください。
   • AppUID を控えておきましょう。AppUID は管理画面 URL（ https://app.newt.so/{スペースUID}/app/{AppUID} ） または App 設定 > 一般 から確認できます。
3. スペース設定 > API キー から CDN API トークンを作成します

Step2: .env.local ファイルを作成する

.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 における環境変数の扱いについては、公式ドキュメントを参照してください。

Step3: dev サーバーを起動する

Yarn を使う

# 依存パッケージをインストール
$ yarn install

# localhost:3000でdevサーバーを起動
$ yarn dev

npm を使う

# 依存パッケージをインストール
$ 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)

Article（uid: article）モデル

フィールド ID	フィールド名	フィールドタイプ	オプション
title	タイトル	テキスト	必須フィールド このフィールドをタイトルに使う
slug	スラッグ	テキスト	必須フィールド 一意の文字列（ユニーク）
meta	メタ情報	カスタムフィールド
body	本文	Markdown or リッチテキスト	必須フィールド
author	著者	参照（Author モデル）	必須フィールド
categories	カテゴリ	参照（Category モデル）	複数値 必須フィールド

Author（uid: author）モデル

フィールド ID	フィールド名	フィールドタイプ	オプション
fullName	名前	テキスト	必須フィールド このフィールドをタイトルに使う
profileImage	プロフィール画像	画像

Category（uid: category）モデル

フィールド ID	フィールド名	フィールドタイプ	オプション
emoji	絵文字	絵文字	必須フィールド
name	名前	テキスト	必須フィールド このフィールドをタイトルに使う
slug	スラッグ	テキスト	必須フィールド 一意の文字列（ユニーク）
colorCode	色コード	カラー	必須フィールド

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

フィールド ID	フィールド名	フィールドタイプ	オプション
title	タイトル	テキスト
description	ディスクリプション	テキスト
ogImage	OG 画像	画像

License

MIT License