【Next.js / TypeScript】ホットリロードを有効にする方法

Docker composeを使ってNext.jsの開発を進めていたのですが、ある日JavaScriptから
TypeSriptに切り替えてから、それまで使えていたホットリロードが効かなくなってしまいました。

JavaScriptのままでNext.jsの開発をしていた時には、docker-compose.yamlの中でCHOKIDAR_USEPOLLING=trueと設定をしていればホットリロードが効いていたのですが...

下記が使っていたdocker-compose.yamlの中身です。

    frontend:
        build: ./frontend
        container_name: frontend_ultimate_timer
        hostname: frontend
        volumes:
            - ./frontend/ultimate_timer:/app
        tty: true
        environment:
            - CHOKIDAR_USEPOLLING=true
        ports:
            - "3000:3000"

解決策としては、environmentのところにWATCHPACK_POLLING=trueという記載をすることでホットリロードがTypeScriptでも効くようになりました。

    frontend:
        build: ./frontend
        container_name: frontend_ultimate_timer
        hostname: frontend
        volumes:
            - ./frontend/ultimate_timer:/app
        tty: true
        environment:
            # - CHOKIDAR_USEPOLLING=true
            - WATCHPACK_POLLING=true
        ports:
            - "3000:3000"

めでたしめでたし