npx create-next-app 으로 프로젝트를 세팅을 시작하는데, 터미널 창에서 이런 물음이 나왔다.
Use App Router (recommended)? No / Yes
App Router가 무엇인가에 대해 찾아보니, Next13부터는 기존의 page 디렉토리 기반의 라우팅이 아닌 app디렉토리를 기반으로 하는 라우팅을 지원 한다는 것이다.
새로운 기능이라 다른 라이브러리와 호환이 안되지 않을까 고민을 많이 하였는데, 나온 시기와, 안정화 되었다는 Next,js 블로그 의 글을 보고 한 번 써보자! 하여 위의 물음에 “yes”를 선택 하였다. (하… 여기서 부터 꼬인 것인가)
그 뒤로 기존의 패턴 대로 사용하다가 여러 문제들을 직면했다. 이번 포스트는 그 문제들에 대해 이야기 하겠다.
직면한 문제들
useRouter
- userRouter의 import 경로가 바뀌었다.
next/router가 아닌next/navaigation으로 불러와야 한다.- 습관처럼 에디터에서 자동 완성 해주는 대로 했다가 “Error: NextRouter was not mounted” 라는 에러를 직면하게 되었다.
- app 라우팅 방식일 경우 라우터를 사용하는 컴포넌트 파일 최상단에
'use client';를 넣어 줘야 한다.
Image
-
반응형으로 Image 사용하기
- 이미지를 불러올 때
img태그가 아닌 Next에서 제공하는Image태그를 사용해야 한다. 이 태그의 특이점이 있는데, 속성 값으로 width, height 값을 반드시 넣어줘야 한다. 안 그러면 에러가 발생한다. - 하지만 필자는 이미지를 반응형으로 표현하고 싶었고 이를 css를 이용하여 표현하고자 하였다.
➡️ 그럴 경우, width, hegiht 속성 대신 fill 속성을 추가 하면 된다.
- 특이점이 fill 속성을 줄 경우, 해당 이미지 태그에 자동으로
position :absolute ; width:100%; height100%;가 붙는다. 그렇기 때문에 Image 태그 사용 시, 부모 태그에position: relative속성을 추가 해야 한다.
➕ 위와 같은 경우, 부모 태그의 높이값을 width 값에 따라 퍼센티지로 적용하려면 padding 값으로 잡아줘야 한다.
- 필자는 SCSS로 작업하였고, 이미지 사용하는 부분이 여러 개 였기에 mixin을 만들어 사용하였다.
@use 'sass:math'; @mixin resposive-height($hor, $ver) { // math.round 함수 이용하여 반올림 적용 padding-top: math.round($ver/$hor * 100%); } - 이미지를 불러올 때
-
외부 이미지 불러오기
- 외부에서 이미지를 불러오려면 따로 next.config 파일에 설정을 추가 해줘야 한다.
- images. domains 를 추가 해줘야 한다.
// next.config const nextConfig = { images: { // 도메인들을 array 형태로 나열 domains: ['image.tmdb.org','lh3.googleusercontent.com'] } } module.exports = nextConfig
getServerSideProps
SSR(Server Side Rendering) 적용을 처음 부터 하지 않고 프로젝트 중반에 적용하였는데, 여기서 부터 문제가 시작 되었다.
app 라우팅도 getServerSideProps를 사용할 수 있는 줄 알았는데, 아니었다. 안된다. app 라우팅 시스템에서는 SSR을 fetch 함수를 이용하여 적용한다고 한다.
공식문서 참고
컴포넌트가 rendering 되기 전에 state를 바꿔야하는데( + RTK로 state를 관리하는 상황), fetch 함수를 이용하여 그런 패턴을 구현 할 수 없었다. ( 사용하는 패턴이 있을 것 같은데, 그건 차차 더 알아봐야 될 것 같다. ) 그래서 다시 page 라우팅으로 바꿨다….😢
마무리 & 느낀 점
app 라우팅 방식을 사용한 초반 동안 Next 13의 새로운 기능들을 접해 볼 수 있었다. (dynamic routing 적용하는 방식, param, query 불러오는 방법, layout.js , meta …….) 끝까지 적용하는데 무리가 있었지만 직접 부딪히면서 잘 배운 것 같다. 사전에 좀 더 꼼꼼히 찾아봤어야 했는데, 그 부분이 미숙했던 것 같다.
Next 13 많은 변화가 있는 것 같다. 좀 더 스터디 해서 다음 프로젝트는 app라우팅, fetch 시스템 적용해서 구현해 보고 싶다.
참고 문헌
