nextjs에서 파일에 []를 사용하는 이유

Next.js는 React 기반의 프레임워크로, 동적 라우팅을 지원하기 위해 파일 이름에 [] (괄호)를 사용합니다. 이 괄호 안에 있는 값은 파일 이름의 일부로 간주되지 않고, 대신 Next.js는 이 값을 동적 경로 매개 변수로 해석합니다.

예를 들어, 파일 이름이 [id].js인 경우, id는 동적 경로 매개 변수가 되며, Next.js는 이 매개 변수를 사용하여 URL의 일부를 동적으로 생성할 수 있습니다. 이를 통해 사용자가 입력한 정보를 페이지에서 동적으로 처리할 수 있습니다.

따라서, Next.js에서 괄호를 사용하여 파일 이름을 지정하면, 이 파일은 동적 경로를 지원하고 해당 경로에서 동적으로 매개 변수를 파싱할 수 있습니다. 이를 통해 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

 

괄호를 사용한 동적 경로 지원 방식

Next.js에서 괄호를 사용하여 동적 경로를 지원하는 방식은 다음과 같습니다.

1. [] 괄호를 사용하여 파일 이름을 지정합니다. 예를 들어, /pages/posts/[id].js 파일은 id 매개 변수를 사용하여 동적인 경로를 처리할 수 있습니다.
2. 동적인 경로에서 사용할 매개 변수를 괄호 안에 지정합니다. 예를 들어, [id]는 id라는 매개 변수를 나타냅니다.
3. 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/[year]/[month]/[day]/[slug].js 파일은 년, 월, 일, 제목(slug)에 따라 동적인 URL을 처리할 수 있습니다.

 

동적 라우팅을 사용하면, 사용자가 입력한 정보에 따라 다른 결과를 보여줄 수 있습니다. 예를 들어, /pages/posts/[id].js 파일에서는 id 값에 따라 다른 게시물을 표시할 수 있습니다. 이를 통해 사용자에게 맞춤형 콘텐츠를 제공할 수 있습니다.

 

Next.js에서는 useRouter 훅을 사용하여 동적 매개 변수에 액세스할 수 있습니다. useRouter를 사용하면, 현재 페이지의 동적 경로 매개 변수에 액세스할 수 있습니다. 예를 들어, /pages/posts/[id].js 파일에서 useRouter를 사용하여 id 매개 변수에 액세스할 수 있습니다.

 

이와 같이 Next.js는 괄호를 사용하여 파일 이름을 지정함으로써 동적 라우팅을 지원하며, 사용자가 입력한 정보를 동적으로 처리할 수 있게 합니다.