本文をリッチエディタだけで構成していたので、新たに繰り返しフィールドで「セクション」を作成し、カスタムフィールドを選択する。<ol><li>ハイライト<ol><li>言語：プルダウン</li><li>本文：テキストエリア</li></ol></li><li>WYSIWYG：リッチエディタ</li></ol> <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/555b8cac16f340e0bce7a7d5cb3c43c7/rapture_20230413011334.png" alt=""> <h3 id="h3f07c05784">カスタムフィールドの構成</h3>ハイライト - 言語には、よく使用する言語を設定<ul><li>JavaScript</li><li>PHP</li><li>HTML（Markup）</li><li>CSS</li><li>SCSS</li><li>JSON</li><li>Bash</li></ul><h3 id="hcf83e1357e"> </h3>記事は作成したフィールドに登録しなおす。 <h3 id="h4c1a529477">PrismのインポートとCSSの読み込み</h3><pre><code>npm i prismjs</code></pre> サポートしている言語一覧 <a href="https://prismjs.com/#supported-languages" target="_blank" rel="noopener noreferrer">https://prismjs.com/#supported-languages</a> スタイルをあてたい言語を選択してcssファイルをダウンロード <a href="https://prismjs.com/download.html#themes=prism-tomorrow&amp;languages=markup+css+clike+javascript" target="_blank" rel="noopener noreferrer">https://prismjs.com/download.html#themes=prism-tomorrow&amp;languages=markup+css+clike+javascript</a> ダウンロードしたprism.cssを/src/stylesに配置して_app.tsで読み込む _app.ts<pre><code>import "@/styles/prism.css";</code></pre> <h3 id="h911c0b0593">[slug].tsxにカスタムフィールドを展開する</h3>class名にlanguage-（：言語）でprismのスタイルがあたる<pre><code>import Prism from "prismjs";
～
return (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {post.section.map((sec: PostPageProps) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sec.fieldId === "highlight") {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;pre key={sec.fieldId}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;code className={`language-${sec.lang}`}&gt;{sec.body}&lt;/code&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/pre&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={sec.fieldId}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dangerouslySetInnerHTML={{ __html: sanitizer(sec.body) }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}
)

</code></pre> Todo：mapの展開をユニークなキーに変更する Todo：ハイライトとWYSIWYGをコンポーネント化する

本文をリッチエディタだけで構成していたので、新たに繰り返しフィールドで「セクション」を作成し、カスタムフィールドを選択する。<ol><li>ハイライト<ol><li>言語：プルダウン</li><li>本文：テキストエリア</li></ol></li><li>WYSIWYG：リッチエディタ</li></ol><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/555b8cac16f340e0bce7a7d5cb3c43c7/rapture_20230413011334.png" alt="" width="1170" height="395"> <h3 id="h3f07c05784">カスタムフィールドの構成</h3>ハイライト - 言語には、よく使用する言語を設定<ul><li>JavaScript</li><li>PHP</li><li>HTML（Markup）</li><li>CSS</li><li>SCSS</li><li>JSON</li><li>Bash</li></ul><h3 id="hcf83e1357e"> </h3>記事は作成したフィールドに登録しなおす。 <h3 id="h4c1a529477">PrismのインポートとCSSの読み込み</h3>

サポートしている言語一覧<a href="https://prismjs.com/#supported-languages" target="_blank" rel="noopener noreferrer">https://prismjs.com/#supported-languages</a> スタイルをあてたい言語を選択してcssファイルをダウンロード<a href="https://prismjs.com/download.html#themes=prism-tomorrow&amp;languages=markup+css+clike+javascript" target="_blank" rel="noopener noreferrer">https://prismjs.com/download.html#themes=prism-tomorrow&amp;languages=markup+css+clike+javascript</a> ダウンロードしたprism.cssを/src/stylesに配置して_app.tsで読み込む_app.ts

<h3 id="h911c0b0593">[slug].tsxにカスタムフィールドを展開する</h3>class名にlanguage-（：言語）でprismのスタイルがあたる

import Prism from "prismjs";
～
return (
 {post.section.map((sec: PostPageProps) => {
 if (sec.fieldId === "highlight") {
 return (
 <pre key={sec.fieldId}>
 <code className={`language-${sec.lang}`}>{sec.body}</code>
 </pre>
 );
 } else {
 return (
 <div
 key={sec.fieldId}
 dangerouslySetInnerHTML={{ __html: sanitizer(sec.body) }}
 />
 );
 }
 })}
)

Todo：mapの展開をユニークなキーに変更するTodo：ハイライトとWYSIWYGをコンポーネント化する

本文にシンタックスハイライトprism.jsを設定する

<h3 id="hb59a34cf0d">サイト内でも使える情報をconstで管理</h3><pre><code>├ src
│└ const
│ └ site.ts</code></pre> site.ts<pre><code>export const SITE_DATA = {
&nbsp; TITLE: 'サイト名',
&nbsp; DESCRIPTION: 'ディスクリプション',
&nbsp; URL: 'https://xxx.info',
}
export const SNS = {
&nbsp; TWITTER_SITE: '@xxx',
 //FACEBOOK: '',
}
export const GTM_ID = 'xxx';</code></pre> <h3 id="hc511e9b924">next-seoパッケージを入れる</h3><pre><code>npm install next-seo</code></pre> デフォルト設定用の<code>next-seo.config.ts</code>ファイルを作成する<pre><code>import { DefaultSeoProps } from 'next-seo';
import { SITE_DATA, SNS } from '@/const/site';

const config: DefaultSeoProps = {
&nbsp; titleTemplate: `%s | ${SITE_DATA.TITLE}`,
&nbsp; defaultTitle: SITE_DATA.TITLE,
&nbsp; // description: SITE_DATA.DESCRIPTION,
&nbsp; canonical: SITE_DATA.URL,
&nbsp; openGraph: {
&nbsp; &nbsp; type: 'article',
&nbsp; &nbsp; locale: 'ja_JP',
&nbsp; &nbsp; url: SITE_DATA.URL,
&nbsp; &nbsp; siteName: SITE_DATA.TITLE,
&nbsp; &nbsp; title: SITE_DATA.TITLE,
&nbsp; },
&nbsp; twitter: {
&nbsp; &nbsp; site: SNS.TWITTER_SITE,
&nbsp; &nbsp; cardType: 'summary_large_image',
&nbsp; },
};
export default config;</code></pre> <h3 id="h1194e6c664">各ページに設定する</h3>_app.ts next-seo.config.tsのデフォルト設定を_app.tsで読み込む<pre><code>import { DefaultSeo } from "next-seo";
import SEO from "../../next-seo.config";

～
&nbsp; return (
&nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &lt;DefaultSeo {...SEO} /&gt;
 &lt;/&gt;
 )</code></pre> src/pages/index.tsx ほとんどデフォルト設定なので変更したいところだけ指定<pre><code>&lt;NextSeo
&nbsp; openGraph={{
&nbsp; &nbsp; type: "website",
&nbsp; }}
/&gt;</code></pre> src/pages/[slug].tsx<pre><code>const router = useRouter();
const pageUrl = `${SITE_DATA.URL}/${router.query.slug}`;
～
return (
 &lt;NextSeo
 &nbsp; title={post.title}
 &nbsp; canonical={pageUrl}
 &nbsp; openGraph={{
 &nbsp; &nbsp; url: pageUrl,
 &nbsp; &nbsp; title: post.title,
 &nbsp; }}
 /&gt;
)</code></pre> <blockquote>Built-in SEO Support: New Metadata API to set static and dynamic meta tags.</blockquote>Next13.2でApp Routerを使ったメタ情報を最適化する機能が強化された OGP画像はまた後日。

<h3 id="hb59a34cf0d">サイト内でも使える情報をconstで管理</h3>

export const SITE_DATA = {
  TITLE: 'サイト名',
  DESCRIPTION: 'ディスクリプション',
  URL: 'https://xxx.info',
}
export const SNS = {
  TWITTER_SITE: '@xxx',
  //FACEBOOK: '',
}
export const GTM_ID = 'xxx';

<h3 id="hc511e9b924">next-seoパッケージを入れる</h3>

デフォルト設定用の<code>next-seo.config.ts</code>ファイルを作成する

import { DefaultSeoProps } from 'next-seo';
import { SITE_DATA, SNS } from '@/const/site';

const config: DefaultSeoProps = {
  titleTemplate: `%s | ${SITE_DATA.TITLE}`,
  defaultTitle: SITE_DATA.TITLE,
  // description: SITE_DATA.DESCRIPTION,
  canonical: SITE_DATA.URL,
  openGraph: {
    type: 'article',
    locale: 'ja_JP',
    url: SITE_DATA.URL,
    siteName: SITE_DATA.TITLE,
    title: SITE_DATA.TITLE,
  },
  twitter: {
    site: SNS.TWITTER_SITE,
    cardType: 'summary_large_image',
  },
};
export default config;

<h3 id="h1194e6c664">各ページに設定する</h3>_app.tsnext-seo.config.tsのデフォルト設定を_app.tsで読み込む

import { DefaultSeo } from "next-seo";
import SEO from "../../next-seo.config";

～
 return (
 <>
 <DefaultSeo {...SEO} />
 </>
 )

src/pages/index.tsxほとんどデフォルト設定なので変更したいところだけ指定

const router = useRouter();
const pageUrl = `${SITE_DATA.URL}/${router.query.slug}`;
～
return (
 <NextSeo
 title={post.title}
 canonical={pageUrl}
 openGraph={{
 url: pageUrl,
 title: post.title,
 }}
 />
)

<blockquote>Built-in SEO Support: New Metadata API to set static and dynamic meta tags.</blockquote>Next13.2でApp Routerを使ったメタ情報を最適化する機能が強化された OGP画像はまた後日。

next-seoを使ってSEOメタ情報のデフォルト設定と各ページの設定

案件でよくあるケースを想定して実装してみる<ul><li>Google タグマネージャー</li><li>GA4</li></ul> Next.js公式：<a href="https://nextjs.org/docs/basic-features/script" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/basic-features/script</a> <h2 id="h6cbbab004e">ケース1：GTMのパッケージを使ってタグを設置</h2><pre><code>npm i react-gtm-module</code></pre> Typescriptには対応していないので、&nbsp;<code>Could not find a declaration file for module 'react-gtm-module'</code> のエラーがでる。 <h3 id="hdc58f3524c">型定義のないパッケージを使う</h3><pre><code>├ src
│└ pages
│　└ type
│　　└ react-gtm-module.ts</code></pre> react-gtm-module.ts<pre><code>declare module 'react-gtm-module'</code></pre> tsconfig.json<pre><code>&nbsp; &nbsp; "paths": {
&nbsp; &nbsp; &nbsp; "@/*": ["src/*"],
&nbsp; &nbsp; &nbsp; "react-gtm-module": ["types/react-gtm-module"]
&nbsp; &nbsp; }</code></pre> 参考サイト <a href="https://zenn.dev/yuji/articles/eb44899c4c44f8" target="_blank" rel="noopener noreferrer">https://zenn.dev/yuji/articles/eb44899c4c44f8</a> 参考サイト <a href="https://www.learnbestcoding.com/post/9/easiest-way-to-integrate-google-analytics-with-react-js-and-next-js#whereToPutScriptTags" target="_blank" rel="noopener noreferrer">https://www.learnbestcoding.com/post/9/easiest-way-to-integrate-google-analytics-with-react-js-and-next-js#whereToPutScriptTags</a> <pre><code>import { useEffect } from "react";
import TagManager from "react-gtm-module";
export default function App({ Component, pageProps }: AppProps) {
&nbsp; useEffect(() =&gt; {
&nbsp; &nbsp; TagManager.initialize({ gtmId: process.env.NEXT_PUBLIC_GTM_ID });
&nbsp; }, []);
&nbsp; return (
&nbsp; &nbsp; &lt;Layout&gt;
&nbsp; &nbsp; &nbsp; &lt;Component {...pageProps} /&gt;
&nbsp; &nbsp; &lt;/Layout&gt;
&nbsp; );
}</code></pre> このままだと&lt;Link&gt;コンポーネントを使用したページ遷移が計測されないらしい。 計測されるようにするには、GTMの設定変更が必要 GTMに履歴変更トリガーを追加する <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/a9e549476fde4ed8b44dd746112b3372/rapture_20230407010116.png" alt=""> 公開を忘れずに <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b38fc91aaae045c496d54c6ee4ddbd63/rapture_20230407010244.png?w=300&amp;h=87" alt=""> 一度この設定で様子を見て、どのような計測結果が得られるか見てみることに。 他のGTMを設定やGA4の設置方法は、ゆくゆくは試す予定。

案件でよくあるケースを想定して実装してみる<ul><li>Google タグマネージャー</li><li>GA4</li></ul> Next.js公式：<a href="https://nextjs.org/docs/basic-features/script" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/basic-features/script</a> <h2 id="h6cbbab004e">ケース1：GTMのパッケージを使ってタグを設置</h2>

Typescriptには対応していないので、&nbsp;<code>Could not find a declaration file for module 'react-gtm-module'</code> のエラーがでる。 <h3 id="hdc58f3524c">型定義のないパッケージを使う</h3>

├ src
│└ pages
│　└ type
│　　└ react-gtm-module.ts

    "paths": {
      "@/*": ["src/*"],
      "react-gtm-module": ["types/react-gtm-module"]
    }

参考サイト<a href="https://zenn.dev/yuji/articles/eb44899c4c44f8" target="_blank" rel="noopener noreferrer">https://zenn.dev/yuji/articles/eb44899c4c44f8</a> 参考サイト<a href="https://www.learnbestcoding.com/post/9/easiest-way-to-integrate-google-analytics-with-react-js-and-next-js#whereToPutScriptTags" target="_blank" rel="noopener noreferrer">https://www.learnbestcoding.com/post/9/easiest-way-to-integrate-google-analytics-with-react-js-and-next-js#whereToPutScriptTags</a>

import { useEffect } from "react";
import TagManager from "react-gtm-module";
export default function App({ Component, pageProps }: AppProps) {
 useEffect(() => {
 TagManager.initialize({ gtmId: process.env.NEXT_PUBLIC_GTM_ID });
 }, []);
 return (
 <Layout>
 <Component {...pageProps} />
 </Layout>
 );
}

このままだと&lt;Link&gt;コンポーネントを使用したページ遷移が計測されないらしい。計測されるようにするには、GTMの設定変更が必要 GTMに履歴変更トリガーを追加する<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/a9e549476fde4ed8b44dd746112b3372/rapture_20230407010116.png" alt="" width="1163" height="374">公開を忘れずに<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b38fc91aaae045c496d54c6ee4ddbd63/rapture_20230407010244.png?w=300&amp;h=87" alt="" width="300" height="87"> 一度この設定で様子を見て、どのような計測結果が得られるか見てみることに。他のGTMを設定やGA4の設置方法は、ゆくゆくは試す予定。

Google タグマネージャー／GA4を設定する

<h3 id="he89948be34">記事用のテンプレを用意する</h3>フィールド[slug]をURLに使うので、ファイル名は[slug].tsx <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/48e61ebcbe6c48159e84e624dfc99f6a/rapture_20230404013356.png" alt=""> URL＝重複NGなのでフィールドの詳細設定で「重複を許可しない」を有効にする。 ※1つのAPIに対して5つのフィールドまで設定可能。 <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f6438adfb8048948425e524f0244ccc/rapture_20230405010929.png" alt=""> 「<a href="/aspida-microcms">aspidaを使ってmicroCMSの記事を取得してタイトルをリスト表示する</a>」で作ったaspida/fetchを使う。 <blockquote>If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated.</blockquote><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching/get-static-paths" target="_blank" rel="noopener noreferrer">getStaticPaths｜Next.js 日本語翻訳プロジェクト</a> 動的ルーティングを使うときは、getStaticPathsとgetStaticPropsを両方使う。 <pre><code>export const getStaticPaths: GetStaticPaths = async () =&gt; {
&nbsp; const data = await client.blog.$get();
&nbsp; const paths = data.contents.map((content) =&gt; `/${content.slug}`);
&nbsp; return {
&nbsp; &nbsp; paths,
&nbsp; &nbsp; fallback: false,
&nbsp; };
}
export const getStaticProps: GetStaticProps = async (context) =&gt; {
&nbsp; const slug = context.params?.slug;
&nbsp; const data = await client.blog.$get({
&nbsp; &nbsp; query: {
&nbsp; &nbsp; &nbsp; filters: `slug[equals]${slug}`,
&nbsp; &nbsp; },
&nbsp; });
&nbsp; return {
&nbsp; &nbsp; props: { data },
&nbsp; };
};</code></pre> <pre><code>import { format } from "date-fns";
//略
type PostPageProps = InferGetStaticPropsType&lt;typeof getStaticProps&gt;;
const Post: NextPage&lt;PostPageProps&gt; = (data: PostPageProps) =&gt; {
&nbsp; const post = data.data.contents[0];
 const publishedAt = format(new Date(post.updatedAt), "yyyy-MM-dd");
 return (
 &lt;article&gt;
 &lt;h1 className="text-xl font-bold pb-4"&gt;{post.title}&lt;/h1&gt;
 &lt;div dangerouslySetInnerHTML={{ __html: post.body }} /&gt; //TODO:dompurifyに変更する
 &lt;time dateTime={publishedAt}&gt;
 &nbsp; &nbsp; &nbsp; {publishedAt}
 &nbsp; &nbsp; &lt;/time&gt;
 &lt;/article&gt;
 )
}
export default Post;</code></pre> <h3 id="h5bc68d306a">リッチエディタの本文を表示する</h3>dangerouslySetInnerHTMLをそのまま使うのは、安全性に欠けるとのことなのでXXS対策としてDOMPurifyを入れる。<pre><code>npm i dompurify</code></pre> <code>dompurify__WEBPACK_IMPORTED_MODULE_3___defaul</code>のエラーがでた　→　 <blockquote>Note that I had to call DOMPurify.sanitize() server-side, as it assumes we’re in a Node.js environment, so I put it into getStaticProps():</blockquote><a href="https://flaviocopes.com/nextjs-parse-markdown/" target="_blank" rel="noopener noreferrer">How to parse Markdown in Next.js</a> getStaticPropsの場合、Node環境で実行していることを想定しないといけないよう。 <s>→エラー回避をどうするかトライ中</s> クライアントとサーバーどちらでも使えるパッケージがあったので、「isomorphic-dompurify」を入れる。 <pre><code>npm i&nbsp;isomorphic-dompurify</code></pre> <pre><code>import dompurify from "isomorphic-dompurify";
const alert = "hoge&lt;script&gt;alert();&lt;/script&gt;hoge";

//何も表示されずscriptが実行されアラート表示
&lt;div dangerouslySetInnerHTML={{ __html: sanitizer(alert) }}&gt;&lt;/div&gt;

//script部分が除去されhogehogeだけ出力される
const sanitizer = dompurify.sanitize;
&lt;div dangerouslySetInnerHTML={{ __html: sanitizer(alert) }}&gt;&lt;/div&gt;</code></pre> 参考サイト：<a href="https://www.devmaesters.com/blog/8" target="_blank" rel="noopener noreferrer">https://www.devmaesters.com/blog/8</a> <h3 id="h1cc7848d5c">日付フォーマットはライブラリを使う</h3><pre><code>npm i&nbsp;date-fns</code></pre>&lt;time&gt;のdatetime属性は<code>dateTime﻿</code>で指定する。

<h3 id="he89948be34">記事用のテンプレを用意する</h3>フィールド[slug]をURLに使うので、ファイル名は[slug].tsx<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/48e61ebcbe6c48159e84e624dfc99f6a/rapture_20230404013356.png" alt="" width="1137" height="107"> URL＝重複NGなのでフィールドの詳細設定で「重複を許可しない」を有効にする。※1つのAPIに対して5つのフィールドまで設定可能。 <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f6438adfb8048948425e524f0244ccc/rapture_20230405010929.png" alt="" width="701" height="156"> 「<a href="https://biboroku.microcms.io/aspida-microcms" target="_blank" rel="noopener noreferrer">aspidaを使ってmicroCMSの記事を取得してタイトルをリスト表示する</a>」で作ったaspida/fetchを使う。 <blockquote>If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated.</blockquote><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching/get-static-paths" target="_blank" rel="noopener noreferrer">getStaticPaths｜Next.js 日本語翻訳プロジェクト</a> 動的ルーティングを使うときは、getStaticPathsとgetStaticPropsを両方使う。

export const getStaticPaths: GetStaticPaths = async () => {
  const data = await client.blog.$get();
  const paths = data.contents.map((content) => `/${content.slug}`);
  return {
    paths,
    fallback: false,
  };
}
export const getStaticProps: GetStaticProps = async (context) => {
  const slug = context.params?.slug;
  const data = await client.blog.$get({
    query: {
      filters: `slug[equals]${slug}`,
    },
  });
  return {
    props: { data },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
 const data = await client.blog.$get();
 const paths = data.contents.map((content) => `/${content.slug}`);
 return {
 paths,
 fallback: false,
 };
}
export const getStaticProps: GetStaticProps = async (context) => {
 const slug = context.params?.slug;
 const data = await client.blog.$get({
 query: {
 filters: `slug[equals]${slug}`,
 },
 });
 return {
 props: { data },
 };
};


import { format } from "date-fns";
//略
type PostPageProps = InferGetStaticPropsType<typeof getStaticProps>;
const Post: NextPage<PostPageProps> = (data: PostPageProps) => {
 const post = data.data.contents[0];
 const publishedAt = format(new Date(post.updatedAt), "yyyy-MM-dd");
 return (
 <article>
 <h1 className="text-xl font-bold pb-4">{post.title}</h1>
 <div dangerouslySetInnerHTML={{ __html: post.body }} /> //TODO:dompurifyに変更する
 <time dateTime={publishedAt}>
 {publishedAt}
 </time>
 </article>
 )
}
export default Post;

<h3 id="h5bc68d306a">リッチエディタの本文を表示する</h3>dangerouslySetInnerHTMLをそのまま使うのは、安全性に欠けるとのことなのでXXS対策としてDOMPurifyを入れる。

<code>dompurify__WEBPACK_IMPORTED_MODULE_3___defaul</code>のエラーがでた　→　 <blockquote>Note that I had to call DOMPurify.sanitize() server-side, as it assumes we’re in a Node.js environment, so I put it into getStaticProps():</blockquote><a href="https://flaviocopes.com/nextjs-parse-markdown/" target="_blank" rel="noopener noreferrer">How to parse Markdown in Next.js</a> getStaticPropsの場合、Node環境で実行していることを想定しないといけないよう。<s>→エラー回避をどうするかトライ中</s> クライアントとサーバーどちらでも使えるパッケージがあったので、「isomorphic-dompurify」を入れる。

import dompurify from "isomorphic-dompurify";
const alert = "hoge<script>alert();</script>hoge";

//何も表示されずscriptが実行されアラート表示
<div dangerouslySetInnerHTML={{ __html: sanitizer(alert) }}></div>

//script部分が除去されhogehogeだけ出力される
const sanitizer = dompurify.sanitize;
<div dangerouslySetInnerHTML={{ __html: sanitizer(alert) }}></div>

2023.10.13追記microCMSのリッチエディタでリンクと別タブで開くを設定すると、<code>target=&quot;_blank&quot;</code>が入るようになりましたが、サニタライズで除去されてしまったのでtarget属性を許可する設定を追加しました。<pre><code>&lt;div
 className={styles.body}
 key={`${sec.fieldId}${index}`}
 dangerouslySetInnerHTML={{
 __html: sanitizer(sec.body, {
 ADD_ATTR: [&quot;target&quot;],
 }),
 }}
/&gt;</code></pre>

参考サイト：<a href="https://www.devmaesters.com/blog/8" target="_blank" rel="noopener noreferrer">https://www.devmaesters.com/blog/8</a> <h3 id="h1cc7848d5c">日付フォーマットはライブラリを使う</h3>

&lt;time&gt;のdatetime属性は<code>dateTime﻿</code>で指定する。

フィールドに設定したスラッグで記事を取得・表示・XSS対策

Tailwindcss公式 <a href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/guides/nextjs</a><pre><code>npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p</code></pre> tailwind.config.js<pre><code>module.exports = {
&nbsp; content: [
&nbsp; &nbsp; "./src/**/*.{js,ts,jsx,tsx}",
&nbsp; ],
…
}</code></pre> globals.css<pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre>

Tailwindcss公式<a href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/guides/nextjs</a>

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
…
}

@tailwind base;
@tailwind components;
@tailwind utilities;