Next.js — 관련 콘텐츠 97건

Dynamic server usage는 정적 생성 중 cookies 호출이 넥스트의 동적 전환 밖으로 나가 빌드가 멈출 때 나는 메시지입니다. ERR_INVALID_URL은 new URL이 빈 문자열이나 상대 경로를 절대 주소로 읽지 못할 때 노드가 던지는 타입 오류입니다. 서버 함수의 redirect는 값을 돌려주지 않고 NEXT_REDIRECT를 던집니다.

관련 글 리스트

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

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

Frontend2026-10-06

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

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

Frontend2026-10-03

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

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

Frontend2026-09-29

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

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

Frontend2026-09-28

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

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

Frontend2026-09-05

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

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

Frontend2026-09-04

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

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

Frontend2026-09-04

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월 리액트·넥스트 공식 문서.

Frontend2026-09-04

window is not defined, document, 브라우저 API | use client를 붙였는데도 빌드가 죽으면?

use client를 붙여도 window is not defined가 나면, 클라이언트 컴포넌트가 서버에서 한 번 그려진 겁니다. 렌더와 파일 맨 위가 아니라 useEffect나 ssr false로 옮깁니다. 넥스트, 리액트, document, 카카오 지도, 다음 주소, 프론트엔드, 1인 개발자 기준. 2026년 9월 Next.js, React 공식 문서.

Frontend2026-09-04

useState, use client, 서버 컴포넌트 | 훅을 넣었는데 빨간 줄이면?

앱 라우터에서 useState가 막히면 그 파일은 아직 서버 컴포넌트입니다. 훅을 쓰는 파일 맨 위에 use client를 붙이거나 버튼만 쪼갭니다. Invalid hook call, 하이드레이션과 자리를 나눕니다. 넥스트, 리액트, 서버 컴포넌트, 카카오 로그인, 프론트엔드, 1인 개발자 기준. 2026년 9월 Next.js, React 공식 문서.

Frontend2026-09-04

tsconfig paths, alias, 모듈 해석 | @/ 가 런타임에서만 깨지면?

넥스트는 되는데 node 스크립트만 @/ 별칭을 못 찾으면 tsconfig paths가 런타임 경로를 안 바꿉니다. TypeScript paths, Next.js 번들러, Node.js 타입 스트리핑, package.json imports, 모듈 해석, 1인 개발자 크론과 깃허브 액션 기준. 2026년 9월 TypeScript, Node, Next 공식 문서.

Programming Languages2026-09-03

CSS module not found, .module.css, 대소문자 | 맥에서는 되고 리눅스 CI만 실패하면?

맥에서 되고 리눅스 통합 환경만 CSS 모듈을 못 찾으면 import 경로와 파일명 대소문자가 다른 상태다. git ls-files로 실제 이름을 보고 git mv로 맞춘다. Next.js .module.css, webpack Module not found, 깃 core.ignoreCase, 깃허브 액션, 프론트엔드, 개발자 기준. 2026년 9월 Next.js·webpack·깃 공식 문서.

Frontend2026-09-03

Failed to load chunk, 동적 import, CDN 캐시 | 배포 직후만 흰 화면이면?

Failed to load chunk는 열어 둔 탭이 옛 빌드 자바스크립트 주소를 요청한 상태다. 네트워크에서 청크 404를 보고, HTML은 짧게 캐시하고, ChunkLoadError에서 한 번만 새로고침한다. 넥스트 동적 import, 웹팩 청크, 버셀 스큐, 씨디엔, 프론트엔드, 개발자 기준. 2026년 9월 webpack·Next.js·Vercel 공식 문서.

Frontend2026-09-02

Text content did not match, 날짜, toLocaleString | 한국 시간이 서버와 어긋나면?

Text content did not match에서 서버와 브라우저 날짜 글자가 다르면 toLocaleString이 시간대와 로케일을 환경 기본값으로 쓴 상태다. Asia/Seoul을 박거나 첫 렌더는 고정하고 마운트 뒤에 바꾼다. 하이드레이션 일반 원인, DB 타임스탬프츠와 자리를 나눈다. Next.js, React, Intl, 버셀, 프론트엔드, 개발자 기준. 2026년 9월 Next.js·MDN 공식 문서.

