한국 시간으로 2021년 6월 16일 오전 1시 Next.js를 만들고 maintain 하고 있는 vercel에서 Next.js 11의 새로운 기능들을 online conference 형식으로 개최했습니다.
발표 시간은 단 30분 밖에 되지 않았지만, 근사하고 설레는 기능들이 많았습니다. 이를 정리해보았습니다.
Next.js 에서 지원하는 라이브 코딩과 협업.
브라우저에서 코딩을 하며 협업 멤버들을 초대할 수 있고, 마우스로 선을 그릴 수도 있고, 채팅할 수도 있습니다.
프레임워크 자체의 기능이 아니고 마치 로컬에서 dev 모드로 코딩하며 개발해왔던 것을 브라우저로 올린 것과 같습니다.
지금은 베타 버전이라 early access 지원을 받고 지원자들에게 선공개할 예정입니다.
지원은 여기에서 하실 수 있어요! (저는 지원했습니다 😆)
이미지는 퍼포먼스에 가장 크게 영향을 미치는 요소중 하나입니다. 최적화 되지 않은 img 태그는 퍼포먼스를 낮추고 유저경험을 안좋게 만듭니다. 성능 점수도 낮게 나오죠.
Next.js는 자체의 Image 컴포넌트를 작년 10월부터 릴리즈 했습니다. 네이티브로 지원하는 이 Image 컴포넌트는 이미지 태그를 활용하는 Best practice를 제공하기 위해 만들어졌습니다.
여기에 11에서 부터 이미지가 전달되는 디바이스의 뷰포트에 맞게 최적화 하는 기능이 추가되었습니다.
네! 자동으로 resize 및 compression을 해줍니다 😊
쓰는 방법을 알아볼게요.
오로지 다음 중 하나의 경우로 씁니다.