Next.js (App Router・SSG)でブログサイトを作った

2024/03/042024/03/07

#dev

はじめに

タイトルの通りブログサイトを作りました。

ガジェット系や聖地巡礼などの趣味に関する記事をたまに投稿していく予定です。

ファビコン

このサイトのファビコンは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という無難な選択肢を取りつつ、今から新しく作るならApp Routerかなと思っての選択です。

Next.jsを触るのは初めてだったので良い勉強になりました。人気のフレームワークなだけあって情報が豊富でしたが、Page RouterとApp Routerの情報が混在していて、その点では少し大変でした。

ホスティング

Cloudflare Pagesでホスティングしています。デプロイが簡単で、無料で表示速度も早くて快適です。

コンテンツ管理

コンテンツ管理には国産ヘッドレスCMSのmicroCMSを使っています。

はじめはMarkdownファイルで管理しようとしていたのですが、記事の公開日・更新日の管理や画像最適化が面倒だったためヘッドレスCMSに変更しました。

画像のURLパラメーターをいじるだけで最適化ができて便利です。

デザイン・CSS

基本的にはTailwind CSSを使用していますが、記事部分のみ素のCSSを使用しています。

記事部分は@tailwindcss/typographyとzenn-content-cssを参考にしながら、自力でスタイルを当てました。

また、テーマ切り替えボタン、モバイル用のメニューにshadcn/uiのコンポーネントを使いました。

HTMLのパース

rehype (unified)を使用しています。

簡単に説明すると、rehype-parseでHTMLを一度hastという構造木に変換して様々な処理を行い、rehype-reactでhastからReact Componentへ変換するという形です。

プラグインが豊富で、シンタックスハイライトの適用や、見出し要素へのid付与などが簡単にできました。

リンクカード

自作のrehypeプラグインで素のURLテキストをリンクカードに変換しています。

ches3

ches3.me

コード

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)

表

	列見出し	列見出し
行見出し	内容	内容
行見出し	内容	内容

引用

引用です。
ネストされた引用です。

よだかは、実にみにくい鳥です。
顔は、ところどころ、味噌をつけたようにまだらで、くちばしは、ひらたくて、耳までさけています。
足は、まるでよぼよぼで、一間とも歩けません。
ほかの鳥は、もう、よだかの顔を見ただけでも、いやになってしまうという工合でした。