Next.js 13.2 업데이트 살펴보기 (3/3)

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

지난 글에 이어서 최근에 업데이트 된 Next.js 13.2의 업데이트 내용을 살펴보도록 하겠습니다.

---

이번 글에서 소개할 업데이트 첫 번째 내용은 Statically Typed Links (Beta) 입니다.

이 기능은 아직 정식 출시가 아닌 Beta로 소개되었는데요,

Next.js에서 링크를 걸기 위해서 사용하는 next/link 컴포넌트에 정적 타이핑을 해주는 기능이라고 보시면 됩니다.

쉽게 말하면 Link 컴포넌트를 사용할 때 오타가 들어가는 경우가 있는데, 이러한 것을 미리 찾아내주는 기능입니다.

 

아래와 같이 링크 주소에 오타가 있을 경우 이를 찾아내 주는 것이죠.

import Link from 'next/link'

// ✅
<Link href="/about" />
// ✅
<Link href="/blog/nextjs" />
// ✅
<Link href={`/blog/${slug}`} />

// ❌ TypeScript errors if href is not a valid route
<Link href="/aboot" />

 

TypeScript 환경에서 지원되며, 많은 링크가 들어가는 웹사이트를 개발할 때 굉장히 유용할 것 같습니다.

왜냐하면 규모가 큰 웹사이트의 경우 route path가 굉장히 많고,

또 개발하는 과정에서 pathname이 변경되는 일이 잦기 때문에 링크가 깨지는 경우가 많기 때문입니다.

이 기능을 잘 활용하면 이러한 에러를 미연에 방지할 수 있을 것 같습니다.

 

Statically Typed Links 기능을 사용해보기 위해서는 아래와 같이 next.config.js 파일에 설정을 추가해주면 됩니다.

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    typedRoutes: true,
  },
};

module.exports = nextConfig;

---

다음으로 소개할 업데이트 내용은 Turbopack Improvements (Alpha) 입니다.

이 기능은 Beta도 아닌 아직 Alpha 버전으로 출시된 기능인데, Turbopack과 관련해서 기능과 성능이 향상되었다고 합니다.

 

Turbopack은 Webpack과 같은 package bundler이고, 아직은 정식버전이 출시되지 않은 상태입니다.

그래서 아직 production 단계에서 사용하기엔 이르지만,

앞으로 계속해서 업데이트 되면 대표적인 package bundler로 자리잡지 않을까 생각됩니다.

 

이번 업데이트를 통해서 Webpack loader들을 일부 지원하게 되었다고 하니 관심있는 분들은 한 번 사용해보시면 좋을 것 같습니다.

---

마지막으로 소개할 업데이트 내용은 Next.js Cache (Beta) 입니다.

이 업데이트는 아직은 생소할 수도 있는 ISR과 관련된 업데이트입니다.

 

ISR은 Incremental Static Regeneration의 약자로,

애플리케이션을 빌드한 이후에 전체 재빌드를 하지 않고도 static page들을 페이지 단위로 다시 생성해주는 기능입니다.

이 ISR과 관련해서 캐시를 활용하는 기능이 이번 업데이트에서 추가되었고,

이를 통해서 더 빠른 ISR이 가능해졌다고 합니다.

---

지금까지 최근 업데이트 된 Next.js 13.2 버전의 업데이트 내용에 대해서 살펴보았습니다.

글에서 소개한 것 이외에도 다른 여러가지 부분에서 기능의 향상 및 업데이트가 이뤄졌다고 하니,

더 자세한 내용이 궁금한 분들은 아래 Next.js 공식 블로그 글을 참고하시기 바랍니다.

 

https://nextjs.org/blog/next-13-2

Next.js 13.2

 

이번에 나온 새로운 기능들을 잘 활용해서 더 멋진 웹애플리케이션을 개발해 보시기 바랍니다!

감사합니다.