문서
App Router 사용하기
API 참조
next.config.js 옵션
devIndicators

devIndicators

devIndicators를 사용하면 개발 중에 현재 보고 있는 경로에 대한 정보를 화면에 보여주는 표시기를 구성할 수 있습니다.

Types
  devIndicators: {
    appIsrStatus?: boolean, // 기본값은 true
    buildActivity?: boolean, // 기본값은 true
    buildActivityPosition?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // 기본값은 'bottom-right'
  },

appIsrStatus (정적 표시기)

이 옵션은 Next.js canary 버전에서 사용 가능합니다.

Next.js는 화면 하단 모서리에 정적 표시기를 표시하여 빌드 시 경로가 미리 렌더링될 것임을 알려줍니다. 이를 통해 경로가 정적인지 동적인지 더 쉽게 이해할 수 있고, 정적 렌더링에서 제외된 경로를 식별할 수 있습니다.

App 폴더 구조

표시기를 닫거나 next.config.js의 설정 옵션을 사용하여 비활성화할 수 있습니다:

next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
};
 
export default nextConfig;
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
};
 
module.exports = nextConfig;

buildActivity (컴파일 표시기)

코드를 수정하고 Next.js가 애플리케이션을 컴파일할 때, 페이지의 오른쪽 하단 모서리에 컴파일 표시기가 나타납니다.

알아두면 좋은 점: 이 표시기는 개발 모드에서만 존재하며 프로덕션 모드에서 앱을 빌드하고 실행할 때는 나타나지 않습니다.

경우에 따라 이 표시기가 페이지에서 잘못된 위치에 있을 수 있습니다. 예를 들어, 채팅 런처와 충돌하는 경우입니다. 위치를 변경하려면 next.config.js를 열고 devIndicators 객체의 buildActivityPosition을 bottom-right(기본값), bottom-left, top-right 또는 top-left로 설정하세요:

next.config.js
module.exports = {
  devIndicators: {
    buildActivityPosition: "bottom-right",
  },
};

경우에 따라 이 표시기가 필요하지 않을 수 있습니다. 제거하려면 next.config.js를 열고 devIndicators 객체에서 buildActivity 설정을 비활성화하세요:

next.config.js
module.exports = {
  devIndicators: {
    buildActivity: false,
  },
};

문제 해결

정적 경로가 표시기를 보여주지 않는 경우

경로가 정적이라고 예상하고 표시기가 활성화되어 있지만 표시되지 않는 경우, 해당 경로가 정적 렌더링에서 제외되었을 가능성이 높습니다.

next build --debug를 사용하여 애플리케이션을 빌드하고 터미널의 출력을 확인하여 경로가 정적인지 동적인지 확인할 수 있습니다. 정적(또는 미리 렌더링된) 경로는 ○ 기호를 표시하고, 동적 경로는 ƒ 기호를 표시합니다. 예를 들어:

빌드 출력
Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB
 
○  (Static)   정적 콘텐츠로 미리 렌더링됨
ƒ  (Dynamic)  요청 시 서버에서 렌더링됨

경로가 정적 렌더링에서 제외되는 이유는 두 가지입니다:

경로에서 이러한 조건을 확인하고, 경로를 정적으로 렌더링할 수 없는 경우 loading.js 또는 <Suspense />를 사용하여 스트리밍을 활용하는 것을 고려해보세요.

cssChunkingdistDir