Frontend2026-09-02

React invalid hook call, 훅 규칙, 중복 리액트 | 패키지가 리액트를 두 개 들고 있으면?

Invalid hook call이 패키지 쪽에서 나면 앱과 react-dom이 서로 다른 리액트 파일을 읽고 있는 상태다. npm ls react로 트리를 보고, npm link·별칭·overrides로 한 복사본에 맞춘다. 훅을 조건 안에 넣은 줄과 자리를 나눈다. React, Next.js, webpack, 피어 의존성, 프론트엔드, 개발자 기준. 2026년 9월 리액트·npm 공식 문서.

Frontend2026-09-02

headers was already sent, API 라우트, res.end | JSON을 두 번 쓰면 왜 500이 되나?

페이지 API에서 JSON을 두 번 쓰면 노드가 헤더를 이미 보냈다고 하고 화면은 500이 된다. res.json 다음 return, headersSent, 앱 라우트 Response 반환을 나눈다. 카카오 콜백과 토스 웹훅에서 200 뒤 오류 칸을 본다. Next.js, Node.js, API, 웹훅, 백엔드, 개발자 기준. 2026년 9월 Node.js, Next.js 공식 문서.

Backend2026-09-02

504 Gateway Timeout, maxDuration, 스트리밍 | 응답이 끊기기 전에 어디를 자를까?

배포만 504면 함수가 라우트 최대 실행 초 안에 응답을 못 끝낸 상태다. 오류 이름의 함수 호출 시간 초과, maxDuration, 스트리밍 시계, after로 일을 자르는 순서를 본다. 한도만 키우지 말고 첫 바이트를 먼저 보낸다. Next.js, 버셀, 클라우드플레어, API, 함수, 개발자 기준. 2026년 9월 MDN, RFC 9110, 버셀 공식 문서.

Cloud & DevOps2026-09-01

502 Bad Gateway, 업스트림, 함수 타임아웃 | 버셀 로그에 함수는 성공인데 화면이 502면?

버셀 함수 로그는 성공인데 화면만 502면 업스트림 응답이 프록시에 유효하게 안 도착한 상태다. x-vercel-error의 NO_RESPONSE_FROM_FUNCTION, 첫 바이트 지연, 스트림 중단을 본다. 응답을 먼저 보내고 긴 일은 after로 뺀다. Next.js, 버셀, 클라우드플레어, API, 함수, 개발자 기준. 2026년 9월 MDN, RFC 9110, 버셀 공식 문서.

Cloud & DevOps2026-09-01

403 Forbidden, RLS, 권한 | 슈퍼베이스에서 select는 되고 insert만 막히면?

조회는 되고 저장만 403이면 행 수준 보안의 넣기 정책이 그 행을 거절한 상태다. 조회 조건과 쓰기 검사, 사용자 아이디, 익명 키와 서비스 롤 키를 나눈다. 슈퍼베이스, 포스트그레, Next.js, API, 백엔드, 보안, 카카오 로그인, 서버 액션, 개발자 기준. 2026년 9월 MDN, 포스트그레, 슈퍼베이스 공식 문서.

Backend2026-09-01

401 Unauthorized, Bearer, 만료 토큰 | 로그인은 됐는데 저장만 거절되면?

로그인은 됐는데 저장만 401이면 화면 세션과 요청 자격이 갈린 상태다. Bearer 헤더 누락, 만료된 액세스 토큰, 서버 액션에 안 실리는 인증부터 본다. WWW-Authenticate의 invalid_token이면 리프레시 한 번 후 재시도한다. 개발자, Next.js, 서버 액션, API, 카카오 로그인, 보안, 백엔드 기준. 2026년 9월 MDN·RFC 6750·카카오 공식 문서.

Security2026-09-01

카테고리 탐색

관련 키워드