Sorry, Nuxt. Adios, Gatsby.
최근 릴리즈 된 Next.js 버전 10에는 내가 그동안 자바 스크립트 프레임 워크에 갈망해왔던 기능들이 많이 도입이 되었다. 이 Next.js가 프로덕션 완비된 웹 프레임워크로 성장하고 있는 경향, 그리고 버전 10이 제시하는 유용하고 편리한 이점을 고려하여 개발자나 비즈니스 모두에게 더욱더 Next.js의 선호도가 치솟고 있는 것이 2021년 – 주목할 점이다.
자, 여기 Next.js에 올인할만한 몇 가지 꿀맛 주요 기능 업데이트들을 한번 정리해본다:
I. 이미지 자동 최적화 (Automatic Image Optimization)
NextJS 버전 10은 HTML의 기본 <img> 태그를 확장하여, 빌트인 이미지 구성 요소 “next/image”를 도입, 자동 로드 지연 및 반응형 이미지를 제공한다.
작동 원리:
HTML:
<img src="/my-image.jpg...>Next.js:
import Image from 'next/image'
<Image src="/my-img.jpg"...>Next.js next/image 구성 요소는 내장된 이미지 최적화 기능을 통해 자동으로 이미지 사이즈를 WebP와 같은 (브라우저에서 지원하는 경우) 최신 이미지 형식으로 자동으로 압축 생성한다; 결과는 JPEG보다 사이즈 약 30% 축소!
참고로: “로드 지연 (lazy-loading)”이란?
II. 국제화 (Internationalization)
Next.js 10은 국제화 라우팅 및 언어 감지를 “기본적으로” 지원할 뿐 아니라, SSG 또는 SSR에서 모두, 국제화 라우팅 기술 중 가장 널리 사용되는 두 가지 방법 – “하위 경로 라우팅(subpath routing)” 및 “도메인 라우팅(domain routing)”도 지원한다는 사실.
작동원리:
Subpath routing의 예. (in next.config.js)
예를 들어 pages/blog.js가 있다면, 이 세팅을 통하여 다음과 같은 URL들이 자동 설정된다:
– English: /blog
– French: /fr/blog
– Korean: /ko/blog
Domain routing의 예 (in next.config.js):
이 세팅을 통하여. 만약 pages/blog.js 가 있다면 다음 url들이 자동으로 생성된다:
– English: yourdomain.com/blog
– French: yourdomain.fr/blog
– Korean: yourdomain.kr/blog
III. href 자동 해결 기능(Automatic Resolving of href), 그리고 SSG/SSR을 둘다 감당할수있는 하이브리드!
감히 생각했었던가?
단일 자바스크립트 프로젝트에서 필요에 따라 정적 사이트 생성(SSG)과 서버 측 렌더링(SSR)을 모두 해결할 수 있는 프레임워크가 있을 수 있다는 것 — 그것이 이제 Next.js!
게다가 새로운 href의 자동 해결 기능은 더더욱 훌륭하다. 이제 Next.js 10에서는 더 이상 링크에 “as”속성을 설정할 필요가 없어졌다.
예를 들어 아래 태그에서:
<Link href="/categories/[slug]" as="/categories/books">“as” 태그를 제거할 수 있다. 이 변경 사항은 현재 href를 모두 사용하고 기존 동작이 유지되는 한 이전 버전과 완전히 호환된다.
> href의 자동 해결 기능 더 자세히 알아보기
위에서 언급 한 기능 외에도 Next.js v.10의 다른 신선한 기능들은 다음과 같다:
- Next.js Analytics
- TypeScript 지원
- 신속한 Refresh
- JS 파일에서 CSS 파일을 가져올 수 있는 빌트인 CSS 지원
- Next.js Commerce
- API Routes
Next.js 직접 가서 확인하기: https://nextjs.org/docs/getting-started
짧은 글이지만 모쪼록 도움이 되시기를 바라며… 다음에 또.
