Layouts & Page

레이아웃 교체를 지원하는 라우트는 @extensions에서 제공하는 레이아웃을 사용합니다. 코어 기본 모듈과 확장 레이아웃의 소스는 분리해서 유지합니다.

import { DefaultLayout } from "@extensions";
import { AuthLayout } from "@extensions";

src/extensions/index.tsx에서 같은 이름으로 export하면 기존 app 라우트가 자동으로 커스텀 레이아웃을 사용합니다.

src/extensions/layouts/default/Layout.tsx
src/extensions/layouts/authLayout/Layout.tsx
src/extensions/pages/MainIntro/index.tsx
src/extensions/pages/MainIntro/routes/page.tsx
src/extensions/index.tsx

새 페이지 구현은 기능 폴더에 두고 routes.json에 Next.js 연결 위치를 선언합니다. route group 이름은 URL에 노출되지 않지만 상위 layout은 적용되므로 기존 레이아웃 계층을 확인합니다.

src/extensions/dashboard/routes/dashboard/page.tsx   구현 원본
src/extensions/dashboard/routes.json                 연결 목록
    ↓ npm run extensions:sync
src/app/(extensions)/dashboard/page.tsx              생성된 연결 파일
    ↓
/dashboard

layout.tsx도 같은 방식으로 연결할 수 있습니다. dynamic, runtime 같은 정적 설정은 routes.json의 configs에 선언하여 연결 파일에 유지합니다. 목록 예시는 [Extensions](/docs/extensions)를 참고하세요.

현재 extensions:sync는 직접 실행하는 명령이며 dev/build 시작 시 자동 실행되지 않습니다. 일반 수작업 라우트 덮어쓰기는 거부하고, 제거된 라우트의 연결 파일을 자동 삭제하지도 않습니다.

기본 모듈 라우트를 직접 바꾸면 upstream 업데이트 때 충돌이 생기기 쉽습니다. 확장 소유 연결 파일은 routes.json으로 관리하고, 코어 화면 교체는 extension export와 registry를 우선 사용합니다. 폴더에 레이아웃 파일을 넣는 것만으로 등록되지는 않습니다.