[NextJS] Next.js 13이상 - App Router 기본 폴더 구조

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를 받아서 불러올 수 있다.