Next JS 13 app directory fast refresh on dev localhost does not work as intended

Question

NextJS documentation (https://nextjs.org/docs/basic-features/fast-refresh) states:

Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

But it seems like this is not the case.

I created a nextjs 13.2 project with

npx create-next-app@latest

/app/layout.tsx

import { Navbar } from '@/ui/navbar';

export const metadata = {
  title: 'Test',
  description: 'Test!',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

/app/bolt/page.tsx

export default function Page() {
    return <p>Bolt</p>;
}

/ui/navbar.tsx

import Link from 'next/link';

export function Navbar() {
    return (
          <Link href="/bolt">
            <p>Bolt</p>
          </Link>
    )
}

I start my dev environment with:

next dev

It works as intended, I can navigate to the /bolt route, but when I change the page.tsx to this:

Updated /app/bolt/page.tsx

export default function Page() {
    return <p>Bolt paragraph is updated!</p>;
}

The new page is not re-rendered, nothing happens, I need to stop and restart the dev env.

How can I achieve that my browser automatically updates, if I update my tsx file ?

For testing purposes:

I tried out the create-react-app as well, but it does not use fast refresh when I edit the App.js file.

I am using WSL2 Ubuntu 20.04 on windows10.

I tried adding FAST_REFRESH = false to a .env file and adding CHOKIDAR_USEPOLLING=true to the start script in package.json like they mentioned in this thread: Hot Reload is not working in my React App

But none of the above seems working, not even with the default CRA.

Does your terminal print something after your update a file? Does it recompile? What operating system are you using? Maybe there's something with the file watchers on your system... Does it work in other projects (example: in a CRA project) — Victor Oliveira, Feb 28 '23 at 12:54
@VictorOliveira I am using WSL2 ubuntu 20.04 on windows10. As I stated in my question "The new page is not re-rendered, nothing happens, I need to stop and restart the dev env". I will try out the CRA and also I will create a github link so people can try out easily on their system. — Dániel Flach, Feb 28 '23 at 12:57
If nothing happens, chances are that Next isn't aware that a file was changed. I'd create a new project with pure React using `npx create-react-app name-of-the-app` and see if their hot reload works on your machine. If not, then the system isn't notifying Next about file changes. Also, check https://stackoverflow.com/questions/65445600/hot-reload-is-not-working-in-my-react-app to see if anything there helps — Victor Oliveira, Feb 28 '23 at 13:07
@VictorOliveira I updated my question based on your comments. Default CRA does not work, not even with the solutions proposed in the thread you linked. My wsl2 ubuntu bash terminal using the files on the windows system through the /mnt/ drive, this was the default. How can I notify my running app about the changes made to my file? — Dániel Flach, Feb 28 '23 at 13:24
Run `sudo sysctl -w fs.inotify.max_user_watches=524288` on your WSL2 terminal and then try again. This command will increase the number of files being watched by your system until you reboot. If this works, you can increase it permanently although I'd recommend a smaller value in order to preserve system resources. FYI, the default value is 8192. — Victor Oliveira, Feb 28 '23 at 13:35

score 2 · Accepted Answer · answered Mar 06 '23 at 07:01

I feel your pain but I believe that this issue is still not resolved with WSL 2. Moving the project to the Linux folder is a workaround but I didn't quite like it myself because I don't have just one project and to be honest, I just wanted this to work from everywhere, not just the Linux dir.

I'd recommend just downgrade to WSS 1.

Start your PowerShell
check your exact distro name

wsl --list --verbose

downgrade to WSL 1

wsl --set-version [distroName] 1

A better solution would be, it's just to install a second distro, leaving the current one to WSL 2, and the new one will be WSL 1.

This answer is particularly useful if you have fresh reload problem on nextjs when using wsl2. Simple move the next app from the mnt directory to home directory does the trick for me too. — Kelvin Ukuejubola Oritsetimeyi, Jun 19 '23 at 07:54

score 1 · Answer 2 · answered Mar 05 '23 at 18:40

1

Move your projects to the linux folder :

"wsl\Ubuntu\home{$username}"

And the Hot Reloading should work properly.

answered Mar 05 '23 at 18:40

Ahmed Sbai

10,695
9
19
38

Next JS 13 app directory fast refresh on dev localhost does not work as intended

2 Answers2