Fast Refresh Warning

터미널에 다음과 같은 경고가 뜹니다.

warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works TypeError: Failed to fetch at webpack_require.hmrM (http://localhost:3000/_next/static/chunks/webpack.js?ts=1690436755699:1201:20)

작성한 코드

AppLayout.js

import { Menu } from "antd";
import Link from "next/link";
import PropTypes from "prop-types";
import React from "react";

const items = [
  {
    label: (
      <Link href="/">
        <a>홈</a>
      </Link>
    ),
    key: "home",
  },
  {
    label: <Link href="/profile">프로필</Link>,
    key: "profile",
  },
  {
    label: (
      <Link href="/signup">
        <a>회원가입</a>
      </Link>
    ),
    key: "signup",
  },
];

function AppLayout({ children }) {
  return (
    <div>
      <Menu mode="horizontal" items={items}></Menu>
      {children}
    </div>
  );
}

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

index.js

import React from "react";
import AppLayout from "../components/AppLayout";

function Home() {
  return (
    <AppLayout>
      <div>Hello, Next!</div>
    </AppLayout>
  );
}

export default Home;

Fast Refresh 관련 문서를 보고 새로 고침도 해보고, 캐시도 지워보고, 익명 함수를 기명 함수로 바꿔보았지만 소용이 없었습니다.

1. npm run dev를 실행하고 localhost에 접속할 때마다 보입니다.

2. 웹페이지 우측 하단에 vercel mark 같은 것이 잠시 깜빡이는데 그 때에도 fast refresh 관련 warnning이 뜹니다.

3. next.js 12 버전, antd 5버전을 사용 중이며 질문 시점에 강의는 Section1의 1강 수강 했습니다.