プロフィールページでNext.jsを使うのやめてReact.jsにする

はじめに

thinking-capy.blog

これの続きです。 Next.jsを活かして色々作ろうと思ったのですが、タイトルの通りNext.jsを使うことをやめました。

モチベ

いくつかあります。

Next.jsの機能を使う機能開発をしない

app routerを使うデモを作っていましたがわざわざ追加するほどのものではありませんでした。元々プロフィールページですし機能は不要です。

軽い方がバージョンアップが簡単

thinking-capy.blog

バージョンアップ対応、やはり面倒なんですよ。なのでできるだけ使うライブラリを増やさずシンプルさを保ちたいと考えました。

直していく

1. Next.js → React.jsに手作業で直そうとする(うまくいかなかった)

これはうまくいきませんでした。とにかくエラーが出ました。

yarn start

でReactを起動させることができてもvanilla-extract/cssが動かなくなって画面が表示されませんでした。

バンドルツールなどフロントエンドのコーディング以外の知識が自分にないことも難航した原因です。元々プロフィールページでコンポーネント数もコード量も少ないので今回は逃げの選択として作り直して移植する選択肢をとりました。

2. 作り直して移植

シンプルに作り直します。

2-1. Vite導入

せっかく作り直すのでViteに挑戦してみました。

ja.vite.dev

新規開発は自分の好きなようにできるのが良いですね。改めて実感しました。プロジェクトを作り、vanilla-extract/cssを導入するまでは簡単でした。

yarn create vite capi-profile-page -- --template react-ts
yarn add @vanilla-extract/css
yarn add -D @vanilla-extract/vite-plugin

Vite用のプラグインなんてあるんですね。

vanilla-extract.style

2-2. next/image を書き換える

Next.jsではImageコンポーネントを使っていました。これがないので自作します。最低限で作ります。

type ImageProps = {
    src: string;
    alt?: string;
    width?: number;
    height?: number;
    className?: string;
};

export function Image({ src, alt = "", width, height, className }: ImageProps) {
    return (
        <img
            src={src}
            alt={alt}
            width={width}
            height={height}
            className={className}
        />
    );
}

2-3. Vercel設定変更

開発ブランチをVercelで公開しようとすると失敗します。設定をViteに対応しましょう。

開発環境に無事反映が成功したら本番環境の設定も変更し、開発ブランチをmergeします。

やってみて

正直負けた気持ちです。「プロフィールページだから作り変える選択肢がとれた」と考えています。本来のアプリケーション開発ではなかなか作り変えるという決断はできないと思います。

今回の経験でビルドやバンドラーなどJavaScriptを支える技術にもっと詳しくならないといけないという課題を手に入れることができました。