Creating Routes

• 앱 디렉터리 내부에서 폴더는 라우팅 경로를 설정하기 위해 사용됨
• 각각의 폴더는 URL segment에 대응되는 route segment가 되며, 폴더를 중첩해 nested route를 생성할수도 있음
• 폴더 내부에 page.js 파일을 만드는 것으로 세그먼트를 공개할 수 있음

Creating UI

• 파일 컨벤션에 따라 각각의 페이지에 ui를 설정해줄 수 있음
  예를 들어 page.js에 리액트 컴포넌트를 반환해줄 수 있음

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Route Groups

• 일반적으로 폴더 구조가 url segment와 대응되지만, route group를 생성해 예외적인 구조를 형성할 수 있음
• route group을 사용하면 다음과 같은 역할을 수행할 수 있음
  • URL과 관계없이 route들의 구조화를 가능하게 해줌
  • 하위 url들이 공통적으로 사용할 layout 설정
  • 여러개의 root layout 사용

• (폴더명)의 형식을 사용해 route group을 정의하며, 해당 폴더는 url에서 제외됨
• route group의 대상이 되는 폴더에도 layout.js 파일을 생성해 레이아웃 구조를 잡아줄 수 있음

Dynamic Segments

• route 경로에 들어올 정확한 segement의 이름을 모르는 경우에 Dynamic Segments를 사용해 리퀘스트시나 빌드 타임에 내용물을 결정하도록 할 수 있음
• 폴더에[폴더명]의 이름을 사용해 Dynamic Segments를 표현함
  폴더명에 들어가는 데이터는 param이 되어 실제 레이아웃 컴포넌트에서 사용할 수 있게 됨
  만약 하위 URL segement를 전부 catch하고 싶다면 폴더 이름을 [...폴더명] 식으로 작성해야 함, 이때 param은 segement별로 나뉜 배열로 전달됨
  param이 optional한 경우에는 폴더 이름을 [[...폴더명]] 식으로 작성
• 타입스크립트 사용시에는 각각의 폴더명 속성에 대한 타입을 작성해 주어야 함

// app/myPage/[someParam]/page.js
export default function Page({
  params,
}: {
  params: { someParam: string };
}) {
  return <h1>My Page</h1>;
}

출처:
https://beta.nextjs.org/docs/routing/defining-routes#creating-routes