Vercel 의 Next.js Conf 에서 소개 된 Next.js 12 의 새로운 변경 점에 대해서 정리 해보면:

• Rust Compiler: 이번에 새로이 Vercel 에 합류한 SWC 의 Creator 이자 메인 개발자인 강동윤님이 Vercel 에 합류해서 SWC 를 본격적으로 적용. JavaScript, TypeScript 뿐 아니라 CSS (styled-jsx), Minification 등에도 적용되어 빌드 및 Refresh 에서 비약적인 속도 향상을 기대할 수 있음, babel 사용시보다 17배, Terser 사용시 보다 7배 빠르다고 블로그에 공개, 이어지는 간증들

  https://twitter.com/jackhanford/status/1453040895591284743

  https://twitter.com/MrAhmadAwais/status/1453053471045918735

• Middleware (Beta): 단순히 설정을 하는 것을 넘어서 다양한 응답을 할 수 있도록 Middleware 기능을 제공. Next.js 의 응답을pages/_middleware.js 파일 추가하고 아래 예제를 통해서 다양하게 조작 할 수 있다. A/B 테스트도 가능하다.

  export function middleware(req, ev) {
    return new Response('Hello, world!')
  }
  

• React 18 Support: React 18 의 기능을 온전히 사용할 수 있음, next.config.js 에서 experimental 기능을 셋팅해야 한다.

  module.exports = {
    experimental: {
      concurrentFeatures: true, // Server-Side streaming
  		serverComponents: true // React Server components
    }
  }
  

  특히 Vercel 의 Edge computing 과 Next.js + React 18 의 Server Side Components 는 매우 높은 속도의 응답 속도를 보여준다. Vercel 의 Shu Ding 의 SSC 와 Next.js 의 설명을 참고하자 👉 Demo

• Native ES Module Support and URL Imports: Next.js 11.1 에서 실험적으로 지원한 ES Module 이 12 버전에서는 CommonJS Module 보다 우선적으로 적용. 뿐만 아니라 URL 을 바로 사용하여 Importing 이 가능.

  // import 를 허용할 URL 의 prefix 를 등록
  module.exports = {
    experimental: {
      urlImports: ['<https://cdn.skypack.dev>']
    }
  }
  
  // importing via URL
  import confetti from '<https://cdn.skypack.dev/canvas-confetti>'
  

• Smaller images using AVIF: Google 과 같이 작업했던 <Image> 컴포넌트가 AVIF 이미지 포맷을 지원, WebP 보다 20% 작은 사이즈를 브라우저의 지원 여부에 따라 전달 가능하다

• 그 외로

  • Bot-Aware ISR Fallback: 봇 동작을 인식하여 Next.js 의 ISR 을 동작 (fallback: true 옵션 사용)
  • next lint 지원
  • tsconfig.json 경로를 지정 가능