Next.js & Supabase로 검색 결과 페이지네이션 구현하기

검색 결과 페이지네이션의 필요성검색 결과가 많아지면 슈퍼베이스의 쿼리 개수 제한(1,000개)을 초과하거나 성능이 저하될 수 있다.이를 해결하기 위해 검색 결과를 n개씩 나눠서 가져오는 페이지네이션 기능을 구현했다. page 쿼리 파라미터 추가검색 페이지의 URL을 `/search?q=hello&page=2`와 같이 변경하여 검색어와 페이지 정보를 포함하도록 설정한다. 검색어로 URL 업데이트하기import { useRouter, useSearchParams, usePathname } from "next/navigation";const { replace } = useRouter();const pathname = usePathname();const searchParams = useSearchParams()..

• format_list_bulleted JavaScript
• · 2025. 3. 30.
• textsms

Next.js & Supabase 프로젝트 생성 및 기초 세팅

슈퍼베이스를 사용하는 Next.js 프로젝트를 생성해 보자. Next.js app 생성npx create-next-app -e with-supabase다음과 같은 항목들이 미리 구성되어 있는 앱을 생성한다.Cookie-based AuthTypeScriptTailwind CSS `npm run dev`로 앱을 실행했을 때 화면이다. 스크롤 내리면 체크리스트도 있다. Supabase 프로젝트 연결슈퍼베이스 프로젝트를 생성한다. database.new `env.example` 파일 이름을 `env.local`로 변경하고 환경 변수를 입력한다. 프로젝트를 생성했다면 슈퍼베이스 공식문서 3번 항목에서 친절하게 입력할 값을 모두 알려준다. Supabase 데이터 쿼리프로젝트가 잘 연결됐는지 확인해 보기 위해 테스..

• format_list_bulleted JavaScript
• · 2024. 12. 24.
• textsms