Solve Nextjs Hot Reload don't Work in Windows Docker

Windows Docker Desktop

In order to build a Linux development environment under Windows, you can use Windows Docker Desktop to create a development container Dev Container. If the project itself also uses Docker, you can install docker-in-docker or docker-from-docker in the development container, and The VSCode editor supports quick configuration of development containers, which is very convenient to use.

The Windows version of Docker now selects WSL2 as the backend by default when installing, instead of Hyper-V. WSL2 is a Windows subsystem launched by Microsoft, in which commonly used Linux systems can be installed. In general, using WSL2 will run faster than using Hyper-V, and it is recommended to use WSL2 as the backend.

Nextjs Hot Reload Failure Problem

After using Windows Docker Desktop to create a development container Dev Container, it is found that Nextjs has a problem of hot update failure. After each code modification, you need to manually restart the container to see the effect after modification. Although we can temporarily solve this problem by adding the following configuration to next.config.js,

But doing will cause the hot reload of Nextjs to become very slow. After each code modification, it takes about tens of seconds to see the modified effect. This is because this configuration enables the use of webpack's watch mode to monitor file changes, and the latest version of Nextjs no longer uses webpack to compile code , instead use Rust SWC which is 6 to 7 times faster than webpack.

Reason

I am used to pulling the code locally in Windows, and then using the Dev Container to open the Windows local code, doing this actually converts the Windows file The system is converted to the Linux version, and then mount in the form of a data volume volume to the file system of the container, and then the code is modified in the development container. In this way, the code I modified will be synchronized to the Windows local, so that the code can be submitted using git locally in Windows.

The problem is with WSL2 listening for changes to the filesystem on mount to Linux. This is a known open issue, please refer to here for details. In short, WSL2 is still unable to monitor changes from mount on Windows to Linux, so Nextjs hot update has failed.

Solution

Abandon the Dev Container of Docker, and directly clone the code on WSL2 Linux. Currently, Windows already supports directly opening the installed WSL2 Linux's file system in the resource manager, so you can open the Linux directory directly through the resource manager and then create a folder to put the project code in it, generally ensure that the code is not in /mnt/c/Users/..., this problem will not occur.

The above operations can also be done easily through the Remote - WSL plugin of VSCode, you can directly open the Linux directory and terminal inside VSCode .

It should be noted that if the Windows Docker Desktop of the WSL2 backend is installed, then the docker command can be used directly in WSL2 Linux, while no need to install again. Docker containers started in WSL Linux will appear in the Windows Docker Desktop container list. This is equivalent to the performance of docker_from_docker in Dev Container.

Finally, I can play games and engage in development, and I don't need to switch between dual systems. 23333