[Next.js] catch-all segments, custom not found page

Catch-all segments

지금까지 배운 라우팅을 활용했을 때는 URL이 확장되면 폴더를 너무 많이 만들어야 한다는 단점이 있습니다. 그걸 해결하기 위해서 대괄호 내부에 ...을 추가해 모든 후속 세그먼트를 포괄할 수 있습니다.

 

아래 이미지와 같이 설정하면 /docs/something1/other1... 뒤로 오는 URL을 모두 사용할 수 있습니다. 내부 화면의 변경은 params를 활용해 해결하면 됩니다.

모든 후속 세그먼트 포괄

하지만 위 방식으로 진행할 경우 단점이 하나 있습니다.

 

/docs 본인을 포함하지 못하다는 단점입니다.

 

이를 해결하기 위해서 대괄호를 한 번 더 감싸주면 필수가 아닌 선택이 되기 때문에 기존의 문제도 해결할 수 있습니다.

본인 포함

해당 내용에서 [...slug] 내부에 생성된 page.tsx가 /docs와 /docs/... 그 하위 세그먼트의 화면을 전부 나타내고 있습니다. 여기서 무조건 지켜져야 하는 규칙은 /docs를 포함하려면 대괄호를 두 번 감싸야한다는 점입니다.

여기서 든 생각은 그렇다면 단순하게 하나의 page.tsx에서 여러 화면을 나타내려면 URL에 따라 조건만 나누고 여러 화면 컴포넌트를 만들어서 return만 해주는 게 좋겠다는 생각이 들었습니다. 그리고 여기서 개발자마다 스타일이 참 많이 나누어지겠다는 생각도 들었습니다... 제 생각은 'components 폴더를 모아서 그 내부에 만드는 것이고 내부에는 절대 page.tsx가 있으면 안 되겠다'입니다.

 

Custom Not Foung Page

중요한 내용 중 하나라고 드는 생각이 404 에러가 발생했을 때 현재는 Next에서 제공해 주는 단순한 화면을 사용하고 있습니다. 이 화면을 커스텀해보겠습니다.

 

기본

app 폴더 밑에 non-foung.tsx를 생성할 경우 기본으로 제공되던 404 에러 핸들링 페이지가 전부 변경됩니다. 기존 컴포넌트와 같은 방식으로 원하는 화면을 꾸며 출력되게 하면 됩니다.

 

화면별

기본은 app 폴더 밑에 만들었다면 이건 각 화면 폴더 즉, 원하는 page.tsx와 같은 위치에 not-found.tsx를 생성하면 해당 화면의 에러 화면만 변경할 수 있습니다.

 

큰 개념은 not-fount.tsx 또는 not-found.js를 추가하면 되고 어디에 추가하느냐에 따라 다른 결과를 가져옵니다.

 

추가적으로 에러 화면에서 URL로부터 정보를 가지고 오고 싶다면? usePathname() 훅을 사용하면 됩니다.

 

하지만 해당 훅은 클라이언트 컴포넌트에서만 동작하기 때문에 서버 컴포넌트에서는 에러가 발생합니다. 그렇기에 사용하기 전에 "use client"를 써서 클라이언트 컴포넌트로 변경하고 사용하면 됩니다.

발생하는 에러

 

😯우측의 책 모양을 누르면 관련된 documentation으로 이동할 수 있습니다... 이렇게만 제공해 줘도 에러가 발생했을 때 간단한 에러는 쉽게 해결할 수 있을 듯합니다. 좋은 아이디어라고 생각합니다.

 

+알파

slug: 간편 URL. 일반적으로 URL 끝에 있는 웹 주소의 고유하게 식별되는 부분.

 

참고

https://nextjs.org/docs/app/api-reference/directives/use-client

https://developer.mozilla.org/ko/docs/Glossary/Slug

https://nextjs-ko.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY