2021 Next.js Conf 후기

Next.js Conf

한국 시각으로 오늘인 16일 오전 1시에 Next.js의 앞으로의 방향에 대해 엿볼 수 있는 Next Conf가 있었습니다.

 

졸린 나머지 끝까지 들을 수 있을까 싶었지만, 30분 안에 종료되어 다행히 다 보고 잘 수 있었습니다. (after party는 못 봄)

 

내 티켓

이번 포스팅에서는 어제 본 Next.js Conf의 중요 내용을 정리해 보려고 합니다.

• 인트로
• Next.live
• Image Component
• Script Component
• 총평

인트로 - Next.js 자랑 타임

최근 5년간, Next 가 급격히 성장했다.

특히 최근 6개월간의 성장세가 엄청나다.

커뮤니티의 개발자들, 협력사들, 코어 개발팀 덕분이다.

블라블라블라... Next.js의 자랑 타임....

훌륭한 UX는, 훌륭한 DX(developer experience)에서 나온다.

(여기서 나도 모르게 끄덕끄덕)

훌륭한 DX는 뭘까? 빠른 피드백. 즉 실시간 반영.(HMR과 같은)

 

1. Next.live

Next.js 11

일종의 협업 툴인 Next.live가 공개되었습니다.

빌드 없이 브라우저 내에서 url을 공유하는 것 만으로 모든 팀원이 소통하며 코드를 실시간으로 수정할 수 있는데, 커서 위치를 x, y 좌표가 아닌 리액트 컴포넌트 단위로 싱크 하기 때문에 반응형 레이아웃에서도 동일한 위치를 보며 이야기할 수 있다는 부분에서 감탄....

 

 

웹 어셈블리, 서비스 워커, es module을 사용한 next.js 진영의 새 무기가 될 것 같습니다.

정확히는 vercel의 새 무기 같은 느낌.

next.js live 개발 서버 엔진은 오픈소스가 되어 공개될 예정이지만, 인증, 주석, 커서 트래킹, 그리기, 글로벌 코드 싱크 등은 vercel 플랫폼이 필요하다고 합니다. 사실상 원활한 협업을 위해서는 next.js -> vercel 이 루트가 사실상 강제될 것 같네요.

 

2. Image 컴포넌트

Image 컴포넌트의 경우 Next 버전 10부터 추가된 내장 컴포넌트로 익숙하지만, 이번에 기능이 추가되었습니다.

1) 프로젝트 내에서 import 한 에셋에 대해 src로 적용할 수 있게 되었다.

기존에는 이미지 소스를 next public 내에 있는 에셋으로 사용하여 src="/images/sample.png" 식으로 사용하던지, cdn을 통한 이미지 관리의 경우 prefix를 따로 설정해줘야 했습니다. 불편했는데 다행히 개선되었네요.

2) placeholder 세팅이 가능해졌다. empty 혹은 blur로 세팅 가능.

3) blurDataURL을 커스텀으로 설정해서 이미지 로드 전 블러 이미지를 지정 가능.

 

 

3. next/script의 등장

Next.js를 사용하면서 스크립트 로드가 은근히 불편한 데가 있었는데, 역시 가려운 부분을 긁어주는 업데이트가 있었습니다.

이번 업데이트는 확실히 제가 겪은 불편함들이 많이 개선되어 기분이 좋네요.

 

개발자는 기존 Next/head 에서 적용하던 script 태그 대신, Script 컴포넌트를 사용하여 sctrategy를 사용할 수 있다.

예를 들어 채널 톡 같은 서드파티의 스크립트 로드는 'lazyOnload'를 사용해서 늦게 받고, 우선해서 받아야 하는 스크립트는 'beforeInteractive'를 사용해서 인터렉션 이전에 받을 수 있습니다. 기본값은 'afterInteractive'.

 

그 외.

- webpack5를 표준으로 적용

- CRA를 Next.js로 마이그레이션 해주는 도구 도입( 정말 고된 일... 직접 해본 사람으로서 이것도 정말 가려운 부분 긁어주는 업데이트)

- 구글과의 협업을 통한 Conformance , eslint 지원 (npx next lint)

Conformance for Frameworks

 

총평

 

개발자의 입장에서 훌륭한 DX가 훌륭한 UX로 연결된다는 Next팀의 견해에 동의합니다.

 

디테일한 부분을 편하게 챙겨주고 개발자가 정말 집중해야 할 것들에 집중하게 해 주는 게 결국 고객을 위한 서비스를 만드는 밑거름이라고 생각합니다.

 

경영진의 입장에서도 훌륭한 퍼포먼스와 SEO 최적화라는 두 마리 토끼를 잡은 SSR, 그 SSR을 구현하는 데 있어 강력한 도움을 주는 Next.js와 같은 프레임워크는 당분간 선호하지 않을까 싶네요.

 

가까운 미래에는 react server component와 Next.js의 연계 또한 어떠한 형태로든 있을 것 같아 기대가 됩니다.

 

[react] React Server Component(RSC) 소개