nextjs15 3

[Next.js+TypeScript]모아 모아(MoaMoa) 회고 #1 - 권한 검증부터 조건부 fetch

목차 (눌러서 이동 가능)📪 모아 모아(MoaMoa) - SNS 서비스🧠 권한 설정 - 작성자가 아닌 소유자를 기준으로!🧠 비즈니스 컴포넌트로 RSC로, SSR 극대화하기 - 상세 데이터는 조건부 fetch!🧠 캐싱에 관한 고민 . . .🚩 소감 한마디 📪 모아 모아(MoaMoa) - SNS 서비스지난 몇 달간 진행한 프로젝트 모아모아(Moa Moa)는 Spotify API를 기반으로 음악이 첨부된 편지를 주고받을 수 있는 온라인 네트워킹 서비스로, 사용자는 편지를 작성하고 다양한 옵션으로 편지지와 편지 오브제를 커스터마이징 할 수 있다.이번 포스팅은 프로젝트를 진행하며 겪었던 많은 고민 중, 편지 권한과 데이터 조건부 fetch에 관한 내용을 적어보려 한다 🙃(해당 이슈 PR 링크 : h..

Next.js 15 업데이트 후 쿠키 전달 문제 해결하기: headers()와 fetch()

현재 진행 중인 사이드 프로젝트에서 사용자 친구 목록 기능을 구현하고 있던 중 데이터를 받아 오기 위해API 요청을 보냈을 때, 넘겨받은 값이 null이라  401 Unauthorized 에러가 뜨는 상황을 마주하게 되었습니다..(서론이 있어서 해결법이 궁금하신 경우 포스팅 제일 하단으로 이동해 주세요!)   🏃‍♂️‍➡️ 문제점 파악하기 & 시도한 방법에러 코드를 통해 세션에 문제가 있다는 것을 알 수 있었지만 클라이언트, 서버 양쪽 모두콘솔에서 세션을 출력하면 값이 정상적으로 반환됐기 때문에 처음에 조금 당황스러웠습니다. 혹시 몰라 API 엔드포인트에 직접 접근했을 때 데이터가 정상적으로 반환되는 걸 확인하고작성했던 코드를 재차 확인하며 API 자체의 문제는 아니라 판단했습니다.// app/api/..

넥스트 (Next.js) 2025.03.10

Next.js 15: 동적 라우팅 변경 사항과 비동기 API 처리 방법

이번 포스팅에서는 Next.js 15에서 동적 라우팅 관련 변경 사항에 대해 다뤄보겠습니다. 📌 변경 사항의 핵심최근 Next.js 15에서는 일부 동적 API들이 동기적으로 작동하던 방식에서 비동기 처리 방식으로 변경되었기 때문에,이전 버전에서는 문제 없이 작동하던 코드들도 예상치 못한 에러 메세지를 다수 띄울 수 있습니다. params, searchParams, cookies(), draftMode(), headers()와 같은 API들이 이제 비동기 방식으로 동작하기 때문에 버전 업그레이드 후 사용할 거라면 꼭 공식 문서를 정독하는걸 추천드립니다.공식 문서에 의하면 향후 버전에서도 위의 API들은 계속 비동기적으로 작동할 예정이라 합니다.   이전 버전에서는 아래 코드가 문제 없이 작동했지만,Ne..

넥스트 (Next.js) 2025.02.05