index.tsx와 app.tsx

react에서 typescript를 이용해서 프로젝트를 생성하면 기본적으로 생성되는
폴더들이 있다.
그중에서 index.tsx와 app.tsx 두 파일이 존재하는 이유가 궁금해졌다.

next.js에서 router이랑 app이랑 라우팅해서 /로 요청했을 때'index.tsx'로 렌더링 된다.
그리고 /a 라고 요청하면 'a.tsx'로 렌더링 되는 것이다.

index.tsx는 /로 렌더링되는 컴포넌트다.

반면 app과 document는 항상 렌더링되는 컴포넌드이다.

따라서 app이나 document에 태그를 사용해서 페이지를 구성하면 어떤 경로로 가던 항상 그 태그들이 나타난다.

app와 document의 차이가 뭘까?

이 또한 마찬가지로 역할을 구분지은 것이다.

app.tsx는 레이아웃을 정하는 역할을 맡고
document는 스타일, 스크립트 등의 역할을 맡는다.