[Next.js] 라우팅하기

라우팅이란?

어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정
최적의 경로 : 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로
➡️ 경로에 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인지를 결정하는 것

Next.js 상황별 라우팅 살펴보기

1. path가 없는 상황
   1) app 폴더 밑에서 page.tsx가 있는지를 찾는다.
   2) page.tsx의 리턴 값을 layout.tsx 파일의 children 값과 결합해서 만들어진 최종적인 HTML을 응답한다.

2. path가 있는 상황 (/create)
   1) app 폴더 밑에 create라는 폴더를 만든다.
   2) page.tsx(이 파일명은 약속된 것)라는 파일을 만든다.
   3) 만든 파일에 컴포넌트를 작성한다. 컴포넌트의 이름은 의미에 맞게!

export default function Create() {
  return (
    <>Create!!</>
  )
}

Next.js 동작 살펴보기

1. 사용자가 /create 주소로 접속
2. Next.js는 app 폴더 밑에서 create라는 폴더가 있는지 찾는다.
3. 그 폴더가 page.tsx를 가지고 있는지 찾는다.
4. page.tsx까지 찾은 후!
   4-1) create 폴더가 layout.tsx를 가지고 있으면 page.tsx를 그것과 결합한다. 부모 폴더의 layout.tsx와 최종 결합
   4-2) create 폴더가 layout.tsx를 가지고 있지 않다면 page.tsx의 부모 폴더로 가서 다시 layout.tsx를 찾아 결합

Dynamic Routing

read/1 를 Dynamic Routing 하려면?

1. app 폴더 밑에 read 폴더를 만든다.
2. read 폴더 아래에 [id] 폴더를 만든다.
3. [id] 폴더 아래에 page.tsx 파일을 만든다.

export default function Read(props: {
  params: {id: string}
}) {
  return (
    <>
      <h2>Read</h2>
      parameters : {props.params.id}
    </>
  )
}

참고 자료

• 위키백과-라우팅
• 생활코딩 - Next.js 13 - 5. 라우팅