今回元々gatsbyを用いた構成の個人ブログを、next.js+contentful構成にreplaceしました。
動機は主に二つ
前身のmark2君は、記事を投稿するのに、逐一画像を用意しないといけなく(そうしたのは自分なのですが...)大変でした。
また、mark2君を作った当時は、まだ自分のフロントに対する技術が浅く、コードも良くはなかった為、どこかでnext.jsにreplaceしたいなとはずっと思っていました。
後は、社員さんが個人ブログを作っていてよいなーと感じたので、それに感化されてreplaceに踏み込んだ感じですね。
仕様技術はこんな感じ
とても...よく見る構成ですね。(とてもよく見ます。)
nextはSvelte・Astro等も魅力的で悩んだのですが、Reactを書きなれている+この前にnextを用いてアプリを作っていたので、今回はnextにしました。
ただ、別の機会で上記2つも触れてはみたいですね。
また、このブログの記事は、next.js君のopengraph-image.tsxによって、動的OGP生成をしています。そういったSEOの機能面でもnextを選択して良かったかなと思います(他2つも同様のことができるかもですが)
tailwindを採用したのは、元のmark2君の要素を残したかったからではなく、単純に他の有名UI Componentを使用したことがあり、新鮮さを求めていたからですね。
contentfulは、以前ブログreplaceするんや!って意気込んだ際にアカウントだけ作成してあったので、ノーサーチで選びました。(ヘッドレスCMSなら何でもよかったのですが)
vercel君に関しては、完全にイレギュラーです。
本当はcloudflare pagesでデプロイを行おうと思っていたのですが、next.js14のdynamic routeでデプロイバグがあり、断念しました。
そのバグはどうやら他の方も直近起きていて、解決法も今のところないようなので一旦vercelにしました。
もしバグが解消されるor回避策がわかればvercel君とはおさらばするかもしれないです
あとmarkdownのHTML変換等はreact-markdownと、レイアウトはtailwind/typographyを用いて行っています。
基本zennにアウトプットをしていこうかなと思っていたのですが、折角replaceしておいて使わないのは気持ちよくないので、ちょくちょく記事投稿していこうと思います。