[Next] 한 페이지에서만 사용되는 컴포넌트는 어디에 두지?

사이드 프로젝트를 할 때는 자주 사용되는 컴포넌트는 만들어서 components에 만들어두었다. 하지만 작은 컴포넌트를 모두 여기 몽땅 담아두게 되면 "이게 대체 뭐여? 어떻게 생긴 거여? 아니~ 어디 있는 거여~"라고 생각할 수 있다. 오랫동안 찾아야 하는 수고를 덜기 위해 새로운 방안을 찾아내었다.

바로 pages 폴더를 사용하는 것! 🫢

• 자주 사용되는 것은 components 폴더 안에 두고
• 하나의 페이지에서만 사용된다면, pages 안에 두는 것이다.

이때 컴포넌트로 만든 것이 전부 page로 열리기 때문에 이름을 수정해야 한다.

1. 컴포넌트인 것은 그대로 두고, page는 index.page.tsx처럼 끝에 page.tsx를 붙이는 것이다.
2. next.config.js에서 아래의 코드를 추가하여 "얘가 페이지란 말이여~"하고 알려줘야 한다.

pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],

참고해봐유