【Next.js】Next.jsをのビルドでwebpack4を使うと失敗するので5に切り替える方法

以下エラーが出てBuildができない場合の対処方法のメモ

発生したエラー

❯ yarn build                                                                                                  7.3s  Thu Apr 22 12:00:15 2021
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/pcuser/Documents/GitHub/country-shrine-map/node_modules/@babel/runtime/helpers/construct' in '/Users/pcuser/Documents/GitHub/country-shrine-map/.yarn/$$virtual/next-virtual-eb3227ff4d/0/cache/next-npm-10.1.3-435c930891-7e12ae9ea2.zip/node_modules/next/dist/client'

> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/pcuser/Documents/GitHub/country-shrine-map/.yarn/$$virtual/next-virtual-eb3227ff4d/0/cache/next-npm-10.1.3-435c930891-7e12ae9ea2.zip/node_modules/next/dist/build/index.js:17:924
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async Span.traceAsyncFn (/Users/pcuser/Documents/GitHub/country-shrine-map/.yarn/$$virtual/next-virtual-eb3227ff4d/0/cache/next-npm-10.1.3-435c930891-7e12ae9ea2.zip/node_modules/next/dist/telemetry/trace/trace.js:5:584)

対処方法

webpack 4だと必要なモジュールがないためエラーになるのでwebpack 5を有効化する。
エラー時にInfoで出力されていたURLを確認しnext.config.jsにfutureの設定を記述する。

module.exports = { 
    future: { 
      webpack5: true, 
    },  
} 

確認方法

こんな感じのログが出ればOK

❯ yarn build                                                                                                 59.6s  Thu Apr 22 12:06:13 2021
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                             Size     First Load JS
┌ ○ /                            310 B          64.8 kB
├ ○ /404                         3.44 kB        67.9 kB
└ ○ /second                      310 B          64.8 kB
+ First Load JS shared by all    64.5 kB
  ├ chunks/210.af2b05.js         6.82 kB
  ├ chunks/759.8e4335.js         13.5 kB
  ├ chunks/framework.281044.js   42 kB
  ├ chunks/main.3f7708.js        152 B
  ├ chunks/pages/_app.361545.js  1.03 kB
  └ chunks/webpack.8b2eb6.js     909 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

development/nodejs