vài lựa chọn xử lý rich text content từ graphcms với Nextjs site

Cày Nextjs site, Kouveo thường xuyên gặp rắc rối. Vốn từ ngữ không đủ (cả tiếng Anh lẫn tiếng Việt) nên đéo biết mô tả vande gặp fải thenao. Việc tìm jaifap rất chật vật và tốn thoijan. Thỉnh thoảng còn gặp trường hợp đang tìm cách jaiquyet vande này thì jẫm mẹ fải jaifap cho một vande khác trước đó.

Hnay Kouveo bàn chuyện xử lý rich text content từ GraphCMS trong Nextjs site.

GraphCMS data

GraphCMS có mấy lựa chọn nhập data: Multiline Text, Markdown & Rich Text. Kouveo thường zùng Rich Text mặc zù thích Markdown hơn. Có mấy lyzo:

• Jaozien nhập liệu Markdown của GraphCMS xấu ỉn, chữ rất bé, zùng lâu hại mắt.
• Kouveo chưa biết cách xử lý markdown với Nextjs.
• Nếu biết cách và cần zùng Markdown, vẫn lấy markdown data từ rich text được (qua truy vấn graphql).

Có một điểm khó chịu khi zùng Rich Text, đó là không zùng hình ảnh từ lienket ngoài (vizu Cloudinary, Imagekit...) được mà cứ fải upload lên assets folder của nó (GraphCMS).

Truy vấn content data qua graphql, người zùng cothe lựa chọn ketqua trả về là text, markdown, html, raw. Đối với tay mơ như Kouveo, nhiều lựa chọn không fải tốt. Rất mất thoijan để tìm ra đúng cái mình cần và fuongtien zùng để xử lý nó.

Vài fuongfap xử lý rich text content data (Nextjs)

Cách 1: Lấy ketqua html & zùng dangerouslySetInnerHTML

Cái này không cần cài đặt ji cả, cứ thế zùng luôn. Kouveo đặt className để làm style với các thành fần bên trong (nested elements?) bằng Tailwind.

<div 
    className="kouveo" 
    dangerouslySetInnerHTML={{ __html: post.content.html }}
 />

Cách 2: Lấy ketqua html & zùng html-react-parser

Zùng cách này nếu cần thay thế một số thanhfan noizung (cần cài đặt trước). Vizu thay hình ảnh <img ... > tag bằng <Image ... > tag của Nextjs.

Code zưới đây thay thế <a> tags bằng <Link> tags của ChakraUI

// import
import { parse } from 'html-react-parser';

// use
<Box maxW="100%" fontSize="xl">
    {parse(note.content.html, {
        replace: (domNode) => {
            if (domNode.attribs && domNode.attribs.href) {
                return (
                    <Link
                        href={domNode.attribs.href}
                        color="teal.600"
                        isExternal
                    >
                        {domNode.children[0].data}
                    </Link>
                );
            }
        },
    })}
</Box>

Cách 3: Lấy ketqua raw & zùng @graphcms/rich-text-react-renderer

Cách này cũng cần cài đặt trước. Code zưới đây thay <img ...> tag bằng <Image ...> tag của Nextjs (Kouveo lược bớt một số chi tiết lằng nhằng).

// import
import { RichText } from '@graphcms/rich-text-react-renderer';

// use
<div className="kouveo">
    <RichText
        content={post.content.raw}
        renderers={{
            img: ({ src, altText, height, width }) => (
                <figure>
                    <Image
                        src={src}
                        alt={altText}
                        width={width}
                        height={height}
                        layout="responsive"
                    />
                    <figcaption className="text-sm italic">{altText}</figcaption>
                </figure>
            ),
        }}
    />
</div>

Các fuongfap xử lý trên chưa chắc đã fải tốt nhất. Nhưng Kouveo mới chỉ biết đến thế. Cám ơn đã đọc.