Sylph を使ってサイトをリニューアルした

リニューアル前は、 Next.js のチュートリアルをもとに作成したサイトに、自分で機能を追加したり、見た目を整えたりしていました。

しかし、少し前に Sylph という Next.js のスターターを知りました。

このスターターは、 MDX でコンテンツを管理できたり、 Tailwind を使っていたり、諸々が好みの感じで、必要としていた機能も備えていたので採用しました。

初期状態から見た目がよく、かつシンプルなスタイリングなので、カスタマイズもやりやすいです。

個人的なお気に入りは、デフォルトで用意されている <Preview /> コンポーネントです。次のように、コードブロックと並べて、そのコードの結果を投稿内に表示したりできます。

<div className="text-5xl animate-spin">😵‍💫</div>

ちなみにリニューアル前は次のような見た目でした。

リニューアル前に比べ、見た目も機能もよくなったので、これからはもっと頻繁に投稿していこうと思います。

参考

• Sylph