검색창에 Suspense를 감싸서 빌드 시 Prerender Error(https://nextjs.org/docs/messages/prerender-error) 뜨는거 해결(참고: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout)

Author: liberaldev

src/app/(main)/layout.tsx

@@ -10,6 +10,7 @@ import Link from "next/link";
 import SearchBar from "@/app/components/main-layout/search-bar";
 import {UserInfo} from "@/app/components/main-layout/user-info";
 import {Footer} from "@/app/components/main-layout/footer";
+import {Suspense} from "react";
 
 export default async function MainLayout({children}: {children:React.ReactNode}) {
 
@@ -43,7 +44,9 @@ export default async function MainLayout({children}: {children:React.ReactNode})
                         <NavbarLink as={Link} href={"/survey"}>취향 설문하고 와인 추천 받기</NavbarLink>
                         <NavbarLink as={Link} href={"/ranking"}>랭킹</NavbarLink>
                         <li className={"max-md:my-2 md:flex-1 md:ml-8 max-md:-order-10"}>
-                            <SearchBar/>
+                            <Suspense>
+                                <SearchBar/>
+                            </Suspense>
                         </li>
                     </NavbarCollapse>
                 </Navbar>

src/app/(main)/ranking/page.tsx

@@ -1,5 +1,4 @@
 import type {Metadata} from "next";
-import {SurveyForm} from "@/app/components/main-layout/survey/survey-form";
 
 export const metadata: Metadata = {
     title: "랭킹",

src/app/components/main-layout/search-bar.tsx

@@ -68,10 +68,10 @@ export default function SearchBar() {
     }
 
     return (
-        <Suspense>
+        <>
             <form action={search}>
                 <Search />
             </form>
-        </Suspense>
+        </>
     )
 }