Frontend — 관련 콘텐츠 74건

Dynamic server usage, cookies, 정적 생성 | 빌드만 쿠키에서 멈추면 뭐부터 볼까?

Dynamic server usage는 정적 생성 중 cookies 호출이 넥스트의 동적 전환 밖으로 나가 빌드가 멈출 때 나는 메시지입니다. setTimeout 안이나 await하지 않은 프로미스 뒤에서 읽지 말고, 같은 호출 스택에서 await cookies 하세요. next dev가 조용해도 next build는 멈춥니다. Next.js, 쿠키, 정적 생성, 한국 1인 개발. 2026년 10월 문서.

엣지 런타임, 노드 모듈 미지원, 미들웨어 | 배포 로그만 모듈을 거절하면?

엣지 런타임은 fs, crypto, pg 같은 노드 모듈을 열지 못합니다. 로그에 찍힌 모듈을 미들웨어 임포트에서 빼고, 데이터베이스는 노드 라우트로 옮깁니다. 해시는 웹 크립토로 바꿉니다. 개발 서버가 조용해도 배포 번들은 거절할 수 있습니다. Next.js, 미들웨어, 버셀, 한국 1인 개발. 2026년 10월 문서.

ERR_INVALID_URL, 잘못된 주소, new URL | 환경 변수가 비었는데 빌드가 주소에서 죽으면?

ERR_INVALID_URL은 new URL이 빈 문자열이나 상대 경로를 절대 주소로 읽지 못할 때 노드가 던지는 타입 오류입니다. 빌드 전에 URL.canParse로 거르고, 카카오 콜백은 베이스를 붙여 만듭니다. 클라이언트 번들에만 값이 없는 NEXT_PUBLIC과는 다른 줄입니다. Next.js, 버셀 프리뷰, 환경 변수, 한국 1인 개발. 2026년 10월 문서.

리다이렉트, NEXT_REDIRECT, 서버 함수 | 저장은 됐는데 화면이 안 바뀌면?

서버 함수의 redirect는 값을 돌려주지 않고 NEXT_REDIRECT를 던집니다. try 안에 두면 카카오 로그인 저장은 되고 화면만 콜백에 남습니다. 이동은 try 밖이거나 catch 첫 줄의 unstable_rethrow 다음이어야 합니다. 303과 307, 프록시 이동과 자리를 가릅니다. Next.js, 프론트, 한국 1인 개발. 2026년 9월 문서.

proxy.ts, 미들웨어, Next.js 16 | 파일만 바꿨는데 함수가 안 돌면?

넥스트 16에서 요청 앞 파일은 proxy.ts이고 함수 이름도 proxy여야 합니다. 파일만 바꾸면 로그인 이동이 조용히 사라집니다. 엣지가 필요할 때만 예전 파일을 남기고, 매처가 경로를 빼먹는 문제와는 자리를 가릅니다. 설정 키의 예전 이름은 같이 바꿉니다. Next.js, 프론트, 한국 1인 개발. 2026년 9월 16.3 문서.

이벤트 핸들러, 클라이언트 컴포넌트, 서버 컴포넌트 | 클릭 함수만 넘기면 막히면?

Event handlers cannot be passed는 서버 컴포넌트가 onClick 함수를 클라이언트 속성으로 넘긴 직렬화 오류입니다. 버튼 파일로 나누고 주문 번호만 넘기며, 서버 함수만 예외입니다. useState 지시자 오류와 줄을 가릅니다. Next.js, use client, 프론트, 한국 1인 개발. 2026년 8월 경계 문서.

Dynamic server usage, cookies, 정적 생성 | 빌드만 쿠키에서 멈추면?

Dynamic server usage는 쿠키 API가 고장난 게 아니라 정적 생성 중 cookies 호출이 요청 흐름 밖으로 새어 빌드가 멈춘 줄입니다. try로 감싼 쿠키, setTimeout, 루트 레이아웃을 나눕니다. Next.js, 한국 1인 개발자 기준. 2026년 9월 dynamic server error 문서.

use client, useState, 서버 컴포넌트 | 버튼만 눌러도 훅이 막히면?

use client가 없으면 useState와 onClick은 서버 컴포넌트에서 실행되려다 막힙니다. 훅이 고장난 게 아니라 파일 맨 위 지시어와 직렬화 가능한 props 경계가 비어 있는 줄입니다. 버튼만 클라이언트로 나누고 레이아웃 전체를 옮기지 않는 순서를 봅니다. Next.js, 리액트, 한국 1인 개발자 기준. 2026년 9월 Next.js use client 문서.

Maximum update depth, useEffect, 무한 루프 | 이펙트가 서로를 부르면?

Maximum update depth exceeded는 훅이 고장난 게 아니라 그린 뒤 이펙트가 상태를 바꾸고 그 상태가 다시 이펙트를 불러 한도를 넘긴 줄입니다. Too many re-renders와 구분하고, 객체 의존, 파생 값, 함수형 업데이트를 봅니다. React, Next.js, 한국 1인 개발자 기준. 2026년 9월 React useEffect·에러 185 문서.

redirect_uri_mismatch, 카카오 콜백, REST 키 | 로컬은 되고 프리뷰만 실패하면?

