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.
Top comments (0)