Next.js 14버전으로 마이그레이션 가즈아~

원래 티스토리 블로그를 써왔으나, UI가 velog가 더 맘에 들기도 하고 velog가 업데이트되었다고 해서 앞으로는 velog에 글을 올릴 계획입니다.

(첫 글의 첫 문장이라 경어체를 사용해보았으나, 어색하니 원래 하던대로 평어체를 쓰겠다.)

Next.js 14버전에서 바뀐 것

1. Turbopack을 사용해서 local server 시작속도를 53.3 % 증가시키고, 바뀐 코드가 적용되어 화면에 보이는 fast refresh 속도를 94.7% 증가시킴

실제로 Next.js 13.5.6 버전이었던 내 포트폴리오 사이트를 Next.js 14버전으로 마이그레이션했는데, 확실히 yarn dev 명령어로 실행했을 때 더 빨리 뜨고 fast refresh도 바로바로 되어서 되게 좋았다. 굿굿!

yarn dev --turbo로도 실행해봤는데 딱히 차이를 못 느꼈다.

2. Server Actions가 안정화됨

공식문서에는 formdata를 submit하는 예시가 나와있었는데,
revalidatePath(), revalidateTag(), redirect(), cookies() 이러한 서버 컴포넌트에서 사용할 수 있는 것들이 13버전보다 안정화되었다고 한다.

3. Partial Prerendering

동적인 콘텐츠를 포함한 정적인 페이지를 렌더링할 때, 사용할 수 있는 것으로

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

위는 Next.js 공식문서에 있는 예시인데, ShoppingCart라는 동적인 컴포넌트가 보이기 전에 fallback에 있는 CartSkeleton을 prerendering해서 보여주는 것이다.

그 외에도 Metadata에 개선이 있었다와 Next.js를 공부할 수 있는 튜토리얼 관련된 것이 있었는데 이부분은 크게 중요하지 않은 듯하다.
다만, Next.js 튜토리얼은 이거보고 공부하면 좋겠다는 생각이 들었다.

이외에 내가 14버전을 사용하면서 바뀐 점을 한 가지 발견했다.

원래 @next/font 모듈 설치해서 @next/font에서 폰트를 가져와서 사용했다.
14버전에서는 package.json에 있는 @next/font 모듈을 지우고 공식문서에 있는 명령어를 터미널에 입력한 후에 @next/font를 next/font로 바꿔주면 된다.

아래는 내가 작성한 코드이다.

import { Karla } from 'next/font/google'

export const karla = Karla({
    subsets: ['latin'],
    weight: ['800'],
    fallback: ['system-ui', 'arial'],
})

느낀점

아직 canary 버전이나 속도면에서 향상된 것을 느낄 수 있었고, 확실히 서버 컴포넌트를 잘 활용할 줄 알아야겠구나 생각했다.

server 컴포넌트는 트리구조에서 client 컴포넌트보다 더 위에 있어서 클라이언트 컴포넌트에서 서버 컴포넌트를 import하면 => 클라이언트 컴포넌트가 부모가 되면 에러가 나는 부분이 조금 까다롭다.