서버액션 (3) 썸네일형 리스트형 [Next.js] Next.js 15의 새로운 Form 컴포넌트 가이드 기존 form 과의 주요 차이점 로딩 UI의 프리페칭 가능 ( 화면 미리 불러오기 )form 제출 시 부드럽게 페이지 전환 (깜빡임 없음) : 클라이언트 사이드 네비게이션preventDefault() 기본 수행쿼리 파라미터 를 name 속성에 맞춰 자동으로 붙여줌 기본 작성법import Form from 'next/form'function SearchForm() { return ( 검색 )} input name='query' 은 자동으로 쿼리 파라미터를 붙이는 기능입니다.url이 이렇게 됩니다 ......./search?query='인풋에서 쓴 내용' 컴포넌트의 동작은 액션 프로퍼티가 문자열인지 함수인지에 따라 달라집니다. 1. 액션이 문자열인 경우 은 .. [Next.js] redirect 함수, notFound 함수는 try/catch 밖에서 사용해야 합니다 1. Next.js의 redirect 함수는 특별한 타입의 에러(NEXT_REDIRECT)를 throw하는 방식으로 작동합니다. 2. try/catch 블록 안에서 redirect를 사용하면 redirect가 던진 에러가 catch 블록에서 잡혀버리고redirect 는 동작하지 않게 됩니다. 3. 클라이언트 컴포넌트의 경우, useRouter를 사용하는 것이 더 적절할 수 있음 4. 추가로 notFound() 함수도 아래와 마찬가지 패턴으로 처리해야 합니다. import { redirect } from 'next/navigation';// ... 생략 ... let isRedirect = false; try {// ... 생략 ... isRedirect = true; } catch (err.. [Next.js] Server Actions 시 놓치면 안되는 revalidatePath, revalidateTag ( 데이터 캐시 관리) Server Actions으로 진행하던 사이드 프로젝트에서 잘 작동하던 게시글 등록이,빌드 후에는 새 게시글이 리스트에서 반영이 되지 않는 현상이 일어났습니다. 구글링 후, 해결책을 찾을 수 있었는데 캐시 무효화 로직이 ( revalidatePath )빠져 있었습니다. 'use server' 를 명시한 서버 컴포넌트에서만 사용이 가능한 revalidatePath에 대해 정리해 봅니다. 1. revalidatePath사용 목적특정 경로의 캐시된 데이터를 무효화하고 새로운 데이터로 갱신할 때 사용됩니다.기본 문법revalidatePath(path, type?) - path : 데이터 캐시를 재검증할 url 경로- type : 'page' (디폴트 값), 'layout' 여기서 type은 두가지가 있는데 p.. 이전 1 다음
