폴더가 곧 라우트입니다

대부분의 프레임워크는 라우트 목록을 어딘가에 직접 작성하도록 요구합니다. 즉, 각 경로가 특정 컴포넌트와 쌍을 이루는 방식입니다. 반면 Next.js는 파일 트리에서 이러한 라우트를 자동으로 읽어옵니다.

전체 규칙은 한 줄로 요약됩니다: app/ 내부의 폴더는 URL의 일부가 되며, 그 안의 page.jsx는 방문자가 보게 되는 화면입니다.

app/
    page.jsx                 ->  /
    about/
        page.jsx             ->  /about
    menu/
        page.jsx             ->  /menu
        drinks/
            page.jsx         ->  /menu/drinks

트리를 따라 내려가며 URL을 읽어보세요. /menu/drinks는 menu 폴더, 그 다음 drinks 폴더, 그 안에 있는 page를 의미합니다. 폴더를 중첩하면 URL도 중첩됩니다. 별도의 추가 단계는 없습니다.

규칙의 나머지 반쪽도 그만큼 중요합니다. 폴더는 page.jsx를 포함해야만 비로소 경로가 됩니다.

app/
    menu/
        drinks/
            page.jsx         ->  /menu/drinks  works
        MenuCard.jsx                           not a route
                             ->  /menu         404

여기 app/menu/가 존재하지만, 아무도 /menu에 방문할 수 없습니다. 그 안에 page 파일이 없기 때문입니다. 이는 /menu/drinks로 가는 과정의 컨테이너일 뿐입니다. 이는 실수로 URL을 게시하지 않고도 app/ 내에서 관련 파일을 그룹화할 수 있게 해주는 기능입니다.

그리고 폴더 이름이 글자 그대로 URL 세그먼트가 됩니다. About Us라는 폴더는 /About%20Us라는 URL을 생성하므로, 라우트 폴더는 소문자와 하이픈을 사용합니다: app/about-us/.