Next.js 13, Page Extensions

2022년 11월 17일

#Nextjs#Page extensions

서론

작업을 하다보면 임시적으로 접근을 제한하여야 하는 파일들이 있을 수 있다.

폴더 최상위에 존재하는 next.config.js의 pageExtensions을 통해 page디렉토리 내 파일들을 대상으로 확장자명에 따라서 파일의 접근을 막을 수 있다.

pageExtensions의 규칙을 따르지 않은 파일에 대해서는 접근시 404 (Not Found)에러를 반환한다.

  • default pageExtensions
// next.config.js
module.exports = {
  pageExtensions: ["jsx", "js", "tsx", "ts"],
};

사용법

e.g. _page._ prefix를 붙일 시

module.exports = {
  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
};
  • 위와 같이 확장자명을 설정한다면 pages 디렉토리 내에 포함하고자 하는 파일의 확장자명에 전부 page.을 붙여야한다.
  • _document, _app 그리고 pages/api내에 있는 파일에도 동일하게 적용시켜 주어야한다.

현재 디렉토리 구조

└─ pages
    ├─ _app.page.tsx
    ├─ _document.page.tsx
    ├─ home
    │  └─ main.page.tsx
    │  └─ exclude.tsx  // 제외
    └─ main.page.tsx

빌드시

Page
  ┌ ● /
  ├   /_app
  ├ ○ /404
  └ ● /home/main
  • exclude.page.tsx 로 확장자명 변경후 재빌드시
Page
  ┌ ● /
  ├   /_app
  ├ ○ /404
  ├ ● /home/exclude
  └ ● /home/main

참고

피드백은 언제나 환영입니다.