ポートフォリオサイトをNext.jsで作りました

はじめに

今はまだポートフォリオとはとても呼べないですが、ブログ記事はちょこちょこ更新します。

近いうちに個人開発のwebサービスもリリースしていこうと思います。

はじめてNext.jsを使ったサイトを作りました。

Udemyでチュートリアル講座を1つ学んだ上で手をつけたのですが、勢いで作った割に、スタックするような場面はありませんでした。

やはり日本語の情報がたくさんあるのはありがたいです。

（25/03/24修正と追記）
サイトデザインをもう少しシンプルにしたくなり、雑多になっていたCSSファイル管理からの脱却をかねて、CSS ModuleからTailwindCSSに乗り換えました。

TailwindCSSはいろいろ賛否がありますが、とっちらかったCSSを管理するよりも、個人的には楽です。

最近勢いがあるとCloudflare Pagesを使ってサイトをホスティングしました。

ポートフォリオのドメインを用意するのにあたり、購入と管理を簡単にできるのもポイントです。

ただし、ドメイン購入の際に楽天カードで決済ができず、困っていろいろとググった結果、下記の記事にたどり着きました。


stin.ink を Google Domains から Cloudflare Registrar に移管した | stin's Blog
blog.stin.ink

またx(twitter)で検索すると、同様の症状の方は割といらっしゃって

といった情報がありました。

私の場合、paypalでも解決できず、もともと持っていた別のVISAデビットカードでようやく決済できました。

ローカルにmdファイルで管理しています。

mdファイルをjsxにパースするライブラリとしてはreact-markdownが有名だそうで、そのまま利用しました。

スタイリングは、github-markdown-cssを使ってます。

（25/03/24追記）
上記だけでは物足りなかったので、remark-gfmプラグインを導入しました。


remarkjs/remark-gfm: remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)
github.com

これで「取り消し線」、「表」、「タスクリスト」などをマークダウンで使えるようになりました。

導入方法は、react-markdownのプラグイン導入に記載されています。とても簡単で助かります。

個人的な不満点はまだまだあるので、1つずつ解決していこうと思います。

ではまた。