Next.js (App Router・SSG)でブログサイトを作った
はじめに
タイトルの通りブログサイトを作りました。
ガジェット系や聖地巡礼などの趣味に関する記事をたまに投稿していく予定です。
ファビコン
このサイトのファビコンはDALL-E 3で生成したJPEG画像をVectorizer.AIでSVGに変換したものです。
「猫のアイコンを描いて」という雑な指定で、一発で良さそうなのが出てきました。便利な時代ですね。
技術構成
おおまかな技術構成はこんな感じです。
- フレームワーク: Next.js App Router SSG
- ホスティング: Cloudflare Pages
- コンテンツ管理: microCMS
- スタイリング: Tailwind CSS、shadcn/ui
- HTMLのパース: rehype (unified)
フレームワーク
Next.js App RouterのSSGを使用しています。
Next.jsを触るのは初めてだったのですが、情報が豊富で学びやすかったです。
ただ、Page RouterとApp Routerの情報が混在していて、その点は少し大変でした。
ホスティング
Cloudflare Pagesでホスティングしています。デプロイが簡単で、無料で表示速度も早くて快適です。
コンテンツ管理
コンテンツ管理には国産ヘッドレスCMSのmicroCMSを使っています。
はじめはMarkdownファイルで管理しようとしていたのですが、記事の公開日・更新日の管理や画像最適化が面倒だったためヘッドレスCMSに変更しました。
microCMSではデフォルトでimgixのAPIが使えるため、画像のURLパラメーターをいじるだけで最適化ができて便利です。
デザイン・CSS
Tailwind CSSを使用しています。
記事部分は@tailwindcss/typographyとzenn-content-cssを参考にしながら、自力でスタイルを当てました。
また、テーマ切り替えボタン、モバイル用のメニューにshadcn/uiのコンポーネントを使いました。
HTMLのパース
rehype (unified)を使用しています。
プラグインが豊富で、シンタックスハイライトの適用や、見出し要素へのid付与などが簡単にできました。
リンクカード
自作のrehypeプラグインで素のURLテキストをリンクカードに変換しています。
コード
rehypeプラグインのRehype Pretty Codeを使ってシンタックスハイライトを適用しています。
const helloWorld = () => {
console.log("Hello World");
}
helloWorld()今後実装したい機能
- タグページ
- サイドバー目次
- 下書き記事のプレビュー機能
- 文字列変換、整形などのブラウザツール
サンプルテキスト
以下はスタイルのサンプルです。
h3見出し
h4見出し
強調
これは太字です
これはイタリック体です
これは取り消し線です
リスト
- 順序ありリスト
- 順序ありリスト
- 順序ありリスト
- 順序ありリスト
- 順序ありリスト
- 順序なしリスト
- 順序なしリスト
- 順序なしリスト
- 順序なしリスト
- 順序なしリスト
- 順序なしリスト
リンク
これはリンクテキストです
コード
これはinline codeです
def fib(n): # write Fibonacci series up to n
"""Print a Fibonacci series up to n."""
a, b = 0, 1
while a < n:
print(a, end=' ')
a, b = b, a+b
print()
# Now call the function we just defined:
fib(2000)表
列見出し | 列見出し | |
|---|---|---|
行見出し | 内容 | 内容 |
行見出し | 内容 | 内容 |
引用
引用です。
ネストされた引用です。
よだかは、実にみにくい鳥です。
顔は、ところどころ、味噌をつけたようにまだらで、くちばしは、ひらたくて、耳までさけています。
足は、まるでよぼよぼで、一間とも歩けません。
ほかの鳥は、もう、よだかの顔を見ただけでも、いやになってしまうという工合でした。