[Next.js] 12 to 13 마이그레이션 해보기

준이·2023년 9월 14일

개요

회사의 웹 next.js 버전이 12로 되어있어서 프로젝트가 더 커지기 전에 버전을 업데이트 해주었다. 특별하게 업데이트 해줄 만한 이유는 없지만, 오히려 프로젝트가 더 커지면 마이그레이션이 어려울 수도 있고, <Link> 태그 안에 <a> 태그가 들어가있는 게 몹시 거슬렸기 때문이기도 하고.. 마이그레이션 해줘서 나쁠 것도 없었기에 작업을 진행했다.

직접 작업해준 것

먼저 마이그레이션 관련 작업과 사항에 대해서는 공식 홈페이지에 친절하게 설명되어 있다.
next.js upgrade 12 to 13 공식홈페이지

일단 내가 작업한 것 위주로 작성하겠다. 프로젝트가 많이 큰 편이 아니라, 해줄 작업이 많이 없었다.

Link tag

<Link> 태그 안에 <a> 태그가 들어가있는 부분을 다 지워줬다. 필자 입장에서도 굳이 비슷한 동작을 하는 태그 안의 태그가 불필요해 보여 눈엣가시였는데 좋은 업데이트로 보였다.

import Link from 'next/link'
 
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>

Image tag alt 속성 추가, 스타일 태그 변경

image 태그 쪽에서는 클라이언트 측 JavaScript 감소, 이미지 확장 및 스타일 지정이 더 쉬워진 방법, 접근성 향상, 기본 브라우저 지연 로딩 등이 바뀌었다고 한다.

내가 해준 작업은 alt 속성이 필숫값이 되면서 alt 속성을 추가해주었다. 그리고, img 태그의 작동방식이 달라져서 width와 height이 부모의 속성을 받아서 사용될 때 스타일을 기존엔 좀 복잡하게 important까지 추가해서 span에 어쩌구.. 지정해서 바꾸어줬는데 지금은 img { / 변경될 스타일 /} 로 바꾸어주면 되었다(훨씬 편해짐)

그 외 v 13 변경사항

이제 내가 직접 변경하진 않았지만, next 13이 되면서 변경된 사항들이다.

app directory

기존 페이지 routing은 pages/ 아래에 작성된 페이지를 기준으로 routing 되었다. 13 버전이 되면서 app/ 아래에 페이지가 라우팅 될 수 있도록 바뀌었다.

물론 그 이전 문법인 pages/ 와 app/ 둘다 사용이 가능하다.

레이아웃과 같은 편리한 기능을 제공한다.

Font

모든 구글 폰트를 자동으로 자체 호스팅하여(내장되어) 폰트요청이 별도로 필요없다.

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}