'NextJS' `npm run dev` very, VERY slow on page reload (starting from boiler plate)

I created a brand new NextJS app via npx create-next-app@latest --ts, and the app is pretty much unusable when hot-refreshing or trying to load a new route. For example, I made a new route while the app was running called pages/about.tsx.

import React from "react";
import type { NextPage } from "next";

type Props = {};

const about: NextPage = (props: Props) => {
    return <div>I am about finances</div>;
};

export default about;

Saving this, and trying to navigate to the page just never loads. If I stop the app and re-run it I can get to it. However, if I change the text to "I am about stuff", it will infinitely load and just never hot-refresh.

What's the deal? Can anyone help?

Below is the version of NextJS I am using.

myself:~/code/my-net-worth$ npx next -v
Next.js v12.0.8


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source