Next.js에서의 경로 관리 문제

// 이동해야 하는 경로: '/posts'

// router 예시
const router = useRouter();
router.push('/post'); // 에러가 나지 않음

// Link 예시
<Link href={'/post'} />;

Next.js의 라우팅 구조 이해하기

1. Page Router
pages 폴더 기반으로 동작하며, 동적 경로는 [folderName], [fileName].tsx로 표현합니다.

2. App Router
app 폴더 기반으로 동작하며, 동적 경로는 [folderName]으로 표현합니다.

경로 추출 로직 구현

경로 탐색 로직

export const getPageRoutes = (dir: string, basePath = ''): string[] => {
    const entries = fs.readdirSync(dir, { withFileTypes: true });
    const routes: string[] = [];

    for (const entry of entries) {
        if (entry.isDirectory()) {
            const segment = entry.name.startsWith('[') && entry.name.endsWith(']')
                ? '${string}'
                : entry.name;

            routes.push(...getPageRoutes(path.join(dir, entry.name), `${basePath}/${segment}`));
        } else if (entry.isFile() && entry.name.endsWith('.tsx')) {
            const fileName = entry.name.replace('.tsx', '');
            routes.push(basePath + (fileName === 'index' ? '/' : `/${fileName}`));
        }
    }

    return routes;
};

타입 정의 생성

type StaticPaths = '/about' | '/contact';
type DynamicPaths = `/user/${string}` | `/product/${number}`;

export const generateTypeDefinition = (routes: string[]): string => {
    const staticRoutes = routes.filter((route) => !route.includes('${'));
    const dynamicRoutes = routes.filter((route) => route.includes('${'));

    return `// This file is auto-generated.
type StaticPaths =
  ${staticRoutes.map((route) => `| '${route}'`).join('\\n  ')};

type DynamicPaths =
  ${dynamicRoutes.map((route) => `| \\`${route}\\``).join('\\n  ')};
`;
};

최종 스크립트

export const generateRoutes = (
    pagesDir: string,
    outputFile: string
): void => {
    const routes = getPageRoutes(pagesDir);
    const typeDefinition = generateTypeDefinition(routes);

    fs.writeFileSync(outputFile, typeDefinition);
    console.log(`RoutePath types generated at ${outputFile}`);
};

type StaticPaths =
  | '/home'
  | '/about';

type DynamicPaths =
  | `/user/${string}`
  | `/product/${number}`;

type RoutePath = StaticPaths | DynamicPaths;

개선된 DX

• string타입의 경로로 인한 유저 에러를 제거할 수 있다.

• 타입 자동완성을 통해 빠르게 경로를 찾을 수 있다.

1. 런타임 에러 제거

const router = useRouter();
router.push('/homes'); // 컴파일 단계에서 에러 발생!

2. 타입 자동완성

한계와 개선 방향

스크립트 자동 실행

"scripts": {
  "generate:routes": "node scripts/generate-route-paths.js"
}

"generate:routes": "generate-router ./pages ./src/routes.d.ts"

Query String 처리

type RoutePath = StaticPaths | DynamicPaths | `${StaticPaths}?${string}`;

마무리

1. 런타임 에러를 컴파일 단계에서 제거

2. 타입 자동완성을 통한 생산성 향상

// 설치 
npm install generate-router

// CLI 간단한 사용
npx generate-router ./pages ./types/routes.d.ts

// SCRIPT로 사용
"scripts": {
  "generate:routes": "generate-router ./pages ./src/routes.d.ts"
}