Next.js의/pages에서 페이지 이외의 구성 요소를 설정하는 방법

결론

next.config.jspageExtensions 옵션을 설정하면 됩니다.💪
next.config.js

module.exports = {
  // ページコンポーネントの拡張子を変更する
  // 以下の設定の場合、ページコンポーネントは pages/index.page.tsx などのようになる
  pageExtensions: ['page.tsx', 'page.ts']
}

상기 설정 후 페이지 구성 요소의 확장자를 변경하는 것을 잊지 마십시오.그렇지 않으면404 Not Found.API Routes도 대상!_app.tsx 또는 _document.tsx를 지정할 경우 확장자를 변경해야 합니다.이 두 파일은 수정하지 않아도 틀리지 않을 것이니 주의하세요!

구체적인 해설

기본 설정에서 /pages의 모든 구성 요소는 페이지를 표시하는 구성 요소로 간주됩니다.예를 들면 아래의 느낌.
/pages

.
├── _app.tsx
├── header.tsx <- index.tsx内でしか使ってないコンポーネントのファイル
└── index.tsx <- ページコンポーネント

pages/index.tsx

import { Header } from "./header";

const HomePage = () => (
  <>
    {/* ... */}

    {/* ここで普通のコンポーネントとして使っている */}
    <Header />

    {/* ... */}
  </>
)

export default HomePage;

pages/header.tsx

/**
 * @description HomePageでしか使わないヘッダー
 * @note ページコンポーネントではない！
 **/
export const Header = () => (
  <header>
    {/* ... */}
  </header>
)

위의 소스 코드를 실행하면 header.tsx가 페이지 구성 요소로 간주되고 http://localhost:3000/header에 액세스하면 404Not Fond가 발생하지 않으며 오류가 발생합니다.
이 회피 전략으로 header.tsx에서 이동/pages했지만, 문제header.tsx는 index.tsx에서만 사용되기 때문에 다른 곳으로 이동하면 원본 코드가 분산되어 나중에 읽을 때 폴더를 해야 한다는 것이다.
소스 코드가 적으면 괜찮지만 큰 프로젝트는 파일 찾기가 어렵고 편집 기능을 사용해도 파일을 잃어버리는 경우가 많아 /pages부터 이동하기 때문에 별로 하고 싶지 않다.
따라서 설정next.config.jspageExtensions 옵션은 페이지 구성 요소의 확장명을 변경하여 /pages 안에 페이지 구성 요소 이외의 구성 요소를 배치할 수 있습니다.
다음과 같이 설정합니다next.config.js.
next.config.js

module.exports = {
  // ページコンポーネントの拡張子を変更する
  pageExtensions: ['page.tsx', 'page.ts']
}

위에서 설명한 대로 파일 이름을 다음과 같이 수정합니다.
/pages

.
├── _app.page.tsx  <- _app.tsxから変更
├── header.tsx     <- ページコンポーネントでは無いので、変更なし！
└── index.page.tsx <- index.tsxから変更

이러한 변경 사항을 수행한 후 액세스http://localhost:3000/header에도 404Not Fond가 표시됩니다.
그러므로

페이지 구성 요소 -> .page.tsx

페이지 구성 요소 이외의 구성 요소 ->.tsx

그래서 따로 살 수 있게 되었다.
기쁘고 축하할 만하다👏

고급 사용 방법

저는 여기서 폴더 구조에 대한 지식을 좀 공유하고 싶어요.🧭
먼저 Type Script에서 폴더 이름index.tsx 또는 index.ts을 가져올 수 있습니다.

.
├── example
|   └── index.ts
└── hoge.tsx

example/index.ts

export const message = "Example内のindex.tsファイルです"

hoge.tsx

// フォルダー名のみ指定しているが、example/index.tsの値をインポートできている
import { message } from "./example";

console.log( message ); // 出力結果 : Example内のindex.tsファイルです

위의 동작을 사용하여 다음을 수행합니다.js의 /pages에서도 구성 요소를 폴더로 관리할 수 있습니다.
/pages

.
├── hoge
|   └── index.page.tsx
├── _app.page.tsx
└── index.page.tsx

위 폴더 구조에서 hoge/index.page.tsx는 http://localhost:3000/hoge의 페이지로 처리됩니다.
지금까지의 작업에 응용하여 최종적으로 상기 가져오기 행위와 이번pageExtensions 옵션을 조합하면 더욱 이해하기 쉬운 구성 요소 구조를 만들 수 있다.다음은 샘플의 폴더 구조입니다👇
/pages

.
├── hoge
|   ├── components <- hoge内のみで使われているコンポーネントをまとめるフォルダー
|   |   ├── footer.tsx
|   |   └── header.tsx
|   └── index.page.tsx
|
├── _app.page.tsx
|
└── index.page.tsx

이상의 폴더 구조를 통해 /pages/hoge 안에 많은 구성 요소를 만들더라도 의존 관계를 한눈에 쉽게 이해할 수 있고 관리하기 쉬우며 .module.css 파일과 다른 파일도 폴더에 넣을 수 있기 때문에 구성 요소의 확장성도 높아졌다.
StoryBook와 테스트 파일 등을 넣기 쉬워서 자주 씁니다.👺

참고 자료

이 보도는 아래의 issues를 참고하였다👨‍💻
https://github.com/vercel/next.js/issues/8454

후기

여기까지 읽어주셔서 감사합니다.🙏
기사가 잘못됐다면 리뷰 등을 통해 말해줬으면 좋았을 텐데.
이게 다른 사람의 참고가 되었으면 좋겠어요.
그럼 이따 봐요.👋