これはなに
Next.js 13の環境をDockerで作ってNextアプリを実行したらホットリロードされなかった。 そのときの対処法を残す。
どうすればよいのか
2つのことをする必要がある。
まず、環境変数にWATCHPACK_POLLING=trueを追加する。
Docker Composerを使っているなら、docker-compose.yamlのenvironmentに渡せばよい。
docker-compose.yaml
frontend:
environment:
- WATCHPACK_POLLING=truedevcontainerを使っているなら、devcontainer.jsonのcontainerEnvに渡せばよい。
devcontainer.json
{
"containerEnv": {
"WATCHPACK_POLLING": "true"
}
}次に、next.config.jsにwebpackプロパティを追加する。
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
+ // hot reload
+ webpack: (config, { dev }) => {
+ if (dev) {
+ config.watchOptions = {
+ poll: 1000,
+ aggregateTimeout: 200,
+ };
+ }
+ return config;
+ },
}
module.exports = nextConfig
これでホットリロードが効くようになる。ただし、0.5秒程度の遅延が入る。
環境
- next : 13.1.6
- react : 18.2.0
- typescript : 4.9.5
効果がなかった方法
- 環境変数に
CHOKIDAR_USEPOLLING=trueを追加→解決しなかった next.config.jsに下記を追加→そんなプロパティはないとwarningが出た
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
+ // hot reload
+ webpackDevMiddleware: config => {
+ config.watchOptions = {
+ poll: 800,
+ aggregateTimeout: 300,
+ }
+ return config
+ },
}
module.exports = nextConfig
表示された警告を下記に示しておく。
$ yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - Invalid next.config.js options detected:
- The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).
See more info here: https://nextjs.org/docs/messages/invalid-next-config