Menu

How to Use the CMS Module

注意

v3.2.3 - 3.2.4のアップデートにおいて、NextyのCMSはTipTapを使用してリファクタリングされ、より多くの機能と大幅に改善されたコンテンツエディター体験を獲得しました。

サポートされている機能

Nexty.devボイラープレートが提供するCMS機能は、すべてのSaaSボイラープレートの中で最も包括的であり、非常に豊富な機能セットをサポートしています。さらに、TipTapの広範なプラグインエコシステムを通じて、より多くの機能を簡単に拡張できます。

Nextyボイラープレートですでにサポートされている機能は以下の通りです：

  • デフォルトで提供されるブログモジュール
  • 共有された基本コンポーネントとデータテーブル。最小限のファイルとコードを追加することで、新しいコンテンツモジュールを作成可能
  • ローカルmdxファイルのレンダリングとサーバーサイドCMSデータのレンダリングの両方をサポート
  • 閲覧数の統計をサポート
  • 詳細ページはTOCをサポート
  • 詳細ページは関連記事の表示をサポート（共有タグによって決定）
  • コンテンツの作成と編集は以下をサポート：
    • 記事の基本情報：タイトル、slug、説明、タグ、カバー画像
    • 言語選択：同じslugで異なる言語をサポートする設計
    • 高度な機能：ステータス設定（下書き、公開、アーカイブ）、可視性（公開、ログインユーザー、サブスクライブユーザー）、ピン留め
  • コンテンツエディターのツールバーは非常に豊富で、以下をサポート：
    • Markdownの基本機能：太字、斜体、下線、見出し、番号付け、引用、コード、水平線、リンクなど
    • テーブル：行と列の両方が追加、削除、移動をサポート
    • 画像アップロード：ローカルアップロード、外部画像リンク、CloudFlare R2選択。複数の画像を横並びでサポート
    • 動画：YouTube動画リンク
    • 翻訳
    • ほとんどのツールバープラグインは設定を通じて有効化/無効化をサポート

ディレクトリ構造

components/cms/               // 共有コンポーネント
  ├─ PostDataTable.tsx        // リスト＆ページネーション
  ├─ PostEditorClient.tsx     // 作成/編集のエントリーポイント
  ├─ PostForm.tsx             // フォーム + Tiptap
  ├─ PostList.tsx             // フロントエンドの無限スクロール
  ├─ PostCard.tsx             // フロントエンドカード
  ├─ ImageUpload.tsx          // R2アップロード
  ├─ TagInput.tsx             // フォームのタグフィールド
  ├─ TagManagementDialog.tsx  // タグ管理ダイアログ
  └─ post-config.ts           // 各PostTypeの設定。複数のCMSモジュールが必要な場合は、ここで完全なモジュール設定を行う
 
components/tiptap/
  ├─ TiptapEditor.tsx         // リッチテキストエディターのメインコンポーネント
  ├─ TiptapRenderer.tsx       // フロントエンドの読み取り専用レンダラー
  ├─ ImageGridExtension.ts    // 画像グリッドのカスタムNode
  ├─ ImageGridNodeView.tsx    // 編集モードの画像グリッドビュー
  ├─ ImageGridReadOnlyView.tsx // 読み取りモードの画像グリッドビュー
  ├─ R2ResourceSelector.tsx   // R2メディアセレクター
  ├─ TableMenu.tsx            // テーブルのフローティングツールバー
  ├─ TableOfContents.tsx      // 目次ジェネレーター
  └─ TranslationButton.tsx     // AI翻訳ボタン
 
 
actions/posts/                // 共有Server Actions
  ├─ posts.ts                 // CRUD + フロントエンド読み取り
  ├─ tags.ts                  // タグCRUD
  └─ views.ts                 // 閲覧数
 
app/[locale]/(protected)/dashboard/(admin)/blogs/
  ├─ page.tsx                 // リストページ
  ├─ new/page.tsx             // 作成ページ
  └─ [postId]/edit/page.tsx   // 編集ページ
 
app/[locale]/(basic-layout)/blog/
  ├─ page.tsx                 // フロントエンドリスト
  └─ [slug]/page.tsx          // 詳細ページ
 
lib/
  ├─ db/schema.ts             // Drizzleモデル。関連テーブル：posts、tags、postTags
  └─ getBlogs.ts              // ローカルMDX読み取り

機能紹介

CMS機能はすべてWYSIWYGであるため、詳細な説明は不要です。画像を通じて機能を理解できます。

cms
cms
cms
cms
cms

画像アップロードは、ローカルアップロード、外部リンク、CloudFlare R2選択をサポートしています

cms
cms

画像表示は複数の画像を横並びでサポートしています

cms

YouTube動画の挿入をサポートしています

cms

エディターコンテンツはクイック翻訳をサポートしています

cms

コンテンツエディター機能の変更方法

コンテンツエディターのすべての機能ファイルはcomponents/tiptapの下に配置されています。コードに慣れた後に変更するか、AIに変更を依頼できます。AIはTipTapに非常に精通しています。

新しいコンテンツモジュールの追加方法

コンテンツウェブサイトを開発している場合、ブログモジュールだけでは不十分かもしれません。ウェブサイトのコンテンツ構造を充実させるために、複数のコンテンツモジュールを追加したい場合があります。この要件は、Nexty.devボイラープレートを使用して簡単に解決できます。

Guideモジュールの追加を例に、以下の手順を完了するだけです：

  1. CMSコンテンツタイプの拡張
lib/db/schema.ts
export const postTypeEnum = pgEnum('post_type', [
  'blog',
  "guide" // 追加
])

次に、以下のコマンドを実行します：

npm run db:generate
 
npm run db:migrate
  1. CMS設定の拡張
components/cms/post-config.ts
export const POST_CONFIGS: Record<PostType, PostConfig> = {
  blog: {
    postType: "blog",
    schema: basePostSchema,
    actionSchema: postActionSchema,
    imagePath: BLOGS_IMAGE_PATH,
    enableTags: true,
    routes: {
      list: "/dashboard/blogs",
      create: "/dashboard/blogs/new",
      edit: (id: string) => `/dashboard/blogs/${id}`,
    },
  },
  // 追加
  guide: {
    postType: "guide",
    schema: basePostSchema,
    actionSchema: postActionSchema,
    imagePath: BLOGS_IMAGE_PATH,
    enableTags: true,
    routes: {
      list: "/dashboard/guides",
      create: "/dashboard/guides/new",
      edit: (id: string) => `/dashboard/guides/${id}`,
    },
  }
};
  1. ページの作成

app/[locale]/(basic-layout)/blogとapp/[locale]/(protected)/dashboard/(admin)/blogsの両方をコピーし、フォルダ名とファイル内のblogとblogs関連の設定情報を、それぞれguideとguidesに変更します。

components/cms/フォルダ下の基本CMSコンポーネントはすべて共有されているため、最小限の変更で新しいページを完成させることができます。

注意

ブログモジュールはローカルmdxファイルをサポートしています。他のCMSモジュールを追加する場合は、ローカルmdxファイルのサポートは推奨しません。そのため、app/[locale]/(basic-layout)/blog/page.tsxとapp/[locale]/(basic-layout)/blog/[slug]/page.tsxにおいて、lib/getBlogs.tsファイル内のメソッドを呼び出すのではなく、actions/posts/posts.ts内のリストと詳細メソッドを直接呼び出す必要があります。

  1. app/sitemap.tsを補完してGuideページのデータを構築します

これで、まったく新しいCMSモジュールが完成します。