<p>本ブログのNextバージョンを12-&gt;13にした際のメモ</p><h2 id="h7392f7751b"><br>アップグレードしたもの</h2><p>package.jsonの差分は以下の通り<br>主に以下のメジャーアップデートを行った</p><pre><code>next: 12 -&gt; 13
react: 17 -&gt; 18</code></pre><p><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/bfbba798dde74fb08a4ed37268979a60/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-18%2015.41.24.png" alt=""><br></p><h2 id="h73616177c0">何をやったか</h2><h3 id="h0376cf1a0d"><br>Next周りの対応</h3><ul><li>Linkコンポーネントのaタグラップしない対応</li></ul><p>Next13からLinkコンポーネントにaタグを挟まなくて良くなった<br>https://nextjs.org/blog/next-13#nextlink</p><ul><li>対応内容: aタグを消す</li></ul><h3 id="h5e015cd3e6"><br>React</h3><ul><li>VFC非推奨</li></ul><p>React.FCでchildrenを使わないことを明示したい場合VFC(Void Functional Conponent)を使っていたが、React18からFCにchildrenが除外された。（使う際に明示する必要がある）それに伴ってVFCは非推奨となったのでFCに変更した。<br>https://ja.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions</p><ul><li>対応内容: VFC -&gt; FCに変更</li></ul><p><br></p><h3 id="hae6947d5ce">microCMS</h3><p>これはバージョンアップに伴い、というより以前の実装部分が古くなってたので修正したものが多い</p><ul><li>ListResponseの型</li></ul><p>リスト系レスポンスの型を独自で定義したが、microCMS側で提供されてたのでそれを使うようにした</p><pre><code>// before
type ListContentsResponse&lt;T&gt; = {
&nbsp; contents: T[]
&nbsp; totalCount: number
&nbsp; offset: number
&nbsp; limit: number
}
type BlogListResponse = ListContentsResponse&lt;BlogResponse&gt;
type StaticProps = {
&nbsp; blogs: BlogListResponse
&nbsp; totalCount: number
}</code></pre><p><br></p><pre><code>// after
import { MicroCMSListResponse } from "microcms-js-sdk"
type StaticProps = {
&nbsp; blogs: MicroCMSListResponse&lt;BlogResponse&gt;
  totalCount: number
}</code></pre><p><br></p><h3 id="ha739b3b8f6">その他</h3><p>上記に伴うファイル整理とか、謎にpromise.allしてるところをawaitに変更する等があったが自分の実装部分なので割愛。<br></p><h2 id="hb7aeae5e0f">終わり</h2><p>思ったほど大工事にはならなかった。</p>

Next 12 -> 13アップグレード したときのメモ

<p>自分のブログにページングついてないということに気づいていたが、良くも悪くもコンテンツがまだページングするほどではないためスルーしていました。<br>いい加減つけておこうと思い立ち対応しました。<br><br>microCMSのガイドがあったのでそれに沿って対応しました。<br>https://blog.microcms.io/next-pagination/<br><br>流れとしては上記記事の通りです</p><ul><li>ページングコンポーネントを作成する</li><li>ブログ一覧ページにページングコンポーネントを導入する</li><li>ページング個別ページを作成する</li></ul><p><br></p><h2 id="h2a40b4fe2c">ページングコンポーネントを作成する</h2><p>記事に掲載されたコードをベースに下記を追加で対応しました</p><ul><li>tsx化</li><li>tailwindでスタイリング</li><li>1ページごとのコンテンツ数を定義</li></ul><pre><code>import Link from "next/link"

