[ NextJs v13 vs Remix ] 01_라우팅

주제: 같은 앱을 NextJs v13과 Remix로 각각 구현해보면서 서로의 차이점을 이해하는 프로젝트

깃허브: https://github.com/joseph0926/NextANDRemix-Expenses

GitHub - joseph0926/NextANDRemix-Expenses: 하나의 프로젝트(Expenses Note)를 NextJs v13과 Remix v2로 각각 구현해

 

구조 & 조건

구조

/ -> 레이아웃 A
├── /pricing -> 레이아웃 A
├── /auth -> 레이아웃 B
├── /expenses -> 레이아웃 C
│   ├── /add -> 레이아웃 C
│   └── /analysis -> 레이아웃 D
│   ├── /:id -> 레이아웃 C

- NextJs

 

• NextJs v13 라우팅 개념
  • 기본적으로 라우트를 폴더명으로 구분함
  • 각 라우트 폴더에는 page.tsx와 layout.tsx등이 들어감
    • page.tsx: 해당 라우트에 대한 페이지 컴포넌트
    • layout.tsx: 해당 라우트및 하위 라우트에 대한 레이아웃 컴포넌트
  • (폴더명)을 통해 pathless 라우트를 구축할수있음
  • [] 을 활용한 동적 라우트를 구축할 수 있음
    • [id]: /a/:id 에 대한 동적 페이지 컴포넌트
    • [...id]: /a/:id/x/y/z.... :id ~ 해당 라우트 끝까지의 동적 페이지 컴포넌트
    • [[...id]]: 위의 내용 + /a에 대한 영향력도 주는 컴포넌트
• 현재 프로젝트에 대한 라우팅 구조
  • 앱 전체에 적용되는 레이아웃과는 별개로 레이아웃 A, B, C, D가 존재햐아므로 app 폴더(루트)에 따로 page.tsx나 layout.tsx를 두지 않는 것이 맞다고 판단 (단, 메타 정보에 대한 것은 루트 layout.tsx에 존재)
  • 따라서 (app) 그룹 라우팅을 통해 / 에 대한 영향은 미치지만, (app)이외의 폴더 스코프에는 영향을 미치지 않도록 조정
  • expenses에서 analyisis는 다른 레이아웃을 사용하므로 (expenses)와 analyisis로 구분
• 장단점
  • 장점: 각 라우트마다 유연하게 레이아웃을 적용시킬수있음
  • 단점: 아직 못 찾음

 NextJs v13 공식문서

Building Your Application: Routing | Next.js

 

- Remix

 

• Remix v2 라우팅 개념
  • path의 구분은 " . " 을 이용... /a/b/c에서 c를 표현하려면 -> a.b.c.~.tsx
  • 폴더(파일)명이 " . "없이 하나의 단어로만 구성된다면 이는 그 단어에 해당하는 라우터의 레이아웃이됨... /a에서 a.tsx의 역할은 /a에 해당하는 레이아웃
  • 폴더(파일)명이 a._index라면 이는 /a에 대한 페이지 컴포넌트를 의미... a.b.c._index -> /a/b/c 에 대한 c 페이지 컴포넌트
  • 폴더(파일)명이 a_.b라면 이는 /a/b에 대한 페이지 컴포넌트를 의미 + 상위 레이아웃을 상속받지 않음
  • 폴더(파일)명이 a.$id라면 이는 /a/:id 에 대한 동적 페이지를 의미
  • 만약 라우팅을 폴더 구조로 잡았다면, 각 폴더에는 route.tsx가 존재해야함
• 현재 프로젝트에 대한 라우팅 구조
  • 앱 전체에 적용되는 레이아웃과는 별개로 레이아웃 A, B, C, D가 존재햐아므로 routes 폴더에 _index.tsx로 HomePage를 표현하는 것보단, _app 을 활용하는게 맞다고 판단
  • 따라서 _app, _app._index는 각각 " / " 의 페이지에 대한 레이아웃과 페이지
  • expenses 전체에서 레이아웃 C를 사용하지만, /expenses/analysis에서만 D를 사용하므로 expenses_.analysis로 레이아웃에 적용받지 않도록 조정
• 느낀점
  • remix가 v2로 업데이트하면서 (정식 버전은 1.19) 라우팅 규칙을 변경하였는데, 이게 처음에 굉장히 어색했고 무엇보다 공식문서를 봐도 한번에 이해가 안되서 좀 어려웠습니다
  • 기존의 폴더명, 파일명 라우팅을 벗어나 " . " 라우팅으로 변화를 추구하는거 같습니다
• 장단점
  • 장점: 각 라우트마다 유연하게 레이아웃을 적용시킬수있음
  • 단점: 파일구조가 기존(react-router, next.js, remix v1)과 달라 적응하기 어려웠음, 공식문서의 예제가 부족함

- Remix v2 공식문서 / 이해하는데 도움을 준 자료

v2 routing ambiguity in 'Nested URLs without Layout Nesting' · Issue #5846 · remix-run/remix