파일시스템 기반 라우팅
NextJS는 파일과 디렉토리로 라우팅을 정의한다.
app/ 디렉토리 안에 있는 디렉토리들만 관련 있다.
리액트의 page.tsx는 서버 컴포넌트로, 서버사이드에서 실행되며, page.tsx에 있는 jsx코드가 브라우저로 전달되어 렌더링되는 것이다.
app/디렉토리 안에 라우팅하고 싶은 이름으로 디렉토리를 만들면, 해당 디렉토리 이름이 라우팅 경로가 되고, 디렉토리 안에 있는 tsx파일을 렌더링한다.
Link
만일 페이지간 이동 시 SPA처럼 작동하게 하고 싶다면(링크를 통해 새롭게 페이지를 렌더링하기 싫다면)
a태그 대신 Link 태그를 사용하면 된다.
layout
넥스트 프로젝트에는 최소한 하나의 루트 layout파일이 있어야 한다. tsx든 js든 app/ 디렉토리 안에 있는 페이지들이 해당 layout위에 그려진다.
만약 app/ 디렉토리 안에 있는 또 다른 디렉토리에 layout파일을 만들면 해당 라우팅 경로의 페이지에만 layout이 적용된다.
layout에서는 <head /> 컨텐츠도 정의할 수 있다.
다음 layout 파일에서 metadata 상수를 정의하여 seo에 필요한 description이나 title을 정의할 수 있다. 그 외 head에 들어갈 내용들은 nextjs에서 자동으로 채워준다.
물론 여기서 정의한 title과 description은 해당 layout이 적용된 페이지에만 영향을 미친다.
위 예시처럼 정적으로 metadata를 정의하면 가장 하위 layout의 metadata로 덮어 씌워진다.
page
하나의 라우팅 경로에는 최소 하나의 page 파일이 있어야 한다.
파일 이름을 page로 설정하면 next가 자동으로 해당 페이지를 렌더링한다.
그 외에 컴포넌트들은 프로젝트 어떤 곳에서든 가져올 수 있다.
그러나 컴포넌트를 라우팅 디렉토리에 넣어놓는다고 해서 자동으로 해당 컴포넌트를 렌더링 하진 않는다.
특정 기능이 있는 파일 이름
page나 layout처럼 특정 파일을 만들면 해당 파일은 이름에 맞는 기능을 갖게 된다.
- page: 신규페이지 생성
- layout: 페이지를 감싸는 신규 레이아웃 생성
- route: api경로 생성(jsx코드가 아닌 데이터 반환)
그외 파일 이름은 공식문서에서 확인할 수 있다.
