Menu

How to Use the CMS Module

Attention

In the v3.2.3 - 3.2.4 update, Nexty's CMS was refactored using TipTap, gaining more features and a significantly improved content editor experience.

Supported Features

The CMS functionality provided by the Nexty.dev boilerplate is the most comprehensive among all SaaS boilerplates, supporting a very rich set of features. Moreover, through TipTap's extensive plugin ecosystem, you can easily extend even more functionality.

Here are the features already supported by the Nexty boilerplate:

  • Blog module provided by default
  • Shared basic components and data tables; new content modules can be created by adding minimal files and code
  • Supports both local mdx file rendering and server-side CMS data rendering
  • Supports view count statistics
  • Detail pages support TOC
  • Detail pages support displaying related articles (determined by shared tags)
  • Create and edit content supports:
    • Article basic information: title, slug, description, tags, cover image
    • Language selection: supports different languages with the same slug design
    • Advanced features: status settings (draft, published, archived), visibility (public, logged-in users, subscribed users), pinned
  • Content editor toolbar is very rich, supporting:
    • Markdown basic functions: bold, italic, underline, headings, numbering, quotes, code, horizontal rule, links, etc.
    • Tables: both rows and columns support add, delete, move
    • Image upload: local upload, external image link, CloudFlare R2 selection; supports multiple images side by side
    • Video: YouTube video links
    • Translation
    • Most toolbar plugins support enable/disable through configuration

Directory Structure

components/cms/               // Shared components
  ├─ PostDataTable.tsx        // List & pagination
  ├─ PostEditorClient.tsx     // Create/edit entry point
  ├─ PostForm.tsx             // Form + Tiptap
  ├─ PostList.tsx             // Frontend infinite scroll
  ├─ PostCard.tsx             // Frontend card
  ├─ ImageUpload.tsx          // R2 upload
  ├─ TagInput.tsx             // Form tag field
  ├─ TagManagementDialog.tsx  // Tag management dialog
  └─ post-config.ts           // Configuration for each PostType; complete module configuration here if multiple CMS modules are needed
 
components/tiptap/
  ├─ TiptapEditor.tsx         // Rich text editor main component
  ├─ TiptapRenderer.tsx       // Frontend read-only renderer
  ├─ ImageGridExtension.ts    // Image grid custom Node
  ├─ ImageGridNodeView.tsx    // Edit mode image grid view
  ├─ ImageGridReadOnlyView.tsx // Read mode image grid view
  ├─ R2ResourceSelector.tsx   // R2 media selector
  ├─ TableMenu.tsx            // Table floating toolbar
  ├─ TableOfContents.tsx      // Table of contents generator
  └─ TranslationButton.tsx     // AI translation button
 
 
actions/posts/                // Shared Server Actions
  ├─ posts.ts                 // CRUD + frontend read
  ├─ tags.ts                  // Tag CRUD
  └─ views.ts                 // View count
 
app/[locale]/(protected)/dashboard/(admin)/blogs/
  ├─ page.tsx                 // List page
  ├─ new/page.tsx             // Create page
  └─ [postId]/edit/page.tsx   // Edit page
 
app/[locale]/(basic-layout)/blog/
  ├─ page.tsx                 // Frontend list
  └─ [slug]/page.tsx          // Detail page
 
lib/
  ├─ db/schema.ts             // Drizzle models; related tables: posts, tags, and postTags
  └─ getBlogs.ts              // Local MDX read

Feature Showcase

Since the CMS features are all WYSIWYG, no detailed introduction is needed. The functionality can be understood through images.

cms
cms
cms
cms
cms

Image upload supports local upload, external links, and CloudFlare R2 selection

cms
cms

Image display supports multiple images side by side

cms

Supports inserting YouTube videos

cms

Editor content supports quick translation

cms

How to Modify Content Editor Features

All feature files for the content editor are located under components/tiptap. You can modify them after familiarizing yourself with the code, or you can have AI help you modify them. AI is very proficient with TipTap.

How to Add New Content Modules

If you're developing a content website, the blog module alone may not be sufficient. You might want to add multiple content modules to enrich the website's content structure. This requirement can be easily solved using the Nexty.dev boilerplate.

Taking the addition of a Guide module as an example, you only need to complete the following steps:

  1. Extend CMS content type
lib/db/schema.ts
export const postTypeEnum = pgEnum('post_type', [
  'blog',
  "guide" // add
])

Then execute the commands:

npm run db:generate
 
npm run db:migrate
  1. Extend CMS configuration
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}`,
    },
  },
  // add
  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. Create pages

Copy both app/[locale]/(basic-layout)/blog and app/[locale]/(protected)/dashboard/(admin)/blogs, and change the folder names and the blog and blogs related configuration information inside the files to guide and guides respectively.

Since the basic CMS components under the components/cms/ folder are all shared, you only need to make minimal modifications to complete the new pages.

Attention

The blog module supports local mdx files. If you're adding other CMS modules, I don't recommend supporting local mdx files, so you need to directly call the list and detail methods in actions/posts/posts.ts in app/[locale]/(basic-layout)/blog/page.tsx and app/[locale]/(basic-layout)/blog/[slug]/page.tsx, rather than calling the methods in the lib/getBlogs.ts file.

  1. Supplement app/sitemap.ts to construct data for the Guide pages

With this, a brand new CMS module is complete.