type PagenationProps = {
  totalCount: number
}
export const Pagination = (props: PagenationProps) =&gt; {
  const totalCount = props.totalCount


  const range = (start: number, end: number) =&gt;
    [...Array(end - start + 1)].map((_, i) =&gt; start + i)


  return (
    &lt;nav aria-label="Page navigation example"&gt;
      &lt;ul className="inline-flex items-center -space-x-px"&gt;
        {range(1, Math.ceil(totalCount / PER_PAGE)).map((number, index) =&gt; (
          &lt;li key={index}&gt;
            &lt;Link href={`/blogs/page/${number}`}&gt;
              &lt;a className="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"&gt;
                {number}
              &lt;/a&gt;
            &lt;/Link&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/nav&gt;
  )
}

// TODO: 本来はもうちょっと数を増やすべきだが、ページングのテストのため5件にしている
export const PER_PAGE = 5</code></pre><p><br></p><h2 id="he790df742a">ブログ一覧ページにページングコンポーネントを導入する</h2><ul><li>getStaticPropsのパラメータにtotalCount(コンテンツ件数)を追加</li></ul><pre><code>type StaticProps = {
  blogList: BlogListResponse
  totalCount: number  // 追加
}
export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async () =&gt; {
  // 省略
   const totalCount = blogList.totalCount
  // 省略

  return {
    props: { blogList, totalCount },
  }

  // 省略</code></pre><ul><li>ページングコンポーネントを追加</li></ul><pre><code>&lt;Pagination totalCount={totalCount} /&gt;</code></pre><p><br></p><h2 id="ha48740d418">ページング個別ページを作成する</h2><ul><li>src/pages/blogs/page/[id].tsx を作成する</li><li>getStaticPaths でページのパスを定義する</li></ul><pre><code>export const getStaticPaths = async () =&gt; {
  const repos = await client.get({ endpoint: "blogs" })

  const pageNumbers = []

  const range = (start: number, end: number) =&gt;
    [...Array(end - start + 1)].map((_, i) =&gt; start + i)

  const paths = range(1, Math.ceil(repos.totalCount / PER_PAGE)).map(
    (repo) =&gt; `/blogs/page/${repo}`
  )

  return { paths, fallback: false }
}</code></pre><ul><li>getStaticProps でページング個別ページのパラメータを定義する</li></ul><pre><code>export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async (context) =&gt; {
  const { params } = context

  if (!params?.id) {
    throw new Error("Error: ID not found")
  }
  const id = Number(params.id)

  const data = await client.get({
    endpoint: "blogs",
    queries: { offset: (id - 1) * 5, limit: 5 },
  })

  return {
    props: {
      blogs: data,
      totalCount: data.totalCount,
    },
  }
}</code></pre><p><br></p><h2 id="hde965b176a">完成</h2><p>以上！</p>

Next.jsのブログにページングをつけてみた

<p>骨格推定というものを触るかもしれないので、サクッとどんなもんか調べて触ってみました。<br></p><h2 id="hfc8480466f">骨格推定とは</h2><ul><li>画像や動画から人物の骨格を推定する技術</li><li>推定処理はAI</li><li>骨格検知、骨格検出、骨格認識 等言い回しはいくつかある</li></ul><p><br>今回はWebカメラで写った動画を元に、骨格推定を行うというサンプルを作りました。<br><br>参考にした記事は<a href="https://developers.gnavi.co.jp/entry/posenet/hasegawa" target="_blank" rel="noopener noreferrer">こちら</a><br>※ 古めの記事なのでgithubのコード等は無くなってました<br></p><h2 id="h86ee44ea6a">使用ライブラリ</h2><ul><li>TensorFlow.js</li><li>PoseNet</li></ul><blockquote><code>PoseNet</code><span style="color:#333333">は</span><code>TensorFlow.js</code><span style="color:#333333">を使用した、ブラウザで実行可能な姿勢推定ディープラーニングモデルです。</span></blockquote><p><br></p><h2 id="h0c8fa4812e">処理の流れ</h2><p>処理の大枠の流れは以下です</p><ul><li>htmlのvideoタグと使ってブラウザとwebカメラを接続する</li><li><s>videoの動画をcanvasに描画する </s> ← すみませんこちらは勘違いでした。正しくはvideoの上にcanvasを重ねる、でした。</li><li>canvasに描画される度に骨格推定処理を走らせる</li><li>骨格推定処理から取得した骨格座標をcanvasに描画する</li></ul><p><br>今回はPoseNetのうち、単一姿勢を検出するメソッド <code>estimateSinglePose</code>  を使用しました。<br>estimateSinglePose の戻り値に <code>keypoints</code>  という配列があります。<br>この中に各部位ごとの座標（右手首がどの画像の位置にあるか？等の座標情報）が入っているので、こちらを描画に使用します。<br>得られる部位が全部で17箇所あります。<br><br>今回はわかりやすく左右の手首の座標を表示してみました。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/47f65d3348c6492191e0f68b4825e988/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-06%2018.55.09.png" alt=""><br></p><h2 id="h5fcec0cf90">所感</h2><h3 id="h37d688c5eb">良さそう</h3><ul><li>特に準備するものもなく、PCとWebカメラだけでサクッと実装できた</li><li>ライブラリhtmlから読み込んだのは2つのみ</li><li>骨格推定処理の細かいとこがわからなくても、インターフェースがわかりやすい</li></ul><h3 id="h0f5de14ac4">懸念点</h3><ul><li>実際に実装する場合、動かす端末のスペック要件がわかってない（動かす環境は非力なマシンになる想定なので）</li><li>上記懸念があるので、端末ローカルで稼働させるのではなくAPIのような形で外部で処理させたいが方法がわかってない</li></ul><p><br>という感じでした。<br>PoseNet自体はかなり前に公開されているし、参考にした記事も2018年のものなので「なにを今更」的な感じになっているかもしれないが、まあやってみた系の記事として残しておきます。</p><h3 id="hcf83e1357e"><br></h3><h2 id="hcf2b66e679">コード</h2><h3 id="hda1205ad89">html</h3><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://unpkg.com/@tensorflow/tfjs"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/@tensorflow-models/posenet"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;video
      id="video"
      width="800px"
      height="600px"
      autoplay="1"
      style="position: absolute"
    &gt;&lt;/video&gt;
    &lt;canvas
      id="canvas"
      width="800px"
      height="600px"
      style="position: absolute"
    &gt;&lt;/canvas&gt;
    &lt;div class="ball"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js"&gt;&lt;/script&gt;
  &lt;script src="./posenet_sample.js"&gt;&lt;/script&gt;
&lt;/html&gt;</code></pre><p><br></p><h3 id="ha50cf0a4b9">js</h3><pre><code>const imageScaleFactor = 0.2;
const outputStride = 16;
const flipHorizontal = false;
const stats = new Stats();
const contentWidth = 800;
const contentHeight = 600;


bindPage();


async function bindPage() {
  const net = await posenet.load(); // posenetの呼び出し
  let video;
  try {
    video = await loadVideo(); // video属性をロード
  } catch (e) {
    console.error(e);
    return;
  }
  detectPoseInRealTime(video, net);
}


// video属性のロード
async function loadVideo() {
  const video = await setupCamera(); // カメラのセットアップ
  video.play();
  return video;
}


// カメラのセットアップ
// video属性からストリームを取得する
async function setupCamera() {
  const video = document.getElementById("video");
  if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true,
    });
    video.srcObject = stream;


    return new Promise((resolve) =&gt; {
      video.onloadedmetadata = () =&gt; {
        resolve(video);
      };
    });
  } else {
    const errorMessage =
      "This browser does not support video capture, or this device does not have a camera";
    alert(errorMessage);
    return Promise.reject(errorMessage);
  }
}


