Next.jsで改行を保存する方法

Next.jsで改行を保存するときに少し悩んだのでその方法を紹介します。

こちらの記事を参考にしました。
https://qiita.com/ossan-engineer/items/bdb45368ab453af38342

最初にFirestoreにデータを保存します。
保存するときに、contextの改行を「/n」に置き換えて保存するため、

context: context.replace(/\r?\n/g, "\n"),

とすると、Firestoreで改行部分に/nが入って保存できます。

  const addDate = async () => {
    if (image == null) {
      alert("サムネイルを選んでください");
    } else {
      const result = await postImage(image);
      const newdate = new Date().toLocaleString("ja-JP");
      setResult(result);
      // console.log(downloadURL);
      addDoc(databaseRef, {
        title: title,
        context: context.replace(/\r?\n/g, "\n"),
        downloadURL: result,
        email: user.email,
        displayname: user.displayName,
        categori: categori,
        createtime: newdate,
        netabare: netabare,
        photoURL: user.photoURL,
        userid: user.uid,
      })
        .then(() => {
          alert("記事投稿ができました。");
          setTitle("");
          setContext("");
          setCategori("");
          setNetabare("");
          setPhotoURL("");
          setUserid("");
          router.push("/home");
        })
        .catch((err) => {
          console.error(err);
        });
    }
  };

  return (
 #省略
            <TextField
              label="内容*(最大500文字）"
              className="m-auto w-full"
              id="filled-multiline-static"
              multiline
              rows={14}
              value={context}
              onChange={(event) => {
                if (event.target.value.length <= 500) {
                  setContext(event.target.value);
                }
              }}
            />
            <br></br>
            <br></br>
            <div className="text-center">
              <Button
                variant="outlined"
                onClick={addDate}
                className="text-center m-auto my-10"
              >
                投稿する
              </Button>

これで保存部分は完成です。

次に改行部分を表示します。
表示する際には、このstyleを当てることで表示できます。

const styles = { whiteSpace: 'pre-line' }; 

<div className="w-80 m-auto" style={styles}>
{netabare == "ネタバレ無" && <p>{context}</p>}
 </div>