How to Fix React (Vite) & Next.js Auto-Refresh Not Working on Windows

리액트와 넥스트.js에서 윈도우의 자동 새로고침 문제를 해결하는 방법.

윈도우에서 리액트 또는 넥스트.js 프로젝트를 개발할 때, 파일을 저장해도 자동 새로고침이 되지 않는 일반적인 문제를 다룹니다. 이 문제는 파일 변경 사항을 감지하는 '파일 감시자'가 제대로 작동하지 않기 때문입니다. 해결 방법으로는 서버가 변경 사항을 매초 확인하도록 설정하는 폴링을 사용할 수 있습니다. Vite를 사용하는 경우, vite.config.ts에 간단한 설정을 추가하여 문제를 해결할 수 있습니다.

How to fix the auto-refresh issue in React and Next.js on Windows.

This article addresses a common problem when developing React or Next.js projects on Windows, where changes do not trigger an automatic refresh. This issue arises due to the file watcher not functioning properly on Windows. The solution involves configuring the server to actively check for changes using polling. If you're using Vite, you can easily fix this by adding a simple setting in your vite.config.ts file.