Content Manager trong Strapi CMS

Strapi là một CMS mã nguồn mở mạnh mẽ, được thiết kế để hỗ trợ quản lý nội dung một cách linh hoạt và hiệu quả. Trong bài viết này, tôi sẽ giới thiệu cơ bản về Strapi, tập trung vào tính năng Content Manager

Strapi là gì?

Strapi là một headless CMS, cho phép bạn quản lý nội dung và truy xuất dữ liệu thông qua API (REST hoặc GraphQL). Điểm nổi bật của Strapi:

• Linh hoạt: Dễ dàng tùy chỉnh các kiểu nội dung (content types) theo nhu cầu.
• API tự động: Tạo API nhanh chóng để tích hợp với các frontend như Next.js, React, hoặc Vue.
• Mã nguồn mở: Miễn phí, được hỗ trợ bởi cộng đồng lớn.

Content Manager trong Strapi là gì?

Content Manager là công cụ chính trong Strapi, cung cấp giao diện trực quan để tạo, chỉnh sửa và quản lý nội dung. Bạn có thể dễ dàng thêm dữ liệu (như bài viết, sản phẩm) mà không cần viết code phức tạp. Strapi tự động sinh API cho nội dung, giúp việc tích hợp với frontend trở nên đơn giản.

Cách sử dụng Strapi và Content Manager

Cài đặt Strapi và tạo Content Type

Cài đặt Strapi bằng lệnh: npx create-strapi-app my-project --quickstart.
Sau khi cài đặt, truy cập giao diện admin tại http://localhost:1337/admin.

Sử dụng Content-Type Builder để tạo kiểu nội dung.
Ví dụ:
Tạo một content type “NewsArticle” với các trường: tiêu đề (title), nội dung (content), và ngày đăng (publishedDate). Sau khi tạo, tôi vào Content Manager để thêm một bài viết mới, ví dụ: “Tin Tức Công Nghệ Mới Nhất” với nội dung và ngày đăng.

Truy xuất dữ liệu từ Strapi để sử dụng trong Next.js

Mục tiêu: Hiển thị danh sách bài viết từ Strapi trên frontend.
Phương pháp: Gọi API do Strapi cung cấp.
Ví dụ:
Tôi sử dụng Next.js để hiển thị danh sách bài viết. Dưới đây là code trong file /pages/news.js:

import Link from 'next/link';

// Lấy dữ liệu từ Strapi
export async function getStaticProps() {
  const res = await fetch('http://localhost:1337/api/news-articles');
  const data = await res.json();

  return {
    props: {
      articles: data.data,
    },
    revalidate: 10, // Tái tạo dữ liệu sau 10 giây
  };
}

export default function News({ articles }) {
  return (
    < div >
      < h1 >Danh Sách Tin Tức</ h1 >
       < ul >
        {articles.map((article) => (
          < li key={article.id} >
            < Link href={`/news/${article.id}`} >
              {article.attributes.title}
            </ Link >
            < p >Ngày đăng: {article.attributes.publishedDate}< /p >
          </ li >
        ))}
      </ ul >
    </ div >
  );
}

Kết quả: Trang hiển thị danh sách bài viết với tiêu đề và ngày đăng, dữ liệu được lấy từ Strapi. Người dùng có thể nhấp vào tiêu đề để xem chi tiết bài viết.

Lợi ích của Strapi và Content Manager

• • Dễ sử dụng: Giao diện Content Manager trực quan, phù hợp cho cả người không biết lập trình.

• • Hiệu quả: Strapi tự động tạo API, giảm thời gian phát triển backend.

• • Tích hợp tốt: Dễ dàng kết nối với các frontend framework.

Lưu ý khi sử dụng

• • Cần cấu hình quyền truy cập API trong Strapi (Settings > Roles > Public) để frontend có thể gọi dữ liệu.

• • Nếu content type có trường media (như ảnh), hãy thêm ?populate=* vào URL API để lấy đầy đủ dữ liệu.

Kết luận

Strapi là một CMS mạnh mẽ, lý tưởng cho các dự án cần quản lý nội dung linh hoạt. Với Content Manager, việc tạo và quản lý dữ liệu trở nên đơn giản và hiệu quả. Kết hợp với Next.js, bạn có thể nhanh chóng xây dựng các ứng dụng web hiện đại.