build: 仮想環境下でのホットリロードの動作に必要な変更

compose.yaml
- 仮想マシン内でのホットリロードに必要な環境変数を定義。

next.config.js
- Strict Modeを有効化
- カスタムwebpackを作成し、ホットリロード機能を追加

参考:
https://nao-uc.site/pg/next-js-docker-not-hot-reload/
https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode
https://nextjs.org/docs/app/api-reference/next-config-js/webpack
https://webpack.js.org/configuration/watch/#watchoptions
https://create-react-app.dev/docs/troubleshooting/#npm-start-doesnt-detect-changes
vercel/next.js#36774

compose.yaml

@@ -4,6 +4,8 @@ services:
     build:
       context: .
       dockerfile: docker/frontend/Dockerfile
+    environment:
+      - CHOKIDAR_USEPOLLING=true
     volumes:
       - ./frontend:/usr/src/app
     command: yarn dev

frontend/next.config.js

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  reactStrictMode: true,
 
-module.exports = nextConfig
+  // hot reload
+  webpack: (config) => {
+    config.watchOptions = {
+      poll: 1200, //チェック時間
+      aggregateTimeout: 500, // 遅延時間
+      ignored: ["node_modules"],
+    };
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;