// 取得したストリームをestimateSinglePose()に渡して姿勢予測を実行
// requestAnimationFrameによってフレームを再描画し続ける
function detectPoseInRealTime(video, net) {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const flipHorizontal = true; // since images are being fed from a webcam


  async function poseDetectionFrame() {
    stats.begin();
    let poses = [];
    const pose = await net.estimateSinglePose(
      video,
      imageScaleFactor,
      flipHorizontal,
      outputStride
    );
    poses.push(pose);


    ctx.clearRect(0, 0, contentWidth, contentHeight);


    ctx.save();
    ctx.scale(-1, 1);
    ctx.translate(contentWidth, 0);
    ctx.drawImage(video, 0, 0, contentWidth, contentHeight);
    ctx.restore();


    poses.forEach(({ score, keypoints }) =&gt; {
      // TODO: 取得した骨格にポイントを描画したい場合
      // keypoints.map((kp, index) =&gt; {
      //   drawWristPoint(kp, ctx);
      // });


      // とりあえず左右の手首のみ描画してみた ポイントの色もとりあえず左右の違いが判別できるように
      drawWristPoint(keypoints[9], ctx, "red");
      drawWristPoint(keypoints[10], ctx, "yellow");
    });


    stats.end();


    requestAnimationFrame(poseDetectionFrame);
  }
  poseDetectionFrame();
}


// 与えられたKeypointをcanvasに描画する
function drawWristPoint(wrist, ctx, color) {
  ctx.beginPath();
  ctx.arc(wrist.position.x, wrist.position.y, 3, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}</code></pre><p><br></p>

TensorFlow.jsとPoseNetで骨格推定をやってみた

<p>本サイトをNext.js x microcmsで作ったが、そのあとmicrocmsからSDKが公開されたとのことで、そちらに対応してみた。<br>基本的には<a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">こちらの記事</a>を参考に進めていった。<br></p><h2 id="h4388330ebc">Next.jsのアップデート</h2><p>各パッケージをアップデートする際以下のようにした。</p><ul><li>最新のNext.js12系でnext appを作成</li><li>作成したpackage.jsonを元のプロジェクトに移し、必要なものだけ再度追加</li></ul><p><br>既存のpackage.jsonを変更したも良かったのだが、以下の理由から一度まっさらにしてから追加しようと思った。<br>まあ個人のプロジェクトなので。</p><ul><li><a href="https://zenn.dev/thiragi/articles/555a644b35ebc1" target="_blank" rel="noopener noreferrer">Next11系からEslintがESLint設定がデフォルトでサポートされた</a></li><li>初期構築時にで試しで色々追加したものを整理したい</li><li>aspida廃止してsdkのclientを使う</li></ul><p><br></p><h2 id="h27500470b6">microCMS API Clientの変更</h2><p>aspidaを使ってmicocmsにアクセスしていたのをsdkが提供しているclientに変更する。<br>API部分を置き換えていく作業。<br></p><pre><code># before
const blogListPromise = client.v1.blogs.$get()

# after
const blogListPromise = client.getList&lt;BlogListResponse&gt;({
  endpoint: "blogs",
})</code></pre><p><br>ぶっちゃけ、見た目としても安全性もaspidaのほうがいい気がする...</p><ul><li>aspida: clientに各API専用のフィールドが生える方式</li><li>sdk: get, getList, getDetail, getObjectに対して各APIのレスポンス型をパラメータとして渡す方式</li></ul><p><br></p><h2 id="hde49fc18ac">ついでにプレビュー機能も実装</h2><p><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/#toc-14" target="_blank" rel="noopener noreferrer">[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る - プレビューの作成</a><br><a href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/preview-mode" target="_blank" rel="noopener noreferrer">Next.js 日本語翻訳プロジェクト - プレビューモード</a><br><br>やったこと</p><ul><li>page/api配下にプレビュー用API配置して、microcmsからプレビューデータを取得できるようにする</li><li>取得したpreviewデータをblogsページで表示できるようにする</li><li>setPreviewDataで表示する方式はCookieのサイズ制限(2KB)があったのでやめた<ul><li><a style="background-color:#ffffff" href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/preview-mode#previewdata-%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E5%88%B6%E9%99%90" target="_blank" rel="noopener noreferrer">Next.js 日本語翻訳プロジェクト - プレビューモード</a><a href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/preview-mode#previewdata-%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E5%88%B6%E9%99%90" target="_blank" rel="noopener noreferrer"> - previewData のサイズ制限</a></li></ul></li></ul><p><br></p><h2 id="h7488fe3729">ハマリポイント</h2><h3 id="h02bf8e8b9a">コンパイラ変更webpack→swc</h3><p>Rust製のコンパイラがデフォルト？になった<br>これについては設定ファイルを変更すると有効になった<br></p><ul><li>.<a style="background-color:#f6f8fa" href="https://github.com/sugiii8/sugiskill-next/pull/1/files#diff-379120de71991cfea15f15a1225d1ba83a7a50e55a356c831f5f5e0be305ce0b" target="_blank" rel="noopener noreferrer">babelrc</a>を削除</li><li>next.config.jsを追加し以下設定</li></ul><pre><code>// next.config.js

module.exports = {
  swcMinify: true
}</code></pre><h3 id="h3dfb9ba4b2"><br>PreviewDataの型変更</h3><p>今回新規でプレビュー機能を実装したので特に困ったわけではないが、<code>previewData</code>の型がanyから以下に変更になったとのこと。<br></p><pre><code>export type PreviewData = string | false | object | undefined;</code></pre><p><br></p><h3 id="h1fc4c7db76">LinterとVSCodeのPrettier</h3><p>微妙に困ったのは、プロジェクトで設定したeslint/prettierとVSCodeで元々設定していたimport順についての設定が競合して無限にエラーとなったこと。<br></p><pre><code># .setting.json  
"editor.codeActionsOnSave": {
    "source.organizeImports": true,   // &lt;-------------　これ
    "source.fixAll.eslint": true
  },</code></pre><p><br>ファイル更新 -&gt; プロジェクトのprettier実行 -&gt; VSCodeのprettier実行 -&gt; プロジェクトのeslintに怒られる<br>という状況。prettierの方法が異なるので発生していると思われる。<br>はじめはVSCode側のprettierが動いてることに気が付かず、プロジェクトの設定を色々変更して時間を費やしてしまった。<br>最終的に<code>"source.organizeImports": true</code>はコメントアウトして解決した。<br> <br>以上で作業完了！</p>

microCMSとNext.jsでブログ作ってみた(SDK)

<p>microCMSという国産ヘッドレスCMSとNext.jsを使ってブログサイトを構築してみようと思いました。<br><br>こちらを参考にしながら進めました。<br><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る</a><br><br>※現在はSDKが提供されているとのことで再編集版が投稿されてました。<br>なので、今(2021/12時点)から始めるにはこちらのほうがいいかもしれません<br><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">microCMS と Next.js でブログを作る（SDK 版）</a><br></p><h2 id="hae6947d5ce">microCMS</h2><h3 id="h7524f66ee2">登録</h3><p><a href="https://document.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">公式ページ</a>を参考にいい感じに登録します。</p><h3 id="h78df02fd38">API</h3><p>API登録する際にリスト形式かオブジェクト形式が選択できます。<br>とりあえず以下の様なAPIを生やしました。</p><h4 id="hfab6db4976">リスト形式</h4><ul><li>blogs: 記事一覧</li><li>portfolios: 何か作って公開したもの一覧</li><li>tags: 記事に付与するタグ一覧</li></ul><h4 id="ha3b9fbc8d9">オブジェクト形式</h4><ul><li>profile: プロフィール</li><li>sitedata: サイト情報、多分headに入れる</li></ul><h2 id="haab1fd6475">Next.js</h2><p><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/" target="_blank" rel="noopener noreferrer">前述の記事</a>を参考にしてcliでnextアプリを生成します。<br><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#getstaticprops%EF%BC%88%E9%9D%99%E7%9A%84%E7%94%9F%E6%88%90%EF%BC%89" target="_blank" rel="noopener noreferrer">公式ページのこの辺</a>を読んでおけば大体OK。<br>今回はブログなのでSSGのみ使います。<br>なので基本的な作業としては以下となります。</p><ul><li>各ページコンポーネントで<code>getStaticProps</code>関数を定義しexportする</li><li>必要なデータ、ここではmicroCMSのAPIで取得した結果をpropsにセットする</li><li>Pageコンポーネントに↑のpropsが渡されるのでそれらをいい感じにrenderする</li></ul><h3 id="h4ebc0439a6">aspida</h3><p>microCMS<br>のデータを取得する際のAPIに型をつけるためにaspidaというHTTPクライアントを導入します。</p><h3 id="ha4bf0462ef">pathpida</h3><p>ついでにリンクについても型をつけられるpathpidaというaspidaの親戚みたいなものがあるのでそれを導入しました。<br>こちらについては先程のブログ記事には無いので<a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">github上のpathpida</a>を参考に。<br>基本的に設定は不要でnext/nuxt両方に対応してくれているようです。<br>下記コマンドをpackage.jsonに追加し実行すると、pages配下の構造に応じたメソッドを定義したファイル(lib/$path.ts or utils/$path.ts)が生成されます。</p><pre><code>    "dev:path": "pathpida --watch",</code></pre><p><br>生成されたファイルを各ページコンポーネントにimportして使います。</p><pre><code>import { pagesPath } from '@/utils/$path'

pagesPath.profile.$url()</code></pre><p><br></p><h2 id="h9dcc071ccd">デプロイ</h2><h3 id="had9f88b197">github x vercel連携</h3><p>github x vercelを連携しgithubにpushしたらビルドが走るようにしておきます<br></p><h3 id="h55c04bc843">microCMS x vercel連携</h3><p>同じくmicroCMSのコンテンツを追加・更新した時もビルドが走るようにしたい。<br>microCMSからvercelへwebhookする設定があるのでする。webhook飛ばすタイミングは色々と設定できる。<br>注意点としてはwebhookの設定はAPI単位なので、全てのコンテンツ追加・更新のタイミングでビルドしたい定義したい場合はそれぞれのAPIで設定しなければならなそう。<br><br>これで一旦作成完了しました。<br>プレビュー機能はスキップしたのと、OGPだとか細かい設定はできてないので後々やる予定です。<br></p><h4 id="hce2b598e0e">レイアウト調整</h4><p>完了..と思ってビルド結果をみたらコンテンツ部分にスタイルがあたってなかったので修正。<br><a href="https://zenn.dev/crea7/articles/5b2fde4be6b6f3" target="_blank" rel="noopener noreferrer">microCMS + TailwindCSSでのHTMLコンテンツに対するスタイル適用</a>を参考に対応していく。<br><a href="https://github.com/tailwindlabs/tailwindcss-typography" target="_blank" rel="noopener noreferrer">tailwindlabs/tailwindcss-typography</a>を使う。<br></p><blockquote><span style="color:#24292f">A plugin that provides a set of&nbsp;</span><code>prose</code><span style="color:#24292f">&nbsp;classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).</span></blockquote><p><br><span style="color:#24292f">MarkdownとかCMSからレンダリングしたHTMLにスタイルを当ててくれますと。</span><br>コンテンツ流し込んでる要素のclassに<code>prose</code>を追記する。<br> <br>直った。OK。</p>

Tag: js

Next 12 -> 13アップグレードしたときのメモ

Next.jsのブログにページングをつけてみた

TensorFlow.jsとPoseNetで骨格推定をやってみた

microCMSとNext.jsでブログ作ってみた(SDK)

microCMSとNext.jsでブログ作ってみた

Tag: js

Next 12 -> 13アップグレード したときのメモ

Next.jsのブログにページングをつけてみた

TensorFlow.jsとPoseNetで骨格推定をやってみた

microCMSとNext.jsでブログ作ってみた(SDK)

microCMSとNext.jsでブログ作ってみた

Next 12 -> 13アップグレードしたときのメモ