В Next.js ошибка «NextRouter не был смонтирован» возникает, когда компонент пытается использовать перехватчик useRouter вне приложения Next.js или когда он отображается вне приложения Next.js. Эта ошибка обычно возникает во время модульного тестирования компонентов, использующих перехват useRouter, поскольку они неправильно настроены с контекстами Next.js. Это также может произойти при попытке использовать перехват useRouter из next/router внутри каталога приложения, поскольку useRouter App Router из next/navigation ведет себя иначе, чем перехват useRouter на страницах.

В этой статье мы рассмотрим несколько способов исправления ошибки «NextRouter не был установлен», а также примеры кода для каждого подхода.

Методы исправления ошибки «NextRouter не смонтирован»:

1. Имитация маршрутизатора в тестах.
   Если вы столкнулись с этой ошибкой при написании модульных тестов для компонентов, использующих перехват useRouter, вы можете имитировать маршрутизатор, используя перехват useRouter() следующего/маршрутизатора. Вот пример того, как это сделать:

import { useRouter } from 'next/router';
jest.mock('next/router', () => ({
  useRouter: jest.fn(),
}));
describe('MyComponent', () => {
  it('should render without errors', () => {
    useRouter.mockImplementationOnce(() => ({
      // mock the necessary useRouter properties and methods
    }));
    // your test code here
  });
});

1. Переход на новые перехватчики из next/navigation:
   Если вы используете перехватчик useRouter в каталоге приложения, вам необходимо перейти на новые перехватчики, импортированные из next/navigation. Новые перехватчики имеют ту же функциональность, но совместимы с App Router. Вот пример перехода на новые перехватчики:

import { useNextRouter } from 'next/navigation';
const MyComponent = () => {
  const router = useNextRouter();
  // rest of your component code here
};

1. Обеспечите правильную отрисовку компонентов.
   Чтобы избежать ошибки «NextRouter не был установлен», убедитесь, что ваши компоненты отображаются в приложении Next.js. Эта ошибка может возникнуть, если вы по ошибке визуализируете компонент вне приложения Next.js. Убедитесь, что ваш компонент отображается на странице или макете Next.js.

Ошибка «NextRouter не смонтирована» в Next.js возникает, когда компонент пытается использовать перехватчик useRouter вне приложения Next.js или когда он отображается вне приложения Next.js. В этой статье мы обсудили два метода исправления этой ошибки: издевательство над маршрутизатором в тестах и ​​переход на новые хуки из next/navigation. Следуя этим методам и обеспечив правильную отрисовку компонентов, вы можете устранить ошибку «NextRouter не был установлен» и обеспечить бесперебойную работу вашего приложения Next.js.