<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>本サイトを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: microCMS

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

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

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

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

Tag: microCMS

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

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

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

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

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