NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법.

페이지 라우터는 page 디렉터리 구조에 따라 자동으로 라우트가 생성됩니다.
프로젝트의 모든 라우트를 알아야 하는 필요성이 생겨 구현하였습니다.

코드

type Page = string;

export const getStaticProps: GetStaticProps<{ pages: Page[] }> = async () => {
  const pagesDir = path.join(process.cwd(), 'pages');
  const pages = getAllPages(pagesDir);

  return {
    props: {
      pages,
    },
  };
};

function getAllPages(dir: string, basePath: string = ''): Page[] {
  const files = fs.readdirSync(dir);
  const pages: Page[] = [];

  files.forEach((file) => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory()) {
      pages.push(...getAllPages(fullPath, `${basePath}/${file}`));
    } else {
      if (file.endsWith('.js') || file.endsWith('.tsx')) {
        let route = `${basePath}/${file.replace(/\.(js|tsx)$/, '')}`;
        if (route === '/index') route = '/';
        pages.push(route);
      }
    }
  });

  return pages;
}

.js, .tsx 확장자로 끝나는 파일만 찾아서 파일명을 뽑아내면 프로젝트에 존재하는 모든 라우트를 확인할 수 있습니다.
저는 getStaticProps를 이용하여 해결하였는데 getAllPages 함수만을 이용하셔도 가능합니다.