今ご覧になっているサイトを新しく作りました。 きっかけはBentoというサイトを見かけて、自分の好きなアプリや音楽を載せている方をたびたび見かけて自分のサイトにもそのような機能をつけたいなと思いました。
Favorite
このページには私が Spotify でよく聴いている曲や、お気に入りの本などを表示しています。本は Notion API から取得していて、気軽に更新できるようにしています。
Emoji Collection
特に気に入っているのはEmoji Collectionです。このブログや Zenn で使用した絵文字を表示するようにしています。
OGP も動的に生成しています。(Fluent Emoji だとなぜか一部の絵文字が表示されなかったのでissue を立てました)
Notes
毎日の振り返りを書くページ。自分がログインすると書き込めるようにしています。ブログに書くほどでもないけど振り返ると面白そう。
技術的なところ
このサイトは Nex.js 13 の App Dir で作っています。結構ハマった部分もありましたが、思ったよりも使い勝手がよかったです。
他の技術スタックとしては
- スタイリング： Tailwind CSS
- コンテンツ管理： Contentlayer
- OGP 生成： @vercel/og
- 認証： Next Auth
- データベース： PlanetScale
- O/R マッパ： Prisma
- デプロイ： Vercel
などを使っています。
このブログは MDX で書いていて、ブログ内でもコンポーネントを呼び出すことができ、より色々な表現ができそうです。
MDX ファイルの先頭には以下のように yaml 形式で記事の情報を指定しています。
---
title: 新しいサイトを作った
emoji: 🍱
date: 2023-03-07
published: true
---
MDX ファイルの作成が地味に面倒だったので、簡単な CLI を自作して yarn で実行して対話形式で生成できるようにしています。
昔は Markdown ファイルの取得は fs モジュールを使うのが主流だったと思うのですが、Contentlayer を使っています。ファイルの表示やコンパイルを簡単に行なえるライブラリで、gray-matterやnext-mdx-remoteなどを使わなくて良いのはかなり楽でタイプセーフで非常に使いやすかったです。
前まで Notion Blog やヘッドレス CMS で記事を書いたりもしていたものの、画像周りが大変だったりプレビューが面倒だったりなんだかんだ GitHub で管理するのが楽なのかなと思います。
Contentlayer の記事はあまり日本では見つけられなかったので詳しくはそのうち Zenn に書こうと思います。
このウェブサイト上のコンテンツはCC BY 4.0 DEEDで利用できます