vài lựa chọn xử lý rich text content từ graphcms với Nextjs site
Tags: nextjs, graphcms, richtext, styles
Published: 2022-03-18 06:50:32

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 <u>đang tìm cách jaiquyet vande này</u> thì jẫm mẹ fải <u>jaifap cho một vande khác</u> trước đó.


![somewhere on reddit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgmjvrg3fzcj19afqdw6.png)

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à <u>fuongtien</u> 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.

```jsx
<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](https://www.npmjs.com/package/html-react-parser)). 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

```jsx
// 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](https://www.npmjs.com/package/@graphcms/rich-text-react-renderer). 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).

```jsx
// 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.