Newt と Next.js を利用したブログです。
App Router を用いて、ブログを作成してみたい方はぜひお試しください。
- スペースを作成します
- スペース UID を控えておきましょう。スペース UID は 管理画面 URL(
https://app.newt.so/{スペースUID}
) もしくは スペース設定 > 一般 から確認できます。
- スペース UID を控えておきましょう。スペース UID は 管理画面 URL(
- App を作成します
- App テンプレートから作成する場合、Blogを選択し「このテンプレートを追加」をクリックしてください。
- 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=blog
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
NEXT_PUBLIC_NEWT_API_TYPE=cdn
NEXT_PUBLIC_NEWT_ARTICLE_MODEL_UID=article
NEXT_PUBLIC_NEWT_AUTHOR_MODEL_UID=author
NEXT_PUBLIC_NEWT_TAG_MODEL_UID=tag
NEXT_PUBLIC_PAGE_LIMIT=12
Next.js における環境変数の扱いについては、公式ドキュメントを参照してください。
Yarn を使う
# 依存パッケージをインストール
$ yarn install
# localhost:3000でdevサーバーを起動
$ yarn dev
npm を使う
# 依存パッケージをインストール
$ npm install
# localhost:3000でdevサーバーを起動
$ npm run dev
ページ | パス | ファイル |
---|---|---|
一覧 | / | ソース |
一覧 (ページ遷移時) |
/page/1・/page/2... | ソース |
タグで絞り込み | /tags/developers /tags/developers/1・/tags/developers/2…(ページ遷移時) |
ソース |
年で絞り込み | /archives/2023 /archives/2023/1・/archives/2023/2…(ページ遷移時) |
ソース |
著者で絞り込み | /authors/donna-thomason /authors/donna-thomason/1・/authors/donna-thomason/2…(ページ遷移時) |
ソース |
検索結果 | /search?q=hoge | ソース |
詳細 | /articles/article-1 | ソース |
Blog
app の中に Article・Author・Tag の 3 つのモデルを作ります。
App 名(任意) | モデル名(モデル UID) |
---|---|
Blog | Article (article ) |
Author (author ) |
|
Tag (tag ) |
フィールド ID | フィールド名 | フィールドタイプ | オプション |
---|---|---|---|
title | タイトル | テキスト | 必須フィールド このフィールドをタイトルに使う |
slug | スラッグ | テキスト | 必須フィールド 一意の文字列(ユニーク) |
meta | メタ情報 | カスタムフィールド | |
body | 本文 | Markdown or リッチテキスト | 必須フィールド |
coverImage | カバー画像 | 画像 | 必須フィールド |
author | 著者 | 参照(Author モデル) | 必須フィールド |
tags | タグ | 参照(Tag モデル) | 複数値 |
フィールド ID | フィールド名 | フィールドタイプ | オプション |
---|---|---|---|
fullName | 名前 | テキスト | 必須フィールド このフィールドをタイトルに使う |
slug | スラッグ | テキスト | 必須フィールド 一意の文字列(ユニーク) |
biography | 自己紹介 | Markdown or リッチテキスト | 必須フィールド |
profileImage | プロフィール画像 | 画像 |
フィールド ID | フィールド名 | フィールドタイプ | オプション |
---|---|---|---|
name | 名前 | テキスト | 必須フィールド このフィールドをタイトルに使う |
slug | スラッグ | テキスト | 必須フィールド 一意の文字列(ユニーク) |
フィールド ID | フィールド名 | フィールドタイプ | オプション |
---|---|---|---|
title | タイトル | テキスト | |
description | ディスクリプション | テキスト | |
ogImage | OG 画像 | 画像 |