いまさら感がありますが Next.js でサイトやりかえました
日付:2023-08-15更新日:2023-08-15
目次
きっかけ
もともと Vue.js 使ってたし、じゃあ 勉強がてら Gridsome でサイトを立ち上げよー!だったんですが、仕事のメインが React になり、次メンテナンスを担当するのが Next.js ということで、重い腰をあげてやりかえました。
もっとイマドキのやつあるやんっていうのは無しで。。
本当は、今年の初め??くらいに着手しはじめて、停滞。このお盆休みでなんとか形にして公開したって感じです。
なので、ところどころ忘れている…
参考にしたのは、↓こちらです!!ほぼこれどおりではないでしょうか。。
Next.jsを利用した初めての本格的Markdownブログサイトの構築
入れたコンポーネント群
忘れぬうちに書いとこ。
-
gray-matter
markdownのメタデータを取得する
データとフロントマターを分けて取得できる -
react-markdown
markdownをhtmlに変換してくれる -
next-seo
SEO対策 -
tailwindcss/typography
tailwindcssでtypographyを使えるようにする -
unified
markdownをパースしてくれる -
remark-parse
markdownをパースしてくれる -
remark-rehype
markdownをhtmlに変換してくれる -
rehype-stringify
htmlを文字列に変換してくれる -
remark-toc
markdownの目次を作成してくれる -
rehype-slug
markdownの見出しにidを付与してくれる -
rehype-parse rehype-react
markdownのhtmlをreactコンポーネントに変換してくれる
CSS daisyUI と Googlefont を入れた
daisyUIを使ってポートフォリオサイトを爆速で作った
感想
記事を md ファイルで書いていたので、引っ越しは楽だったかな?ファルをガサッと持ってきたらいいだけだったし。
といっても、書き方をちょっと変える必要はあったけど。
やらねばやらねば〜と思っていたので、ちょっと一安心したけど、またやりかえる時がきそうw
なので、スタイルは最低限に。
とりあえず、何かをかくプラットフォームがあるのは良い。
サーバーは、Netlify から Vercel に引っ越し。 ドメインが gridosome なのは、気にしない…