Next.js의 File Base Routing

Next.js v12

File Base Routing

기본적으로 npx create-next-app를 실행하면 pages라는 폴더가 있습니다.
이 폴더안에 about.tsx라는 새로운 파일을 생성하고 ‘About’이라는 리액트 컴포넌트를 만듭니다.
이제 다시 npm run dev를 통해 실행시키고 localhost:3000/about으로 들어가면 페이지로 표기되는 것을 확인할 수 있습니다.

File Base Routing이라는 것은 pages 폴더 아래 파일만 만들어 주면 리액트 컴포넌트가 페이지처럼 라우팅 되는것을 말합니다.
Next.js는 File Base Routing을 지원하므로 간편하게 라우팅 처리를 가능하게 합니다.

중첩경로

만약 localhost:3000/products/pants와 같이 경로를 만들고싶다면 pages폴더 아래에 products폴더를 추가하면 됩니다.

Next.js v13

13버전에는 pages폴더가 사라지고 app이라는 새로운 폴더가 추가되었습니다.
app폴더 아래이 about폴더를 추가하고 아래에 page.tsx파일을 추가하여 리액트 컴포넌트를 생성합니다
Next를 다시 실행시키면 페이지 라우팅이 되는 것을 확인할 수 있습니다.