当サイトを Next.js API Router で全面改修しました。変わったところ、書き直したところを挙げます。

ビジュアル面

装飾は少ないですが、少しシュッとした見た目にしようと頑張りました。ヘッダーなんかは半透明になっています。

フォントをちょっとオシャレにしたかったので Noto Sans JP と Poppins を利用しています。 タイポグラフィは難しいね。

注意事項

iOS Safari の古いバージョンでスタイルが崩れないことは保証できないです。 grid とか gap とかを使ってサラッと書きたかったので。

Next.js API Router はまだ beta なので、 CSS の読み込みがうまくいかず、スタイルが一瞬だけ崩れがちです。

ダークモード対応

ライトモード/ダークモードの両方に対応しています（UI上で切り替える機能は準備していませんが、OSのモードに従って見た目が変わります。）

余白とタイポグラフィ

Applying Density （情報の密度）を重視しつつスマートな見た目を目指しています。

Markdown

unified エコシステムを利用しています。prism を利用しているので、コードブロックのシンタックスハイライト周りが何かいい感じになりました

  "use client";
  import { FC, useState, useEffect } from "react";

  /**
   *  SomeComponent is a Client Component.
  **/ 
  const SomeComponent: FC = () => {
    const [count, setCount] = useState<number>(0);

-   document.title = `Count is ${count}`; 
+   useEffect(() => {
+     document.title = `Count is ${count}`;
+   }, [count]);

    return (
      <div>
        <div>Count: {count}</div>
        <button onClick={() => setCount(prev + 1)}>+1</button>
      </div>
    );
  }

React Server Component の採用

React Server Component を採用しました。そのお陰で、上の unified などによるバンドルサイズの肥大を抑えています。

Route (app)                                Size     First Load JS
┌ ○ /                                      0 B                0 B
├ ○ /other-page                            0 B                0 B
├ ○ /posts                                 0 B                0 B
└ λ /posts/[slug]                          0 B                0 B
+ First Load JS shared by all              69.3 kB
  ├ chunks/455-78cd76596c363595.js         66.4 kB
  ├ chunks/main-app-c4632928508cb762.js    203 B
  └ chunks/webpack-c832e62c9f0f8a89.js     2.67 kB

Next.js のレイアウトの活用

Next.js のレイアウトを活用しています。そのお陰で、サーバー側でレンダリングしていいながら、ブログの記事一覧および記事詳細のページで遷移するときには右側カラムの内容が保持されます。

Route Group 便利ですね。 (grp) みたいなディレクトリを使うんですが 「ホームとそれ以外ではレイアウトを変える」ってことが可能になっています。

OGP 対応はまだやってないよ

めんどくさいけど、 Versel だから楽に設定できる…かな？

2023/07/17 追記: サムネイル画像は DreamStudio で生成しました。