Skip to content

Newt-Inc/newt-starter-nextjs-blog

Repository files navigation

Newt

Newt's starter

Demo | Newt

概要

NewtNext.js を利用したブログです。
App Router を用いて、ブログを作成してみたい方はぜひお試しください。

Deploy with Vercel

開発をはじめる

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

  1. スペースを作成します
    • スペース UID を控えておきましょう。スペース UID は 管理画面 URL( https://app.newt.so/{スペースUID} ) もしくは スペース設定 > 一般 から確認できます。
  2. App を作成します
    • App テンプレートから作成する場合、Blogを選択し「このテンプレートを追加」をクリックしてください。
    • 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=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 における環境変数の扱いについては、公式ドキュメントを参照してください。

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

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)

Article(uid: article)モデル

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

Author(uid: author)モデル

フィールド ID フィールド名 フィールドタイプ オプション
fullName 名前 テキスト 必須フィールド
このフィールドをタイトルに使う
slug スラッグ テキスト 必須フィールド
一意の文字列(ユニーク)
biography 自己紹介 Markdown or リッチテキスト 必須フィールド
profileImage プロフィール画像 画像

Tag(uid: tag)モデル

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

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

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

License

MIT License