(備忘録) プロフィールページのNode.jsとNext.jsをバージョンアップする

Vercelからメールが来たので対応。今後も運用したいプロフィールページなのでサクッと終わらせます。Node.js, Next.js, Node.js(Vercel環境)をバージョンアップします。

Vercelからのメール

対象のプロフィールページはいつも言ってるあのページのことです。前回の記事は下記

thinking-capy.blog

結論

Before

Node.js：v18.16.1
Node.js(Vercel)：18.x
Next.js：v13.4.19

After

Node.js：v20.19.2
Node.js(Vercel)：20.x
Next.js：v14.2.32

やり方

1. Node.js

nodenvを使ってるのでローカルで.node-versionを更新し、動作確認をする。

yarn run dev

ページが表示できればひとまず成功としています。

2. Node.js(Vercel)

ローカルでうまくいったのでVercelのダッシュボードから Setting > Build Deployment > Node.js Version に移動してバージョンを変更する その後デプロイされたページを確認(ブランチを切ってPreviewで動作確認してからmainブランチにmergeすると良いです)。

3. Next.js

14に上げます。

nextjs.org

素直にコマンドを打ちます。

yarn add next@next-14 react@18 react-dom@18 && yarn add eslint-config-next@next-14 -D

コマンド自体は素直に終わりました。

コマンド実行後のターミナル

アプリ起動してみると

yarn run dev

エラーが出た。

yarn run v1.22.22
$ next dev
Invalid next.config.js options detected: 
    Unrecognized key(s) in object: 'protocol' at "images"
See more info here: https://nextjs.org/docs/messages/invalid-next-config
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

どうやらnext.config.jsの書き方が変わったらしいです。

nextjs.org

next.config.jsを更新しました。imagesの部分を変えました。

Before

/** https://vanilla-extract.style/documentation/integrations/next */
/** integrate vanilla-extract */
const {
  createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();


/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false,
    images: {
        protocol: 'https',
        domains: ["avatars.githubusercontent.com"],
    },
};

module.exports = withVanillaExtract(nextConfig);  

After

/** https://vanilla-extract.style/documentation/integrations/next */
/** integrate vanilla-extract */
const {
  createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();


/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false,
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: "avatars.githubusercontent.com",
            },
        ],
    },
};

module.exports = withVanillaExtract(nextConfig);  

ブランチを切ってバージョンアップ作業をしてるのでCIやVercelのダッシュボードも確認する。

GitHubのCI

mergeして本番環境で動作確認して終わり。

さいごに

今回はプロフィールページなので簡単にできました。動作確認もほぼ不要ですし。しかし、これがWebアプリとなると簡単なことではない(テストとかテストとかテストとか.....)。まだまだ個人開発としてはレベル低いなと思います。サービスを作れるようにならないといけない。

React.jsのバージョンアップは今回してません。Next.jsの公式Docにもコマンドなかったので不要と判断しました。失敗してたらまた記事を書きます。