基本的にはNextとReactをアップグレードすればいいんだけど、依存するその他のライブラリを先にアップグレードしないとエラーが止め処なく出てくる

そのためあくまで自分の場合の手順。

関連パッケージとNextのアップグレード

あとnodeのバージョンを18に上げた。

 1141  npm i iconoir-react@latest
 1152  npm i swr@latest 
 1153  npm i typescript@latest
 1154  npm i typewriter-effect@latest
 1155  npm i microcms-js-sdk@latest
 1157  npm i autoprefixer@latest
 1158  npm i postcss@latest
 1159  npm i react-icons@latest
 1164  npm i react@latest react-dom@latest
 1177  npm i react-modal@latest
 1178  npm i @types/react-modal@latest
 1179  npm i framer-motion@latest
 1180  npm i react-burger-menu@latest
 1181  npm i react@latest react-dom@latest
 1182  npm i framer-motion@latest
 1183  npm i next@latest
 1184  npm i @types/gtag.js
 1185  npm i @types/gtag.js@latest
 1186  npm i eslint@latest
 1187  npm i tailwindcss@latest
 1188  npm i react-use@latest
 1189  npm i @types/react-burger-menu@latest
 1190  rm -rf package-lock.json
 1191  rm -rf node_modules
 1192  npm i
 1193  npm run dev

historyをただ載せているだけ。

npm run dev

- error Nested Middleware is not allowed, found:
pages/_middleware
Please move your code to a single file at /middleware instead.
Read More - https://nextjs.org/docs/messages/nested-middleware

でmiddlewareが _middleware.jsになっているのがよくないらしいので修正。

ファイル名をmiddleware.jsに変更し、場所もプロジェクトディレクトリ直下に置く。

<Link>コンポーネントで内部でaタグを使っている箇所を直す必要があった。

npx @next/codemod new-link .

で一括で変更し、エラーが出ている箇所を修正。

Image

npx @next/codemod next-image-to-legacy-image .

でコミットした後、

npx @next/codemod next-image-experimental .

上記のせいか分からないが、なぜかtailwindの共通CSSが勝っている箇所があり、画像サイズが変になっていたので、

important指定で画像サイズを修正。