redirect_uri_mismatch와 카카오 KOE006은 코드가 틀린 게 아니라 요청에 실은 콜백 주소가 콘솔 등록 문자열과 한 글자라도 다른 줄입니다. http와 https, 끝 슬래시, REST 키와 JS 키, 프리뷰 호스트. 카카오, 구글, Next.js, 한국 1인 개발자 기준. 2026년 9월 카카오 로그인 REST·구글 OAuth 문서.

ERR_TOO_MANY_REDIRECTS, 리다이렉트 루프, trailingSlash | 배포만 화면이 돌면?

ERR_TOO_MANY_REDIRECTS는 페이지가 없어서가 아니라 Location이 서로를 가리키다 브라우저 한도를 넘긴 줄입니다. 슬래시 왕복, HTTPS·www, 로그인 matcher, 카카오 콜백 URI. Next.js, 버셀, 한국 1인 개발자 기준. 2026년 9월 MDN 리다이렉트·Next.js trailingSlash 문서.

NEXT_PUBLIC, process.env, 환경변수 | 로컬은 되고 클라이언트만 비면?

클라이언트에서 NEXT_PUBLIC 값이 비면 런타임이 거절한 게 아니라 빌드 시점에 그 키가 번들에 안 박힌 줄입니다. 접두사, 통째 표기, 버셀 Preview 토글, 재배포. Next.js, 버셀, 한국 1인 개발자 기준. 2026년 9월 Next.js 환경변수 문서.

Too many re-renders, setState, 무한 렌더 | 화면이 멈추고 콘솔만 도나?

Too many re-renders는 훅이 고장난 게 아니라 그리는 도중에 setState가 다시 그려짐을 불러 한도를 넘긴 줄입니다. onClick 호출, 렌더 몸통 갱신, Maximum update depth와 구분. React, Next.js, 한국 1인 개발자 기준. 2026년 9월 React useState 문서.

cookies(), headers(), await | 넥스트가 동기라고 경고하면?

cookies()를 await 하라는 경고는 취향이 아니라 넥스트 15부터 요청 API가 Promise를 돌려 동기 호출이 깨지는 줄입니다. headers·draftMode도 같고, 서버 컴포넌트와 라우트 핸들러를 async로 바꿉니다. Next.js 15, 쿠키, 한국 1인 개발자 기준. 2026년 9월 Next.js cookies·sync dynamic APIs 문서.

useSearchParams, Suspense, missing boundary | 빌드만 멈추면?

missing suspense boundary는 훅이 잘못된 게 아니라 useSearchParams가 정적 빌드에서 쿼리를 읽는 동안 대체 화면이 없어 넥스트가 멈춘 줄입니다. 쿼리 컴포넌트만 Suspense로 감싸고 루트 전체를 덮지 않습니다. Next.js App Router, 한국 1인 개발자 기준. 2026년 9월 Next.js missing suspense 문서.

next/image, hostname, remotePatterns | 외부 사진만 깨지면?

next/image가 외부 사진만 깨지는 건 경로 오타가 아니라 그 호스트가 images.remotePatterns에 없어 넥스트가 막은 줄입니다. 카카오 CDN 프로필, protocol과 hostname, 프리뷰 재빌드, unoptimized 남용 금지. Next.js, 카카오 로그인, 버셀, 1인 개발자 기준. 2026년 9월 Next.js Image 공식 문서.

async await, 클라이언트 컴포넌트, use | 로그인 버튼에서 유저를 기다렸는데 빨간 줄이면?

use client 파일에서 컴포넌트를 async로 선언하면 async/await is not yet supported in Client Components가 납니다. 카카오 닉네임은 서버에서 await 한 뒤 문자열만 내리고, 화면을 먼저 띄우려면 프로미스를 use로 풉니다. 클릭 핸들러의 await는 됩니다. 넥스트, 리액트, 앱 라우터, 프론트엔드, 1인 개발자 기준. 2026년 9월 Next.js, React 공식 문서.

useSearchParams, Suspense, 정적 빌드 | 로컬은 되는데 빌드만 멈추면?

정적 페이지에서 useSearchParams를 쓰면 가장 가까운 서스펜스 경계까지가 클라이언트에서만 그려집니다. 개발 서버는 통과하고 next build만 missing suspense로 멈춥니다. 훅 자식만 감싸거나 카카오 code는 서버 searchParams로 읽습니다. 넥스트, 리액트, 프론트엔드, 앱 라우터, 1인 개발자 기준. 2026년 9월 Next.js 공식 문서.

params Promise, await params, searchParams | 슬러그를 읽었는데 경고가 나면?

넥스트 15부터 페이지 params와 searchParams는 프로미스입니다. 서버는 await, 클라이언트는 use로 푼 뒤 슬러그와 카카오 code를 읽습니다. 레이아웃에는 쿼리가 없고, cacheComponents에선 동기 접근이 에러입니다. 프론트엔드, 앱 라우터, 1인 개발자 기준. 2026년 9월 Next.js 공식 문서.

Objects are not valid as a React child, 객체, Promise | 카카오 유저를 화면에 넣었는데 빨간 줄이면?

Objects are not valid as a React child는 일반 객체, Date, Promise를 JSX 자식으로 넣었을 때 납니다. 카카오 유저는 닉네임 필드를, 목록은 map을, 프로미스는 await나 use로 바꿉니다. 리액트 31번, 넥스트, JSON.stringify, 프론트엔드, 1인 개발자 기준. 2026년 9월 리액트·넥스트 공식 문서.