파일 시스템 기반 라우팅
라우팅
어떤 주소에 어떤 페이지를 보여줄지 정하는 것
파일시스템 기반 라우팅
파일의 결로가 주소에 매칭되는 라우팅 방식
페이지 나누기
프로젝트를 처음 생성하면 pages라는 폴더가 있는데
이것은 Next.js에서 정해놓은 것이기 때문에 반드시 pages여야한다
이 안에 자바스크립트 페이지를 만들면 그것이 곧 페이지이다.
1. index.js를 먼저 보면
이것은 홈페이지에 해당한다.
최상위 경로에 매칭된다. (처음 화면)파일의 default export가 곧 페이지가 된다.
2. pages 폴더 안에 search.js라는 파일과 setting.js라는 파일을 만든다.
default export로 컴포넌트를 만든다.
3. 확인하기
주소창에 /search /setting을 치면 잘 나오는 것을 확인할 수 있다.
4. 폴더 만들기
pages폴더 안에 products라는 폴더를 만든다.
여기에 1.js라는 파일을 만든다.
/products/1 > 접속하면 볼 수 있다.
5. 여러 주소를 하나의 페이지 컴포넌트에서 처리하기
[id].js
대괄호를 사용하면 안에 있는 값을 변수처럼 사용가능하다.
이것을 Param이라고 부른다.
주소가 1, 2, 3,으로 계속 바꾸어도 같은 페이지가 보인다.숫자로 표시된 것이 id Param에 해당하는 값
이 Param값도 받아와서 사용할 수 있다.
6. 폴더에서 사용가능하다.
products폴더 안에 [id]라는 폴더를 만들고
index.js로 이름을 바꾸어도 똑같이 동작한다.
