Next.jsでdangerouslySetInnerHtmlを使わずに改行コード(\n)で改行する方法

dangerouslySetInnerHtmlは危険です。

Next.jsで単純にtext.replace(/\n/g, '<br/>')で変換するとdangerouslySetInnerHtmlを使う羽目になってしまいます。

そこで今回は安全に改行する方法のメモです。

改行コード + white-spaceでも改行は可能ですが、今回は
を使った改行を紹介します。

import React, { Fragment } from 'react';

type Props = {
    text: string
}

export default function Test({ text }: Props) {
    const formattedDescription = text.split(/(\n)/).map((item, index) => {
        return <Fragment key={index}>{item.match(/\n/) ? <br /> : item}</Fragment>;
    });

    return (
        <div>
            <Typography>{formattedDescription}</Typography>
        </div>
    );
}