Next13 변화와 장점 빠르게 알아보기
들어가기 앞서
사이드 프로젝트를 진행하기 앞서, 소문의 Next13이 정말로 사용할만한 가치가 있는 것인지 판단하기 위해 Next13의 변화와 해당 변화에 대한 장점들에 대해 간단히 알아보았습니다.
톺아보기 수준은 아니지만, 빠르고 간단하게 Next13의 장점과 가치에 대해 알고 싶은 독자에게 도움이 되길 바랍니다.
변화 1 : app directory (beta)
설명
레이아웃 Layouts
파일 시스템을 통해 레이아웃 정의 가능합니다. 정의된 레이아웃은 상태를 유지하고, 다시 랜더링 되지 않습니다.
보다 자세한 정보는 여기에서
장점
- 상태를 유지 가능
- 비용이 많이 드는 재랜더링을 최대한 피할 수 있음
- 또한 경로간의 UI 또한 쉽게 공유 가능
사용 방법
// app/blog/layout.js
export default function BlogLayout({ children }) {
return <section>{children}</section>;
}서버 컴포넌트 Server Components
이제 모든 컴포넌트는 기본적으로 서버 컴포넌트로 구현되며, 클라이언트 컴포넌트를 구현하기 위해선 특정 명령어(use client)가 필요합니다. 서버 컴포넌트를 통해 복잡한 인터페이스를 구축하면서도, 클라이언트로 전송되는 Javascript의 양을 줄일 수 있습니다. 또한 경로가 로드되어 캐시가 가능해집니다.
보다 자세한 정보는 여기에서
장점
- 초기 페이지 로드 속도 향상 가능
- 캐시 가능
- 뛰어난 개발자 경험 제공 가능
스트리밍 Streaming
클라이언트 UI의 랜더링된 단위를 점진적으로 렌더링하고 스트리밍하는 기능이 도입되었습니다. app 디렉토리와 Layout등을 활용한 중첩된 레이아웃을 통해 필요하지 않는 페이지 부분을 즉시 렌더링 하고, 가져오는 페이지 부분에 대해서는 로드 상태를 표시할 수 있습니다.
장점
- 사용자가 특정 컴포넌트를 사용하고 싶을 때,
전체 페이지가 로딩될 때까지 기다릴 필요 없음
변화 2 : Turbopack
설명
Next13에서 도입된 번들러입니다. 기존의 Webpack보다 무려 700배 빠른 속도를 보여준다고 합니다. (Vite보다 10배…옴마야)
또한 서버 컴포넌트, Typescript, JSX, CSS등을 별도의 설치 없이 바로 번들 가능합니다. 앞으로도 계속해서 많은 기능들을 기본 번들이 가능하도록 추가 할 예정이라고 하네요.
변화 3 : next/image
설명
기존 Next.js에서도 강력했던 next/image 기능을 보다 강력하게 개선했습니다. 개선된 next/image의 장점들은 다음과 같습니다.
- 더 적은 클라이언트 측 Javascript 제공
- 더 쉬운 스타일 지정 및 구성 가능
- alt를 필수 태그로 변경 ⇒ 더 나은 웹 접근성 구성에 도움
사용 예시
import Image from 'next/image';
import avatar from './lee.png';
function Home() {
return **<Image alt="leeerob" src={avatar} placeholder="blur" />**;
}변화 4 : @next/font
설명
Next13에서 새로 도입된 글꼴 시스템입니다. 해당 기능을 통해 구글 폰트 등의 웹폰트를 손쉽게 사용 가능합니다. 개인 정보 보호를 염두에 둘 필요가 없으며, 성능 또한 개선된다고 합니다.
CSS 및 글골 파일은 빌드 시 다운되며, 나머지 정적 자산과 함께 자체 호스팅이 된다고 합니다. 즉 웹폰트로 인해 브라우저에서 Google로 요청을 보낼 필요가 없어진다는 뜻!!
보다 자세한 설명은 여기에서 확인 가능합니다.
사용 예시 (구글 폰트)
import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>변화 5 : next/link
설명
next/link 기능이 업그레이드 되었습니다. 태그가 기본값이 되면서 이제 next/link를 사용하기 위해 태그 내부에 태그를 사용할 필요가 없어졌습니다.
사용 예시
import Link from 'next/link'
// 업데이트 이전의 next/link 사용법
<Link href="/about">
<a>About</a>
</Link>
// 업데이트 이후의 next/link 사용법
<Link href="/about">
<a>About</a>
</Link>변화 6 : OG 이미지 생성
설명
Next13과 원활하게 작동하는 OG 이미지 생성용 라이브러리가 새로 추가되었다.
OG 이미지?
Open Graph 이미지. URL 링크가 공유되었을 때, 해당 콘텐츠가 표시되면서 사용되는 이미지들을 의미한다. 즉 링크를 공유했을 때 나타나는 미리보기 이미지.
OG 이미지을 사용한 소셜 카드를 통해 콘텐츠 클릭 참여율을 크게 높일 수 있다는 연구결과가 있다.
OG 이미지 예시
사용 방법
// pages/api/og.jsx
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
}}
>
Hello, World!
</div>
),
);
}결론
개인적으로 Next13의 가장 메리트는 크게 향상된 DX라고 생각합니다. Turbopack을 통해 번들 과정이 빨라지면서 개발 도중 자신의 개발 현황을 빠르게 확인할 수 있는 것이 가장 큰 장점인 것 같습니다. 그 외에도 app directory, next/link, next/font등을 통해 더 직관적으로 사용할 수 있도록 한 점, OG 라이브러리 도입 등 더 나은 UX를 위한 노력도 꾸준히 하고 있는 듯 합니다. 간단히 살펴본 장점들이지만, 이 정도 만으로도 충분히 사용할만한 가치가 있는 것 같습니다 : )
결론은 빠르고 쉬온 개발 경험을 위해서 충분히 사용할 만한 프레임워크라고 생각합니다! 다만 아직 불안정적인 app directory로 인해 실제 프로덕션이 아닌 사이드 프로젝트 등에서만 사용하는 것을 권장합니다.
'FE' 카테고리의 다른 글
| 자바스크립트 배열 메서드 가이드 포스터 (번역) (0) | 2023.02.13 |
|---|---|
| [Next.js] 왜 새로워진 next/Image는 더이상 objectFit을 필요로 하지 않게 됐을까? (0) | 2022.12.17 |
| [JS] LocalStorage & SessionStorage (0) | 2022.12.11 |
| [Next.js] 프로젝트에 head 설정하기 (next/Head, _document.js, /app.head.js) (0) | 2022.12.08 |
| [Next.js] 이미지 로딩 속도 개선하기 (0) | 2022.12.07 |