Next.js page.tsx 사용하기

개요

Next.js의 pageExtensions 기능을 통해서 index.page.tsx와 같은 형식으로 페이지를 표현할 수 있습니다!

pageExtensions는 next.config.json 옵션 중 하나로 특정 형식의 이름을 페이지로 인식하는 기능입니다.
이렇게 사용하는 이유는 페이지 디렉터리 안에서 페이지 파일을 구분하기 위해서 입니다!

스타일을 별도의 ts나 tsx로 관리하게 된다면, 해당 파일을 페이지로 인식하게 됩니다.
추가적으로 테스트 파일이나 별도의 컴포넌트 파일을 가지게 된다면 해당 파일도 페이지로 인식하게 됩니다. 😢

저의 경우에는 styles.ts 파일로 스타일을 관리하는데요.
아직 테스트 코드는 작성하고 있지 않지만, 테스트 코드도 추가하게 된다면, 더더욱 페이지 파일을 구분해야 할 것 같습니다.

공식 문서

pageExtensions

Next.js에서 사용 중인 기본 페이지 확장자(.tsx, ts, jsx, js)을 확장할 수 있습니다.
next.config.js 파일 안에 pageExtensions 설정을 추가합니다.

module.exports = {
  pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
};

위의 값을 변경하게 되면 Next.js의 아래를 포함한 모든 페이지에 영향이 가게 됩니다.

• middleware.js
• pages/_document.js
• pages/_app.js
• pages/api/

예를 들어, .ts 페이지 확장자를 .page.ts로 재설정하게 된다면, _app.page.ts와 같이 페이지들의 이름을 수정해야 합니다.

Including non-page file in the pages directory

테스트 파일이나 컴포넌트로 사용되는 다른 파일들을 pages 디렉터리에 같이 배치할 수 있습니다.
이러한 경우에는 next.config.js 파일 안에 pageExtensions 설정을 추가합니다.

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
};

그리고, 페이지의 이름을 .page가 포함된 파일명으로 바꿔줍니다. (예를 들어 MyPage.tsx를 MyPage.page.tsx로 이름을 바꿔줍니다.) 위에 언급된 파일들을 포함해서 모든 Next.js 페이지의 이름을 변경해야 합니다.

마무리

공식문서를 확인하기 전에는 Next.js가 페이지를 구분하기 위한 기능이라고 생각하기 보다는 개발자의 가시성을 위한 기능이라고 생각했습니다. ㅎㅎ

스타일 코드 및 테스트 코드를 작성하다 보면 pages 디렉터리 안에 페이지 파일만 존재하는 것은 쉽지 않으니.. 앞으로 해당 확장자를 잘 활용해서 Next.js가 페이지 파일을 잘 구분할 수 있도록 해야 할 것 같습니다.

출처

• https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions