Vercel Deploy Error "⨯ useSearchParams() should be wrapped in a suspense boundary"

⨯ useSearchParams() should be wrapped in a suspense boundary at page "/identitas-pasien". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout at o (/vercel/path0/.next/server/chunks/892.js:1:10733) at s (/vercel/path0/.next/server/chunks/892.js:1:21671) at c (/vercel/path0/.next/server/chunks/258.js:1:6132) at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) Error occurred prerendering page "/identitas-pasien". Read more: https://nextjs.org/docs/messages/prerender-error Generating static pages (20/27) ✓ Generating static pages (27/27) > Export encountered errors on following paths: /identitas-pasien/page: /identitas-pasien Error: Command "npm run build" exited with 1

Error yang Anda alami terkait dengan penggunaan useSearchParams() di Next.js. Menurut dokumentasi, jika Anda menggunakan useSearchParams() pada halaman dengan rendering sisi klien (client-side rendering), Anda harus membungkusnya dalam Suspense boundary.

Langkah-langkah untuk Mengatasi Error

Tambahkan Suspense Boundary: Bungkus komponen yang menggunakan useSearchParams() dalam Suspense boundary.
Periksa Komponen: Pastikan komponen yang memerlukan data dari useSearchParams() dibungkus dengan benar.

Berikut adalah contoh cara menerapkan Suspense boundary:

Langkah 1: Import Suspense dari React

import { Suspense } from 'react';

Langkah 2: Bungkus Komponen yang Menggunakan `useSearchParams()` dengan Suspense

import { useSearchParams } from 'next/navigation';
import { Suspense } from 'react';

const IdentitasPasienPage = () => {
const searchParams = useSearchParams();

// Logika penggunaan searchParams Anda
const id = searchParams.get('id');

return (
<div>
<h1>Identitas Pasien</h1>
<p>ID Pasien: {id}</p>
</div>
);
};

export default function Page() {
return (
<Suspense fallback={<div>Loading...</div>}>
<IdentitasPasienPage />
</Suspense>
);
}

Langkah 3: Deploy Ulang ke Vercel

Setelah melakukan perubahan, deploy ulang aplikasi Anda ke Vercel untuk memastikan bahwa perubahan tersebut telah diterapkan.

Catatan Tambahan

Fallback Component: Komponen fallback dalam Suspense boundary akan ditampilkan sementara komponen utama sedang memuat data.
Prerendering Error: Jika Anda masih mengalami masalah saat prerendering halaman, pastikan untuk memeriksa apakah ada bagian lain dari kode yang mungkin menyebabkan masalah tersebut.

Dengan menerapkan Suspense boundary, Anda memastikan bahwa komponen yang menggunakan useSearchParams() dapat berfungsi dengan baik tanpa menyebabkan error pada proses build atau prerendering di Next.js.

[Bug] Gedebug

Pencarian

Sabtu, 29 Juni 2024