NextJS Быстрое обновление не работает должным образом

Question

Я создаю сайт с nextjs и Chakra UI. Я использую эмоции, чтобы стилизовать свою навигацию.

Код компонента навигации следующий:

      import Link from "next/link";
import { Flex, List, ListItem } from "@chakra-ui/react";
import Image from "next/image";
import styled from "@emotion/styled";

const Nav = styled.nav`
  position: sticky;
  top: 20px;
  z-index: 2;
`;

export default function StickyNav() {
  return (
    <Nav>
      <Flex
        bg='gray.100'
        justifyContent='space-between'
        p='8'
        borderRadius='16'
      >
        <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
        <List display='flex' ml='4'>
          <ListItem mr='8'>
            <Link href='#about'>
              <a>About</a>
            </Link>
          </ListItem>
          <ListItem mr='8'>
            <Link href='#projects'>
              <a>Projects</a>
            </Link>
          </ListItem>
          <ListItem>
            <Link href='#contact'>
              <a>Contact</a>
            </Link>
          </ListItem>
        </List>
      </Flex>
    </Nav>
  );
}

У меня проблемы с быстрым обновлением. Когда я запускаю сервер разработки, компонент навигации правильно подбирает стили.

      const Nav = styled.nav`
  position: sticky;
  top: 20px;
  z-index: 2;
`;

после подачи, если я попытаюсь изменить верхнее положение на быстрое обновление не отражает этих изменений.

Функция быстрого обновления отлично работает с другими компонентами, но имеет проблемы только с этим конкретным компонентом. Я просмотрел несколько статей, но не уверен, что вызывает такое поведение.

Answer 1

Убедитесь, что имя файла или папки не начинается с верхнего регистра

Быстрое обновление не работает:

быстрое обновление работает:

Answer 2

Также проверьте, имеет ли ваш оператор импорта правильный регистр.

      import Box from '../Components/box';

против

      import Box from '../Components/Box';

Answer 3

У меня была аналогичная проблема, и я посмотрел названия импорта. В моем файле макета.jsx я импортировал компонент Nav следующим образом:import Nav from "@/components/nav";что было основной проблемой для остановки быстрого обновления. Я изменил это наimport Nav from "@/components/Nav";и быстрое обновление работает нормально.

Answer 4

В локальной версии мое быстрое обновление не работало для следующей 13 версии. Я только что обновил версию узла и npm. Сейчас это работает.

Answer 5

в моем случае в имени файла из двух слов должно использоваться тире-, а не подчеркивание_.

Например:

хорошее имя файла:hello-world.js

плохое имя файла:hello_world.js

Answer 6

Как заявили @new2cpp и DeadBoyPiotrek

При импорте заголовков убедитесь, что ваши операторы импорта соответствуют именам файлов.

Navbar.js <--Пример имени файла

импортировать панель навигации из "../components/Navbar"

Нет

импортировать панель навигации из "../components/navbar"

Когда я сделал эту ошибку, Fast Refresh сначала загружался, а затем, после изменения чего-либо, Fast Refresh продолжал перестраиваться, но никогда не заканчивался.