file based routing

code based vs. file based routing

React.js(code based routing)는 react-router와 같은 라이브러리의 도움을 받아 각 route에 해당하는 컴포넌트를 만들고, 그 컴포넌트를 app.js와 같은 파일에 import 하는 방식으로 라우팅을 이용했다. Next.js(file based routing)를 이용한 라우팅은 더 간단하다. Next.js 자체가 pages 폴더 내에 존재하는 컴포넌트 파일을 하나의 route로 인식하기 때문에, 추가로 라이브러리를 설치하거나, route와 관련된 코드(boilerplate code)를 따로 작성할 필요가 없기 때문이다. 

/pages

# pages 폴더 구조
/pages
  - index.js # some-domain.com/
  - about.js # some-domain.com/about
  - /products
    - index.js # some-domain.com/products
    - [id].js # some-domain.com/products/123abc

 

1. index.js | 이 파일이 속해있는 상위 폴더의 부모 경로가 된다. 
   • /pages의 바로 하위에 존재하는 index.js는 메인 페이지가 된다.
   • /pages/products의 하위에 존재하는 index.js는 /products 경로를 나타내는 페이지가 된다. 
2. [file_name] | 하나의 값으로 정해진 경로가 아니라, 동적 경로(dynamic path)가 된다. 
3. 그 외의 파일명은 페이지의 경로 이름이 된다. 
   • /pages 하위에 about.js 파일을 만드는 대신, about 폴더를 만들고 그 안에 index.js 파일을 만드는 방법도 있다. 
   • 이 두가지 방법 모두  some-domain.com/about 페이지를 렌더링 하는데, 프로젝트 내에 여러 개의 페이지가 존재한다면 후자의 방법을 사용하는 것이 더 깔끔할 수 있다. 

example code here 

다루는 내용

1. 기본 route 설정하기 => ex) main-domain.com/, main-domain.com/welcome/
2. next.js가 제공하는 useRouter 훅 이용하기(클래스형 컴포넌트 => withRouter)
3. 동적 route 파일 설정하기 
4. 동적 route 폴더 설정하기
5. catch all route 설정하기 => main-domain/posts/2022/10의 segments를 [2022, 10]와 같은 배열 형식으로 얻어낼 수 있다. 
6. route 이동하기 & <a href="..."> vs. <Link href="...">
7. 동적으로 생성되는 route로 이동하기
8. Link의 href에 객체 전달하기
   • ???  href에 문자열을 전달하면 아무런 문제도 없는데, 객체를 전달하면 Link를 클릭해서 페이지를 이동했을 때, page reload가 발생함
9. replace vs. push
10. not found page 커스텀하기
11. +) Link 컴포넌트 스타일링 하기
    • a 태그를 Link 컴포넌트의 자식 요소로 직접 작성하고, a 태그에 스타일링 코드를 추가해야 한다.