React
[NextJS] Next.js 13이상 - App Router 기본 폴더 구조
뉴히
2024. 3. 5. 10:31
Page.tsx 가 메인페이지
그를 감싸는 Layout.tsx
페이지생성은 src 아래 폴더생성(subpage)>page.tsx 파일생성하면 페이지 생성완료
ex) http://www.ddd.com/subpage
subpage에 page.tsx는 같은 레벨에 layout파일이 있다면 layout으로 감싸지며
그상위 폴더에 layout파일이 또있으면 또 감싸지고
그상위 폴더에 layout파일로 또감싸진다
page router의 경우는
pages > index.tsx -> main
pages폴더 아래 파일을 생성하면
페이지생성이 완료 된다.
ex) pages>about.tsx --> www.ddd.com/about
다이나믹 라우팅의 경우
app 폴더아래
첫번빼 경로 폴더를 만들고
다이나믹하게 바뀌는 segment 에다가
[id] 폴더를 생성하고
그아래 page.tsx 파일을 생성한다.
그리고 다이나믹하게 바뀌는 [id]안에 들어가는 값을 app으로 가져오기 위해
export default function 페이지명(props) {
return (
<>
<div>제품 상세 페이지</div>
parameters : {props.params.id}
</>
);
}
props를 받아서 불러올 수 있다.