Tích hợp MDX vào Astro và Next.js: Hướng dẫn từ A đến Z cho nội dung động

Bài viết này sẽ hướng dẫn bạn cách tích hợp MDX vào các dự án Astro và Next.js để tạo ra những trang web với nội dung phong phú, linh hoạt và dễ dàng tùy biến. Chúng ta sẽ khám phá các phương pháp khác nhau để render MDX, từ việc sử dụng các gói tích hợp sẵn cho đến việc tự xây dựng quy trình xử lý, đồng thời giải quyết các vấn đề thường gặp.

MDX là gì và tại sao nên sử dụng?

MDX là một định dạng file cho phép bạn sử dụng các thành phần JSX, các biểu thức biến và các thành phần giao diện người dùng (UI) trực tiếp bên trong nội dung Markdown. Điều này mở ra khả năng tạo ra các trang web động, tương tác cao hơn so với việc chỉ sử dụng Markdown thông thường. Nếu bạn đã có sẵn nội dung được viết bằng MDX, việc tích hợp nó vào dự án Astro hoặc Next.js sẽ trở nên dễ dàng hơn bao giờ hết.

Tích hợp MDX vào Astro

Astro cung cấp một tích hợp chính thức cho MDX thông qua gói @astrojs/mdx. Quá trình cài đặt và sử dụng rất đơn giản, cho phép bạn nhanh chóng tận dụng sức mạnh của MDX trong dự án của mình.

Cài đặt @astrojs/mdx

Bạn có thể sử dụng lệnh astro add để tự động cài đặt và cấu hình tích hợp MDX:

npx astro add mdx

Hoặc, bạn có thể cài đặt thủ công bằng cách sử dụng trình quản lý gói yêu thích của bạn:

npm install @astrojs/mdx

Sau khi cài đặt, hãy thêm tích hợp vào file cấu hình astro.config.mjs:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});
    

Sử dụng MDX trong Content Collections

Để sử dụng các file MDX trong Content Collections, bạn cần cấu hình bộ tải (loader) của collection để nhận diện các file .mdx:

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
  })
});

export const collections = { blog };
    

Xuất biến và sử dụng Frontmatter trong MDX

MDX hỗ trợ sử dụng các câu lệnh export để thêm biến vào nội dung MDX hoặc xuất dữ liệu cho một component import nó. Bạn cũng có thể sử dụng frontmatter (các biến được định nghĩa trong phần đầu của file MDX) giống như trong các file Markdown thông thường.

Sử dụng Components trong MDX

Sau khi cài đặt tích hợp MDX, bạn có thể import và sử dụng cả Astro components và UI framework components trong các file .mdx.

Tích hợp MDX vào Next.js

Next.js cũng hỗ trợ MDX thông qua gói @next/mdx. Việc tích hợp MDX vào Next.js cho phép bạn tận dụng các tính năng của Next.js như SSR (Server-Side Rendering) và Static Site Generation (SSG) để tối ưu hóa hiệu suất trang web.

Cài đặt @next/mdx

pnpm add @next/mdx @mdx-js/loader @types/mdx remark-frontmatter remark-mdx-frontmatter remark-gfm

Sau khi cài đặt các dependencies cần thiết, bạn cần cấu hình file next.config.mjs để sử dụng @next/mdx. Bạn cũng cần thêm các plugins Remark để hỗ trợ frontmatter và các tính năng Markdown nâng cao:

import createMdxPlugin from "@next/mdx";
import withFrontmatter from "remark-frontmatter";
import withMdxFrontmatter from "remark-mdx-frontmatter";
import withGfm from "remark-gfm";

/** @typedef {import('next').NextConfig} NextConfig */
/** @type {NextConfig} */
const config = {};

/** @type {Array<(config: NextConfig) => NextConfig>} */
const plugins = [
  createMdxPlugin({
    options: {
      remarkPlugins: [withFrontmatter, withMdxFrontmatter, withGfm],
    },
  }),
];

export default plugins.reduce((config, plugin) => {
  return plugin(config);
}, config);

    

Sử dụng mdx-components.tsx

Để sử dụng các component tùy chỉnh trong MDX, bạn có thể định nghĩa chúng trong file src/mdx-components.tsx:

import type { MDXComponents } from "mdx/types";
import { RedText } from "./components/red-text";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    RedText,
    ...components,
  };
}
    

Các phương pháp Render MDX khác

Sử dụng @mdx-js/mdx trực tiếp

Bạn có thể sử dụng thư viện @mdx-js/mdx trực tiếp để biên dịch MDX thành JavaScript và render nó. Phương pháp này cho phép bạn kiểm soát hoàn toàn quá trình render, nhưng đòi hỏi nhiều cấu hình hơn so với việc sử dụng các gói tích hợp sẵn.

Sử dụng next-mdx-remote (cho Next.js)

next-mdx-remote là một thư viện cho phép bạn render MDX từ xa, ví dụ như từ một API hoặc cơ sở dữ liệu. Điều này rất hữu ích khi bạn muốn tạo nội dung động mà không cần biên dịch MDX trong quá trình build.

Kết luận

Tích hợp MDX vào Astro và Next.js mở ra nhiều khả năng sáng tạo và tùy biến cho trang web của bạn. Bằng cách sử dụng các gói tích hợp sẵn hoặc các phương pháp render trực tiếp, bạn có thể tạo ra những trang web với nội dung phong phú, linh hoạt và tương tác cao.