[Next.js] 폴더 구조 및 동적 경로 설정하기

폴더 구조 및 동적 경로 설정하기

들어가며

• Next.js를 이용하여 폴더 구조 및 동적 경로를 설정하는 방법을 정리해본다.

 

방법

① 비공개 폴더(Private Folder) 생성하기

• 앱(@app@) 폴더는 기본적으로 URL 세그먼트가 된다.
• 비공개 폴더(Private Folder)를 만들고 싶을 경우, 폴더 이름 앞에 밑줄(@_@)을 추가한다.

_css

 

⇒ @_css@ 폴더 생성 시, 해당 폴더는 URL 세그먼트로 노출되지 않으며, 만약 해당 경로에 접속할 경우 404 페이지를 반환한다.

 

• 비공개 폴더는 라우팅에 직접 포함되지 않는 폴더이다.
• 일반적으로 내부 관리 목적으로 사용된다.

 

비공개 폴더를 생성한 모습

 

② 라우트 그룹(Route Group) 생성하기

• 라우트 그룹(Route Group)은 특정 페이지나 경로를 그룹화한다.
• 이러한 그룹의 이름은 URL에 영향을 주지 않으며, 파일 구조만 관리한다.
• 소괄호(@()@)를 이용하여 그룹화할 수 있다.

(dashboard)

 

⇒ @(dashboard)@ 폴더 내에 @auth@ 폴더를 만들면, @/auth@로 접근할 수 있다. (@/dashboard/auth@처럼 대시보드 경로를 추가할 필요가 없다.)

 

라우트 그룹을 생성한 모습

 

③ 동적 경로(Dynamic Routes) 생성하기

Catch-All 라우트 세그먼트

• 대괄호(@[...folder]@)를 사용하여 해당 경로 이후의 모든 파라미터를 가져온다.
  
  • 예를 들어 @/folder/abc/def@와 같은 모든 하위 경로를 처리할 수 있다.
• 파라미터 값은 문자열 배열(String Array)로 전달된다.

[...signIn]

 

⇒ @/signIn/1/2/3@ 처럼 여러 세그먼트를 포함하는 경로를 모두 인식한다.

⇒ 파라미터 값은 다음과 같이 전달된다.

params = ['signIn', '1', '2', '3']

 

Optional Catch-All 라우트 세그먼트

• 이중 대괄호(@[[...folder]]@)를 사용하면 선택적으로 경로를 가져올 수 있다.
• 파라미터가 없으면 빈 배열(@[]@)이 전달된다.
• 해당 경로가 없어도 에러(404 에러 등) 없이 동작한다.
• 주로 @Clerk@와 같은 인증 라이브러리에서 사용된다.

[[...signIn]]

 

동적 경로 중, Option Catch-All 라우트 세그먼트를 생성한 모습

 

./app/(dashboard)/auth/[[...sign-in]]/page.tsx

• 다음과 같이 현재 해당 페이지에서의 파라미터의 값을 가져온 후 확인할 수 있다.

const SignInPage = ({ params }: { params: { 'sign-in': string } }) => {
  console.log(params); // { 'sign-in': 'example' }
  
  return <div>SignInPage</div>;
};

export default SignInPage;

 

동적 라우트 세그먼트 접근하기

• 동적 라우트 파라미터에 접근하려면 배열의 인덱스로 접근한다.
• 예를 들어, @/auth/signIn/1/2/3@ 경로의 경우 @params[1]@을 통해 @1@을 가져온다.

 

./app/(dashboard)/auth/[[...sign-in]]/page.tsx

• @/auth/sign-in/abc/def@ 경로에 진입 하였을 경우, 아래와 같이 출력된다.

const SignInPage = ({ params }: { params: { 'sign-in': string[] } }) => {
  console.log(params); // { 'sign-in': [ 'sign-in', 'abc', 'def' ] }
  console.log(params['sign-in'][0]); // sign-in
  console.log(params['sign-in'][1]); // abc
  console.log(params['sign-in'][2]); // def

  return <div>SignInPage :{params['sign-in'][1]}</div>;
};
export default SignInPage;

 

 

참고 사이트

Getting Started: Project Structure | Next.js