Next.js 14.1 prerendering Error
![nextjs prerendering error](/_next/image?url=https%3A%2F%2Fapi.sereja-art.ru%2Fuploads%2Fprerendering_error_e9fd67c4b0.png&w=3840&q=85)
Ошибка - Error occurred prerendering page
После запуска сборки проекта, получаем ошибку:
Ошибка после запуска npm run build
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/contacts". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Страницы с ошибками
> Export encountered errors on following paths:
/_not-found
/about/page: /about
/blog/[slug]/page: /blog/how-to-delete-1c-bitrix
/blog/[slug]/page: /blog/lite-youtube-embed-224x-faster
/blog/[slug]/page: /blog/otpravka-yandex-clientid-iz-bitriks-v-crm-bitriks24
/blog/[slug]/page: /blog/otpravka-yandex-clientid-iz-tilda-v-crm-bitriks24
/blog/[slug]/page: /blog/podkluchenie-yandex-metriki-nextjs
/blog/[slug]/page: /blog/podpis-s-iconkami-yandex-pochta
/blog/[slug]/page: /blog/table-tilda
/blog/[slug]/page: /blog/the-code-of-the-urban-samurai
/blog/[slug]/page: /blog/tilda-popup-video-btn
/blog/page: /blog
/contacts/page: /contacts
/notes/[slug]/page: /notes/aspro-next-project-link-tab
/notes/[slug]/page: /notes/minusi-saita-na-tilde
/notes/[slug]/page: /notes/pizza-recipe
/notes/page: /notes
/page: /
/projects/page: /projects
/services/page: /services
Проблема
Сборке мешает клиентский компонент, который в моем случае использует useSearchParams()
и usePathname()
.
Этот хук получает параметры, которые недоступны во время сборки, поэтому он препятствует Static PreRendering - статической предварительной генерации для всего маршрута. Ошибка предполагает, что вы можете воспользоваться потоковой передачей и частично предварительно отобразить части маршрута, которые не зависят от значений времени запроса.
Решение
- Найдите компонент, который использует
useSearchParams()
илиusePathname()
(Можете воспользоваться поиском в своем IDE) - Оберните его в
<Suspense>
В моем случае, я использовал клиентский компонент для передачи праметров в Яндекс Метрику в своем layout.tsx
components/YandexMetrika.jsx
'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
export default function YandexMetrika() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
const url = `${pathname}?${searchParams}`;
ym(xxxxxxxx, 'hit', url);
}, [pathname, searchParams]);
return null;
}
app/layout.tsx
import { Suspense } from "react";
import YandexMetrika from "@/components/YandexMetrika/YandexMetrika";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ru">
<body>
<Suspense fallback={<></>}>
<YandexMetrika />
</Suspense>
<main>{children}</main>
</body>
</html>
);
}