再度リニューアルしました。Pagesでブログリニューアル記念にスクリーンショットも。ついでにソースコードも公開しておきます。abekoh/blog-next表題の通り、リニューアルしました。2週間くらい前から反映させてます。Pagesで構築しておりました。Templateを用いたものを触る必要あり。個人的に気分が乗らない...といったことが不満でした。microCMSといった構成が一つの流行りらしく、モダンなフロントまわりの勉強がてらこの構成で構築してみることにしました。構築についてはこれらの記事ほぼそのままです。microCMS公式の記事microCMSは公式のチュートリアルが充実しており、他にもたくさん参考できそうなところが多そうでした。Reactと最近のJavaScript/TypeScriptに関しては、ここでも紹介した通りこの同人誌が非常に参考になりました。Next.jsデザインフレームワークはMaterial-UIを採用しました。frameworkさらに、最近のHTML/CSSまわりの情報をこの本ざっと読んでキャッチアップしました。知らない記述方法など知れてよかったです。SEOだけでなく、iOS向け、Android向け、Twitter/Facebook共有用のためのmeta/link設定など非常に多くあってびびりました。Tips構築していく上でつまづいたところ、力入れたところなどをいくつか紹介します。Material-UIをNext.jsで使うMaterial-UIをNext.jsといったSSRなフレームワークで利用する際、一工夫が必要となります。Material-UI公式にも書かれている通り、リクエストごとにServerStyleSheetsをサーバーサイドで生成、CSSとして埋め込むといったことをしないといけないようです。Next.jsでのサンプルもここにあります。mui-org/material-ui罠でハマったのが、<Head>のimport元。下記のように_document.tsxで呼ぶ場合とそれ以外で異なり、間違ってると正常にページが表示されませんでした。'next/head';各種環境向けアイコン/faviconfaviconといえば昔はfavicon.icoひとつ置くだけでOKでしたが、今はスマホ用ブラウザ用など規格が乱立しているようでした。このGeneratorを使って一発で作成→設定することができました。browsersプレビューや設定されてるかチェックする機能もあって便利です。技術系タグにアイコンをつけるこだわりポイントです。deviconというOSSに、さまざまな技術スタックのアイコンが用意されてます。protected]/devicon.min.css"></Head>Material-UIのIconコンポーネントで利用するようにしてみました。タグ自体はChipを用いてます。label={tag.name}/>Next.jsでRSSやsitemap.xmlなど設定こちらの記事が参考になりました。Next.jsで動的にRSSフィードを生成するNext.jsで動的にXMLサイトマップを生成するJSX/TSXで他のページと同様に作ってしまえるので管理が非常に楽です。protocolのことで、TwitterやFacebook、Slackにリンクを貼り付けたときに見える画像やテキスト情報についての規格です。次の記事を参考に、canvasを使って動的に生成するようにしてみました。JI23-DEVこの記事のOGP画像は次のリンクに設定しています。https://blog.abekoh.dev/api/ogp-images/build-blog-with-nextjsタイトルをASCII文字なら幅2、それ以外なら幅1としてカウントし、適当なところで改行するようにしてみました。まとめ特にReact/Next.jsの知識が身についてきて楽しかったです。改良したい部分があるので、引き続きブラッシュアップしていきます。