4분
Nextjs 12.3
들어가면서
info
Next.js 사이트에서 공개된 Next.js 12.3 내용을 옮긴 내용입니다.
Next.js 에서 새로운 기능과 함께 12.3 버전이 릴리즈 되었습니다.
12.2 버전에 experimental로 공개된 next/future/image가 stable 된 것을 포함해서 몇 가지 기능이 추가되었습니다.
또한, 새롭게 공개된 내용 중에 Layouts RFC에 대해 추가된 내용이 있습니다.
- 향상된 Fast Refresh:
.env,jsconfig.json,tsconfig.json파일이 이제 hot reload가 제공됩니다. - Typescript 자동 설치:
TypeScript파일이 추가되면 자동으로 TypeScript와 디펜던시가 추가됩니다. - Image Component:
next/future/image가 이제 stable 입니다. - SWC Minifier: Next.js 컴파일러인 SWC에서 제공되는 Minification이 이제 stable 입니다.
- Layouts RFC 업데이트: Layouts RFC를 기반으로 구현이 시작되었고 새로운 기능들이 추가되었습니다.
1. 향상된 Fast Refresh
로컬 개발환경에서 편의성을 제공하기 위한 기능이 추가되었네요.
Next.js는 React Component에 대한 변경사항에 대한 즉각적인 피드백을 위해 Fast Refresh를 사용하고 있습니다. 파일 저장을 해도 페이지를 다시 로드할 필요 없이 브라우저에 변경사항을 즉각적으로 확인할 수 있습니다.
그러나 .env, jsconfig.json, tsconfig.json 파일이 변경될 경우에는 반영되지 않았고 Next.js를 재실행해야 했습니다.
이제는 이 파일들이 변경될 때 hot reload가 적용되어 서버를 재실행할 필요가 없어졌습니다.
2. Typescript 자동 설치
JavaScript로 된 Next.js 프로젝트를 TypeScript로 마이그레이션할 때 편의성이 추가되었습니다.
기존 프로젝트에 TypeScript를 추가하기 위해서는 수동으로 필요한 디펜던시를 설치했어야 했습니다.
이번 12.3 버전부터는 Next.js가 TypeScript 파일이 프로젝트에 추가되면 자동으로 감지하고 필요한 디펜던시를 자동으로 설치하고 tsconfig.json도 추가합니다.
3. Image Component
Next.js는 이미지 최적화를 위해 next/image를 제공하고 있습니다.
그러나 커뮤니티에서 다양한 피드백이 있었고 저 또한 스타일 처리에 대해 불편함을 가지고 있었습니다.
그리고 Next.js 12.2 버전에서 이미치 최적화를 위한 새로운 Image Component(next/future/image)가 experimental로 공개되었습니다.
note
새로운 기능을 릴리즈할 때 beta 버전에서 사용하기 위해 주로 /next 경로를 사용하는데,
Next.js에서는 이름이 겹치기 때문에 /future 라는 경로를 사용한게 재밌네요.
새로운 next/future/image 컴포넌트는 client-side JavaScript가 더 적고, 브라우저 lazy-loading을 사용하여 이미지 스타일을 지정하고 성능을 향상시켰습니다.
그래서 더 나은 사용자 경험과 개발자 경험을 제공합니다.
12.2 버전에서 experimental 플래그를 사용해야 했지만 12.3 버전부터는 기본적으로 사용할 수 있습니다.
import Image from "next/future/image"4. SWC Minifier
Next.js 컴파일러인 SWC에서 experimental로 제공된 Minifier가 이제 stable로 사용가능합니다. Terser를 사용한 버전보다 7배 더 빠른 것으로 나타났습니다.
next.config.js에 swcMinifiy 옵션을 추가하면 사용할 수 있습니다.
// next.config.js
module.exports = {
swcMinify: true,
}5. Layouts RFC 업데이트
https://nextjs.org/blog/next-12-3#new-router-and-layouts-update
최근 Next.js 소식 중 가장 기대가 되는 Layout RFC에 대한 New router와 Layouts에 새소식이 있었습니다.
현재 구현 작업이 시작되었으며 다음 주요 버전 beta 버전 공개를 위해 노력하고 있다는 소식입니다.
이번 변경에는 RSC(React Server Components) 위에 새로운 라우터가 만들어지는 것을 포함하고 있습니다.
- Route Groups: URL 경로에 영향을 주지 않고 라우트를 만드는데 사용됩니다.
- Instant Loading States: loading UI를 쉽게 추가하기 위한 새로운 파일 컨벤션 입니다. Suspense로 만들어집니다.
- Error Handling: nested Error Boundary와 Error UI를 쉽게 추가하기 위한 파일 컨벤션 입니다.
- Templates: 다른 인스턴스를 만들지만 상태를 공유하지 않는 UI를 추가하기 위한 파일 컨벤션입니다.
- Intercepting Routes, Parallel Routes, Conditional Routes: 향상된 라우팅 패턴을 구현하도록 돕는 새로운 컨벤션입니다.
추가적으로 새로운 app 폴더에서 Global CSS Imports를 지원하기 위해 연구 중에 있습니다.
별도 설정 없이 .css 파일을 import 하도록 하기 위한 것입니다.
자세한 내용은 다음 글에서 옮겨보려고 합니다.
마무리하며
Next.js 12.3 버전은 기존에 experimental로 제공되던 기능들이 stable 버전으로 많이 추가되었습니다.
그리고 무엇보다 기대를 많이 하고 있는 새로운 Layout 시스템에 대한 내용이 있어서 기쁘게 읽었습니다. 다음에 옮겨볼 예정이긴 한데 Remix 라우트 시스템과 굉장히 비슷하기도 하고 특이하게 보이는 지점도 있는 것 같습니다.
React 프레임워크 중에서 가장 많이 사용하고 있는 Next.js 에서 경험 향상을 위해 새로운 기능들이 추가된다는 것은 기쁜 일입니다. (이번에 nextconf를 열리기도 하고 로고도 바뀐 것을 확인할 수 있네요.)
다음 글에는 업데이트된 Layout 시스템에 대한 내용을 옮겨보려고 합니다.
마지막 업데이트
9/9/2022
