문서
App Router 사용하기
default.js

default.js

default.js 파일은 Next.js가 전체 페이지 로드 후 슬롯의 활성 상태를 복구할 수 없을 때 병렬 라우트 내에서 대체 내용을 렌더링하는 데 사용됩니다.

소프트 경로 이동 동안 Next.js는 각 슬롯의 활성 상태 (하위 페이지)를 추적합니다. 그러나 하드 내비게이션(전체 페이지 로드)의 경우 Next.js는 활성 상태를 복구할 수 없습니다. 이 경우 현재 URL과 일치하지 않는 하위 페이지에 대해 default.js 파일이 렌더링될 수 있습니다.

다음 폴더 구조를 고려해보세요. @team 슬롯에는 settings 페이지가 있지만 @analytics에는 없습니다.

병렬 라우트 일치하지 않는 라우트

/settings로 이동할 때 @team 슬롯은 settings 페이지를 렌더링하면서 @analytics 슬롯의 현재 활성 페이지를 유지합니다.

새로고침 시 Next.js는 @analytics에 대해 default.js를 렌더링합니다. default.js가 존재하지 않으면 대신 404가 렌더링됩니다.

또한 children은 암시적 슬롯이므로 Next.js가 부모 페이지의 활성 상태를 복구할 수 없을 때 children에 대한 대체 내용을 렌더링하기 위해 default.js 파일을 생성해야 합니다.

Props

params (선택사항)

루트 세그먼트에서 슬롯의 하위 페이지까지의 동적 라우트 매개변수를 포함하는 객체입니다. 예를 들어:

예시URLparams
app/[artist]/@sidebar/default.js/zack{ artist: 'zack' }
app/[artist]/[album]/@sidebar/default.js/zack/next{ artist: 'zack', album: 'next' }