Loading...

ブログをNext.js14→16に更新した

Tech

PC が不調でずっと放置していましたが、環境を整えたのでアップデートしてみました。が、いざアップデートしたらいろいろ起きましたので、備忘として残します。

2025/12/05 追記
アップデートした日に脆弱性を出すな～～～！！ 😡

「React」「Next.js」に重大なリモートコード実行の脆弱性、CVSSの基本値は「10.0」【12月8日追記】／脆弱性を悪用した攻撃を試みる通信も存在。一刻も早い対応を
　UIライブラリ「React」（React.js）および「Next.js」で、認証なしにリモートコード実行が可能になる重大なセキュリティ脆弱性「CVE-2025-55182」が存在することが明らかになった。この脆弱性は「React2Shell」とも呼ばれており、CVSSの基本値は満点の「10.0」。一刻も早い対応が必要だ。
窓の杜
「React」「Next.js」に重大なリモートコード実行の脆弱性、CVSSの基本値は「10.0」【12月8日追記】／脆弱性を悪用した攻撃を試みる通信も存在。一刻も早い対応を

大変だったこと

Turbopack への移行

v16 でデフォルトになった Turbopack を使用してそのままビルドするとエラーばかり！

next.config.ts の webpack の設定を Turbopack 向けに変更して、svg ファイルと yaml ファイルを扱えるようにしました。

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
      '*.yaml': {
        loaders: ['yaml-loader'],
        as: '*.json',
      },
    },
  },
}

React 19.2 がサポートされているので、併せてアップデートしました。現時点では新しい機能は採り入れていませんが、useEffectEvent()など使えそうなものは使ってみたいと思います。

Sass の記法変更

scss ファイルに関するエラーが出てしまいました。

Error: There is no module with the namespace "map".

どうやら Turbopack では CSS Modules の読み込み順序が Webpack と異なることと、古い記法が使えないようで、すべての scss ファイルを見直して次の変更を加えました。

  • map-getをmap.getに変更しました。
  • map.getを使っている scss ファイルの先頭に@use 'sass:map';を追加しました。
  • 他の scss ファイルを読み込んでいる部分にas *を追加しました。
@use 'sass:map';
@use '@/styles/settings' as *;
 
hoge {
  width: (map-get(settings.$sitewidth, 'lg'));
}

全部に追加するのだるいよ～という場合は、next.config.ts にオプションを追加すれば対応できるみたいです。

next.config.js: sassOptions | Next.js
Configure Sass options.
nextjs.org
next.config.js: sassOptions | Next.js

params の非同期化

動的ルートの params を Promise に変更しました。

type Props = {
  params: Promise<{
    slug: string
  }>
}

ブログの改修

ついでにブログを改修しました。

カテゴリー、タグの一覧ページを追加

トップページとメニューに一覧を表示していたのですが、数が増えてきたから一覧ページにしました。 メニューの Category、Tag から遷移できます。

検索機能の改良

fuse.jsを導入してみました。これはまた別の記事に書きたいです。

シンタックスハイライトの変更

Shikiに変更しました。

「もっとみる」ボタンの追加

「もっとみる」ボタンをトップページに置きました。すべての記事一覧ページへ遷移します。

おわりに

PC を新調して環境を整えてアップデートに着手するまで時間が空いてしまったため、自分で作ったブログのくせにソースコードを見て理解するのに時間がかかりました。今後のことも考えて、無駄な処理を省いたり、余計なファイルを集約させて、コードをすっきりさせました。

お役に立てれば幸いです 💕

Share