2026. 7. 22.
Next.js Unable to acquire lock, 포트를 바꿔도 왜 다시 막힐까?
Next.js 16에서 Unable to acquire lock이 뜨면 포트를 바꾸거나 .next를 통째로 지우기 전에 같은 프로젝트를 실행 중인 프로세스부터 찾고 안전하게 종료해야 한다.
TAG
#nextjs
같은 태그로 묶인 기사 아카이브입니다.
2026. 7. 22.
Next.js Cross origin request 경고, allowedDevOrigins 설정법
휴대폰·프록시·다른 로컬 도메인으로 Next.js 개발 서버를 열 때 생기는 경고를 읽고, 신뢰하는 호스트만 허용한 뒤 재시작으로 확인하는 순서입니다.
2026. 7. 19.
Next.js usePathname hydration mismatch, 경로 표시만 마운트 뒤 갱신하세요
Next.js rewrite나 Proxy 뒤 usePathname을 표시할 때 새로고침에서만 hydration mismatch가 난다면, 서버 경로와 브라우저 경로를 비교하고 경로 표시 부분만 마운트 뒤 갱신하는 순서입니다.
2026. 7. 18.
`No Cache Detected`는 언제 무시해도 될까? Next.js CI는 두 번째 빌드로 판단합니다
Next.js CI의 No Cache Detected가 첫 빌드라 정상인지 반복 누락인지 가르고, .next/cache의 restore와 save를 두 번의 빌드 로그로 검증하는 순서다.
2026. 7. 18.
Next.js 16 빌드가 default.js 누락으로 멈출 때, parallel route 슬롯을 채우는 법
Next.js 16에서 parallel route의 default 파일이 빠져 빌드가 실패할 때 누락 슬롯을 찾고 fallback을 선택한 뒤 build와 새로고침을 검증하는 순서입니다.
2026. 7. 18.
Next.js 16 custom webpack 오류, 설정을 지우기 전에 번들러를 선택하세요
Next.js 16에서 custom webpack 설정 때문에 빌드가 멈출 때 설정의 소유자와 기능을 확인하고 Turbopack 이전 또는 --webpack 유지 경로를 고르는 순서입니다.
2026. 7. 18.
Next.js cookies().get이 Promise라면 어디에서 읽고 써야 할까?
Next.js cookies().get에서 Promise 타입 오류가 날 때 읽기는 await한 store에서 처리하고, 쓰기는 Server Function이나 Route Handler로 옮겨 검증하는 순서다.
2026. 7. 18.
Next.js hostname을 넣었는데 왜 이미지가 막힐까? remotePatterns 다섯 칸 대조
Next.js 외부 이미지가 hostname 오류로 막힐 때 실제 src와 remotePatterns의 다섯 요소를 맞추고, 필요한 경로만 허용한 뒤 재시작과 이미지 응답까지 확인하는 순서다.
2026. 7. 16.
Vercel FUNCTION_INVOCATION_TIMEOUT, 로그에서 먼저 볼 것
Vercel 배포 뒤 504 FUNCTION_INVOCATION_TIMEOUT이 뜰 때 런타임 로그와 구간별 시간 측정으로 느린 외부 호출, 응답 누락, 반복문을 구분하는 점검 순서입니다.
2026. 7. 16.
Client Components cannot be async functions 해결, fetch 위치를 나누는 법
Next.js의 Client Components cannot be async functions 오류에서 use client, 컴포넌트 async, fetch 위치를 확인하고 Server와 Client 역할을 다시 나누는 순서다.
2026. 7. 16.
Vercel 배포 성공인데 404, 루트·하위 경로별 점검표
Vercel 배포가 성공으로 끝났는데 공개 URL에서 404가 뜰 때 기본 URL, 하위 경로, 프레임워크, Root·Output Directory, rewrite와 도메인을 순서대로 점검하는 방법입니다.
2026. 7. 16.
Next.js Server Action이 두 번 실행된다면 pending 동안 제출 버튼을 잠그세요
Next.js Server Action 폼에서 응답 전에 저장 버튼을 다시 누르게 된다면 useActionState 또는 form 안의 useFormStatus로 pending 상태를 읽고 버튼을 잠근 뒤 느린 제출로 검증한다.
2026. 7. 16.
Next.js middleware가 deprecated라면, proxy.ts로 바꾸기 전 확인할 것
Next.js 16에서 middleware.ts 경고를 만났을 때 Edge Runtime과 처리 목적을 먼저 확인하고, proxy.ts 전환 뒤 빌드와 실제 경로를 검증하는 순서입니다.
2026. 7. 12.
Next.js params Promise 오류, Server와 Client를 가른 뒤 고치는 법
Next.js 동적 라우트에서 params가 Promise라는 빌드 오류가 날 때, Server Component의 await와 Client Component의 use 중 맞는 경로를 고르고 빌드까지 확인하는 순서입니다.
2026. 7. 12.
Next.js 개발은 되는데 빌드만 실패할 때, 검색 화면만 감싸서 통과하는 법
Next.js App Router에서 개발 화면은 정상인데 빌드가 useSearchParams 오류로 멈출 때, 작은 Client Component와 Suspense 경계로 수정 범위를 줄이고 빌드 출력으로 확인하는 순서다.
2026. 7. 11.
Next.js 환경변수, 공개해도 되는 값과 서버에 남길 값을 가르는 기준
Next.js 화면에서 환경변수가 undefined로 보일 때, 값을 공개하기 전에 클라이언트 여부와 NEXT_PUBLIC_ 접두사, 배포 환경, 재빌드 순서를 점검하는 실전 가이드다.
2026. 7. 8.
Next.js 버튼 오류에서 use client를 붙일 파일만 고르는 순서
Next.js App Router에서 버튼, useState, onClick 오류가 뜰 때 페이지 전체에 use client를 붙이기 전에 서버 파일과 클라이언트 버튼 파일을 나누는 순서를 확인합니다.
2026. 7. 8.
npm run dev가 missing script로 멈출 때 package.json scripts부터 확인하는 법
npm run dev에서 Missing script: \"dev\"가 나오면 앱 전체가 망가진 것이 아닐 수 있습니다. package.json scripts를 먼저 보고, 존재하는 명령과 추가해야 할 명령을 나누는 순서입니다.
2026. 7. 7.
AI가 고쳤다는데 화면이 그대로일 때, 저장·서버·포트를 확인하는 순서
AI 코딩 도구가 수정 완료라고 했는데 브라우저 화면이 그대로라면 다시 고쳐 달라고 하기 전에 저장, 개발 서버, 포트, 새로고침, 화면 비교를 순서대로 분리합니다.
2026. 7. 7.
Vercel Module not found, 재설치 실수 막는 대소문자 3분 점검
로컬에서는 통과하는데 Vercel 배포에서만 Module not found가 뜰 때, npm 재설치 전에 파일명 대소문자와 Git 추적 상태를 3분 안에 확인하는 순서입니다.
2026. 7. 7.
Next.js 빌드가 useSearchParams에서 멈출 때 3분 Suspense 수정
Next.js App Router에서 useSearchParams를 넣은 뒤 next build가 Suspense 오류로 멈출 때, 전체 페이지를 다시 만들지 않고 작은 컴포넌트 분리와 Suspense 감싸기로 확인하는 3분 수정 순서입니다.
2026. 7. 5.
Supabase 저장 버튼이 먹통일 때, RLS를 7분 안에 확인하는 순서
AI가 만든 React나 Next.js 화면에서 Supabase 저장 버튼은 눌리는데 테이블이 비어 있다면 UI를 다시 만들기 전에 error, 로그인 상태, RLS 정책, 반환값을 7분 안에 나눠 봅니다.
2026. 7. 2.
Next.js 15 동적 라우트가 멈출 때, params 에러 3분 수정 순서
Next.js 15로 올린 뒤 `params should be awaited`나 Promise 타입 에러가 보이면 동적 라우트 파일에서 `params`를 먼저 await하고 타입을 Promise로 맞추면 됩니다. 전체 페이지를 다시 만들기 전에 3분 안에 확인할 순서를 정리했습니다.
2026. 7. 1.
AI가 만든 Next.js 모바일 화면 깨질 때 7분 점검 5단계
AI 코딩 도구가 만든 Next.js나 Tailwind 화면이 데스크톱에서는 정상인데 모바일에서 카드가 밀리고 버튼이 잘릴 때, 전체 재작성 전에 폭, grid, 이미지 비율, 수정 프롬프트를 7분 안에 좁히는 순서입니다.
2026. 7. 1.
Next.js 빌드 에러가 .next/types에 뜰 때, 원본 라우트 찾는 법
Next.js 빌드 에러가 .next/types를 가리킬 때 생성 파일을 고치지 않고 next typegen, 오류 종류, app 라우트 순서로 원본을 찾는 방법입니다.
2026. 6. 30.
Next.js EADDRINUSE, 3000번 포트 주인을 확인하고 다시 여는 순서
Next.js 개발 서버가 `EADDRINUSE`나 `port 3000 already in use`에서 멈추면 코드 전체를 고치기 전에 포트를 점유한 프로세스를 확인하고 종료 또는 대체 포트를 선택하세요.
2026. 6. 30.
Next.js window is not defined, 오류 줄에서 실행 위치 찾는 순서
Next.js에서 window is not defined 또는 localStorage is not defined가 뜰 때, 오류 줄부터 client 경계와 실행 시점을 좁혀 최소 수정하는 순서입니다.
2026. 6. 30.
기본 버튼 그대로라면 Tailwind가 CSS를 만들었는지부터 확인하세요
React나 Next.js 화면에서 Tailwind className을 넣었는데 스타일이 안 바뀔 때, CSS import, 파일 감지, 동적 클래스와 충돌을 순서대로 좁히는 초보자용 가이드입니다.
2026. 6. 30.
React 폼 제출 후 새로고침될 때, 기본 동작을 막는 기준
AI가 만든 React나 Next.js 폼에서 제출 버튼을 누를 때 화면이 새로고침된다면 onSubmit 위치, button type, preventDefault, async 처리, 콘솔과 네트워크를 순서대로 확인해야 합니다.
2026. 6. 28.
Next.js 이미지 안 보임, Network에서 확인할 세 줄
AI 코딩 도구가 만든 Next.js 화면에서 이미지만 깨질 때 public 경로, 파일명 대소문자, next/image 크기, remotePatterns, 배포 후 404를 3분 안에 좁히는 초보자용 체크리스트입니다.
2026. 6. 28.
Next.js API 404와 405, 주소 오류인지 메서드 오류인지 나누는 법
Next.js 화면은 열리지만 API 요청만 404 또는 405로 실패할 때, Network의 URL·method·status와 route.ts를 비교해 첫 수정 지점을 고르는 실전 점검법이다.
2026. 6. 26.
fetch CORS 오류, no-cors 전에 브라우저와 서버를 가르는 확인 순서
AI가 만든 React·Next.js 화면의 fetch가 CORS로 막혔을 때 origin, 실패 요청, 서버 응답 헤더, credentials를 확인해 수정할 경계를 좁히는 순서다.
2026. 6. 26.
React 입력값이 새로고침 후 사라질 때, state와 저장소를 나누는 순서
React나 Next.js 입력값이 새로고침 후 사라진다면 state, 저장 함수, 저장 위치, 불러오기 코드를 순서대로 확인해 누락된 한 단계만 고칠 수 있습니다.
2026. 6. 19.
AI가 만든 화면이 모바일에서 넘칠 때, 고칠 범위부터 좁히는 법
AI가 만든 React나 Next.js 화면이 휴대폰 폭에서 옆으로 넘칠 때, 같은 폭에서 증상을 재현하고 viewport·고정 폭·flex/grid·긴 문자열로 원인을 나눠 최소 수정만 요청하는 순서입니다.
2026. 6. 19.
Next.js 환경변수 undefined, 배포 전에 이름과 위치를 비교하는 법
AI가 만든 Next.js 앱에서 환경변수가 undefined로 보이면 코드를 다시 맡기기 전에 파일 위치, 변수 이름, NEXT_PUBLIC_ 접두사, 개발 서버 재시작, Vercel 배포 환경을 3분 안에 나눠 확인해야 합니다.
2026. 6. 17.
Next.js Hydration failed: 서버 HTML과 첫 렌더를 원인별로 맞추세요
AI가 만든 Next.js 페이지에서 Hydration failed가 뜰 때 오류 스택에서 문제 컴포넌트를 찾고, 서버 HTML과 브라우저 첫 렌더가 달라지는 값을 원인별로 좁히는 순서입니다.
2026. 6. 17.
Vercel 배포 실패, 로그에서 멈춘 지점을 찾는 순서
로컬에서는 되는데 Vercel 배포만 실패할 때는 코드를 다시 만들기보다 로그, 빌드 재현, 환경변수, Suspense, 정적 생성 순서로 좁히면 됩니다.