넥스트JS 이모저모

https://velog.io/@deli-ght/nextrewrite%EC%99%80-redirect

#9.1참고

Next.js 13부터 도입된 서버 사이드 패칭과 Suspense를 활용한 데이터 스트리밍은 데이터 패칭 방식에 혁신을 가져왔다. 이러한 변화 속에서 React Query와 같은 <span style="color:Next.js 13+는 다음과 같은 강력한 데이터

Next.js를 사용해 복잡한 사용자 인터랙션(상태 관리, 브라우저 API 활용 등)이 많은 서비스를 개발하다 보면 대부분의 컴포넌트에 “use client” 선언을 하게 되는 경우가 많다.그렇다면, “use client” 선언이 많아지면 SSR(Server-Side

📂 src/app/actions.ts📂 src/app/client-side-form.tsxshadcn-ui의 Form, FormField, FormLabel, FormMessage를 사용하여 UI를 구성.useForm을 이용해 RHF의 form 객체를 생성.hand

Next.js 15에서 Spring 백엔드와 협업하면서 카카오 로그인 같은 소셜 로그인을 구현할 때,Route Handler는 필수는 아니지만, 사용하는 상황이 분명히 존재한다.사용자가 로그인 버튼 클릭 → 프론트에서 Spring 백엔드의 로그인 URL로 리다이렉트백엔

서버 컴포넌트가 클라이언트 컴포넌트를 import하면, 그 서버 컴포넌트도 자동으로 클라이언트에서 렌더링된다.클라이언트 컴포넌트는 감염성이다. import만 해도 그 상위까지 클라이언트로 번들된다."use client가 선언된 컴포넌트를 서버 컴포넌트에서 import해

Next.js 15 프로젝트에서 unstable_cache()를 사용해 서버에서 유저 정보를 캐싱하려고 했는데, 다음과 같은 에러가 발생했다.원래 의도: 수파베이스를 통해 유저를 가져오고, 프리즈마로 추가 정보를 조회 → 그 결과를 캐싱unstable_cache(fn)

유저 정보 수정 페이지를 만드는데 문제가 생겼다.리액트에선 useNavigate와 useLocation을 이용해 url에 id를 노출시키지 않고 페이지 간 데이터 전달이 가능했다. 그렇다면 넥스트js에선 어떤 방법들을 사용해야 할까?장점: URL에 정보 노출 X, 안전

리액트와 넥스트js에서 컴포넌트를 지연 로딩(lazy loading) 하고 싶을 때 두 가지 방법이 있다React.lazy()next/dynamic()둘은 비슷해 보이지만, 사용하는 환경과 기능에 차이가 있다.Suspense로 fallback을 반드시 감싸야 함SSR

서버 캐시와 클라이언트 캐시를 공유하기 위해 dehydrate + HydrationBoundary(https://velog.io/@rlaugs15/Next.js-15%EC%97%90%EC%84%9C-%EC%84%9C%EB%B2%84-fetch%EC%99%80-

넥스트js15로 프로젝트를 진행하는데 로그아웃 시 페이지 새로고침을 해야 할 일이 생겼다.북마크 표시 등 캐시된 데이터가 초기화되어야 하기 때문이다.그래서 router.refresh()를 사용했지만 캐시된 데이터는 그대로였고, 북마크 표시는 로그인 상태일 때 그대로 남

Next.js 15에서는 서버 컴포넌트에서 확장된 fetch를 통해 데이터를 가져올 수 있다. 덕분에 SEO를 챙기며 초기 렌더링 성능까지 확보할 수 있는데, 여기서 문득 이런 생각이 들었다. >“서버에서 데이터를 먼저 패칭한 뒤, 그 데이터를 탠스택 쿼리로 넘겨서

설명: 브라우저 메모리 내 탠스택 쿼리 상태대표 함수: invalidateQueries, removeQueries설명: 넥스트JS가 fetch(..., { next: { tags } })로 만든 RSC 캐시대표 함수: revalidateTag, revalidatePat

넥스트js로 프로젝트를 하며 이상한 현상이 발생했다.넥스트js의 App Router에서는 "await = 완전히 준비된 상태"가 아니다.부모 서버 컴포넌트에서 데이터를 먼저 받아서 props로 넘기자.LogAuthorIntro를 보면 유저 아이디를 받고 있다.그리고 부

문제 넥스트js15 + 수파베이스로 프로젝트를 진행하면서unstable_cache를 쓰고 SSR fetch 결과를 서버에 캐싱했다. 하지만 이때 페이지네이션이 적용된 리스트 API에 다음과 같은 문제가 생겼다. 페이지마다 캐시 키가 다르다. revalidateTag

Pixabay 클론 프로젝트(React)에서 Masonry 레이아웃을 사용하며 썸네일을 배치했다.그때는 단순히 아래처럼 작성했지만 문제가 없었다.그런데 프로젝트를 Next.js로 마이그레이션한 이후 ESLint가 아래 경고를 띄운다:그래서 권장되는 <Image /

Next.js에서 App Router를 사용할 때, 흔히 다음과 같은 컴포넌트를 작성하곤 한다.이 자체는 문제가 없다. 하지만 이 컴포넌트를 서버 컴포넌트에서 직접 import하면, Next.js 15에서는 아래와 같은 빌드 에러가 발생할 수 있다:혹은:Next.js

Next.js 13~15에서 unstable_cache()를 사용해 데이터를 서버에서 불러오면,Vercel Functions 로그에는 아무것도 찍히지 않는 경우가 있다.처음엔 당황할 수 있는데, 원리를 이해하면 완전히 납득할 수 있다.unstable_cache()는 서

Next.js 15부터는 getStaticProps, getServerSideProps가 사라지고,정적/동적 렌더링 전략은 dynamic과 fetch의 조합으로 결정dynamic은 페이지 단위에서 SSR/SSG 여부를 지정fetch는 데이터의 갱신 주기 설정을 통해 I

부모의 가로(width)에 맞춰 커지되, 세로는 원본 비율 유지정답: \`\`fill은 부모에 높이/비율이 없으면 안 보일 수 있으므로 이번 요구엔 사용하지 않는 게 맞다(max-width: 448px) 100vw화면이 448px 이하일 땐 이미지를 화면 너비(100v

Next.js에서 next/image 컴포넌트에 absolute를 직접 줬더니,이미지가 섹션 전체 기준으로 배치되지 않고 이상한 크기/위치로 표시됨.증상이미지가 섹션 전체에 딱 붙지 않고, 이상하게 작거나 위치가 꼬임.absolute인데도 내가 기대한 부모 기준으로 안

폰트 소스: 눈누(noonnu) 같은 무료 웹폰트 CDN 또는 직접 파일 보관웹 최적 포맷: WOFF2 권장 (용량 작고 브라우저 지원 좋음)프레임워크: Next.js + Tailwind CSS v4 기준눈누에서 폰트 검색 → CSS 코드 복사전역 CSS(app/glo