ブログreplaceしました

published
2024-05-23
tags

今回元々gatsbyを用いた構成の個人ブログを、next.js+contentful構成にreplaceしました。

なぜ?

動機は主に二つ

  • gatsbyをやめたい
  • 他社員さんが個人ブログを作成されていて、それに感化された

前身のmark2君は、記事を投稿するのに、逐一画像を用意しないといけなく(そうしたのは自分なのですが...)大変でした。 また、mark2君を作った当時は、まだ自分のフロントに対する技術が浅く、コードも良くはなかった為、どこかでnext.jsにreplaceしたいなとはずっと思っていました。

後は、社員さんが個人ブログを作っていてよいなーと感じたので、それに感化されてreplaceに踏み込んだ感じですね。

仕様技術

仕様技術はこんな感じ

  • next.js(App router)
  • tailwind css
  • contentful CMS
  • vercel

とても...よく見る構成ですね。(とてもよく見ます。)

nextはSvelte・Astro等も魅力的で悩んだのですが、Reactを書きなれている+この前にnextを用いてアプリを作っていたので、今回はnextにしました。
ただ、別の機会で上記2つも触れてはみたいですね。

また、このブログの記事は、next.js君のopengraph-image.tsxによって、動的OGP生成をしています。そういったSEOの機能面でもnextを選択して良かったかなと思います(他2つも同様のことができるかもですが)
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

tailwindを採用したのは、元のmark2君の要素を残したかったからではなく、単純に他の有名UI Componentを使用したことがあり、新鮮さを求めていたからですね。

contentfulは、以前ブログreplaceするんや!って意気込んだ際にアカウントだけ作成してあったので、ノーサーチで選びました。(ヘッドレスCMSなら何でもよかったのですが)

vercel君に関しては、完全にイレギュラーです。
本当はcloudflare pagesでデプロイを行おうと思っていたのですが、next.js14のdynamic routeでデプロイバグがあり、断念しました。 そのバグはどうやら他の方も直近起きていて、解決法も今のところないようなので一旦vercelにしました。
https://github.com/cloudflare/next-on-pages/issues/745

もしバグが解消されるor回避策がわかればvercel君とはおさらばするかもしれないです

あとmarkdownのHTML変換等はreact-markdownと、レイアウトはtailwind/typographyを用いて行っています。

今後

基本zennにアウトプットをしていこうかなと思っていたのですが、折角replaceしておいて使わないのは気持ちよくないので、ちょくちょく記事投稿していこうと思います。