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。アップデート後にそのままビルドするとエラーばかり！　webpackの設定のままですからそりゃあそうじゃ。

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

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

React19.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を導入してみました。これはまた別の記事に書きたいです。

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

Rehype Pretty CodeとShikiを導入しました。
詳しくは記事を書きました👉ブログ記事のコードを見やすくする

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

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

おわりに

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

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

Share