Next.js는 동적 라우팅을 지원하기 위해 파일 이름에 ()(대괄호)를 사용하는 React 기반 프레임워크입니다.
이 괄호 안의 값은 파일 이름의 일부로 간주되지 않지만 Next.js에서 동적 경로 매개변수로 해석됩니다.
예를 들어 파일 이름이 (id).js인 경우 id는 Next.js가 URL의 일부를 동적으로 생성하는 데 사용할 수 있는 동적 경로 매개변수가 됩니다.
이를 통해 사이트는 사용자가 입력한 정보를 동적으로 처리할 수 있습니다.
따라서 Next.js에서 대괄호를 사용하여 파일 이름을 표시하면 이 파일은 동적 경로를 지원하고 해당 경로에서 매개변수를 동적으로 구문 분석할 수 있습니다.
이를 통해 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.
브래킷을 사용한 동적 경로 지원
Next.js가 대괄호를 사용하여 동적 경로를 지원하는 방법은 다음과 같습니다.
- () 괄호를 사용하여 파일 이름을 나타냅니다.
예를 들어 /pages/posts/(id).js 파일은 id 매개변수를 사용하여 동적 경로를 처리할 수 있습니다. - 동적 경로에서 사용되는 매개변수는 괄호 안에 제공됩니다.
예를 들어 (id)는 id라는 매개 변수를 나타냅니다. - Next.js는 이 매개변수를 사용하여 동적 경로를 처리하고 이 값을 페이지 구성 요소에 전달합니다.
파일 이름 예
다음은 파일 이름의 예입니다.
- pages/
- posts/
- (id).js위의 예에서 pages/posts/(id).js 파일은 “id”라는 동적 매개변수를 사용하여 동적 URL 경로를 처리할 수 있습니다.
예를 들어 /posts/1 라우트에 접근하면 id 값이 1이 되어 페이지 컴포넌트에 값이 전달됩니다.
정리하다
대괄호 안의 파일 이름 사양은 Next.js에서 동적 라우팅을 지원하는 데 사용됩니다.
이를 통해 사이트는 사용자가 입력한 정보를 동적으로 처리하고 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.
파일 이름에 대괄호를 사용하여 동적 경로를 지정하는 것은 쉽고 동적 URL 경로를 처리할 수 있습니다.
파일 이름 지정 규칙을 따르면 Next.js는 파일을 동적 URL 경로와 연결하고 사용자가 URL 경로에 액세스하면 파일을 실행하고 결과를 표시합니다.
대괄호를 사용한 동적 라우팅은 다양한 유형의 동적 URL을 처리할 수 있습니다.
예를 들어 /pages/users/(username).js 파일은 사용자 이름을 기반으로 동적 URL을 처리할 수 있습니다.
또한 /pages/posts/(연도)/(월)/(일)/(slug).js 파일은 연도, 월, 일 및 주제(슬러그)를 기반으로 하는 동적 URL을 처리할 수 있습니다.
동적 라우팅을 사용하면 사용자가 입력한 정보에 따라 다른 결과를 표시할 수 있습니다.
예를 들어 /pages/posts/(id.js) 파일에서 id 값에 따라 다른 게시물을 표시할 수 있습니다.
이를 통해 사용자에게 개인화된 콘텐츠를 제공할 수 있습니다.
Next.js에서는 useRouter 후크를 사용하여 동적 매개변수에 액세스할 수 있습니다.
useRouter를 사용하면 현재 페이지의 동적 경로 매개변수에 액세스할 수 있습니다.
예를 들어 /pages/posts/(id).js 파일에서 useRouter를 사용하여 id 매개변수에 액세스할 수 있습니다.
이와 같이 Next.js는 괄호 안에 파일 이름을 지정하여 사용자가 입력한 정보를 동적으로 처리할 수 있도록 동적 라우팅을 지원합니다.