NEXT.JS · CONSOLE-FIRST TESTING

호출 코드는 그대로.
화면의 가능성은 자유롭게.

테스트 데이터는 따로 두고, 원하는 값은 콘솔에서.
CSR부터 SSR·ISR·SSG까지 같은 명령으로 확인하세요.

npm i @uiwwsw/next-test-mode→npx @uiwwsw/next-test-mode init

TRY IT IN YOUR BROWSER

네 가지 렌더링, 같은 사용법.

연결 중…

빌드 때 만든 화면도 미리보기

일반 방문자는 빌드된 HTML을, 테스트 세션은 Draft Mode의 새 렌더를 받습니다.

DEVTOOLS → CONSOLEtest.patch('/api/cart.json', { total: 9.99 })

콘솔에서 서버 캐시까지

기본 캐시 경로 · 공용 캐시는 유지됩니다.

test.cache.bypass() · test.cache.refresh() · test.cache.restore()

원하는 데이터를 넣으세요

콘솔과 입력창은 같은 패키지 API를 실행합니다.
값을 바꾸면 Draft Mode 연결 후 화면이 자동 갱신됩니다.

서버가 HTML에 넣은 결과

HTTP 200SSG → HTML

Cart total42

{
  "items": [
    {
      "name": "Canvas tote",
      "price": 24
    },
    {
      "name": "Everyday mug",
      "price": 18
    }
  ],
  "total": 42
}

서버에서 생성한 시각 2026-09-18T01:45:57.822Z

내 테스트 세션에만 적용됩니다. 새로고침 후에도 유지되며, 같은 브라우저의 탭이 공유합니다. test.clear()로 종료하세요.

01 / SAME CALLS

호출부를 고치지 마세요.

앱 시작 지점에 한 번 연결하면 기존 fetch를 계속 사용합니다.

02 / YOUR SCENARIOS

테스트는 테스트로 남기세요.

한 번 쓸 값은 콘솔에서. 반복할 시나리오는 별도 폴더에서 수정하고 공유하세요.

03 / EVERY RENDER

캐시된 페이지도 확인하세요.

Draft Mode가 테스트 세션의 캐시를 우회합니다. 일반 방문자는 원래 페이지를 봅니다.

지원 범위와 입력값 안내

Next.js 16 App Router의 Node 환경에서 실행하는 fetch 기반 CSR·SSR·ISR·SSG 미리보기를 지원합니다. 정적 HTML export·Pages Router·Edge·DB 직접 조회는 자동 연결 범위에 포함하지 않습니다.

입력값은 인코딩 후 최대 3,500바이트입니다. 큰 응답은 필요한 필드만 Patch하거나 파일에 시나리오로 등록하세요. 이 데모는 /api/cart.json 샘플 경로만 변경합니다.