Next.js 11 기능

Please take note the above video is not codingcat.dev's. I thought it was important to see the announcement in its full context.

다음(또는 Next.js라고 해야 하나) 일련의 과정에 대한 연구에서 저는 Next.js 11의 새로운 기능에 다시 뛰어들고 싶었습니다. 정말 저를 놀라게 한 항목은 팟캐스트 Swyx에서 제가 가장 좋아하는 게스트 중 한 명이 가장 잘 요약한 것입니다.

협업 미리 보기 편집(Next.js Live)

"적합성"성능 지침

<Image> 크기 감지

<Script> 로딩 전략

자동 글꼴 최적화

협업 미리보기 편집

이것은 Next.js 기능이라고 부르는 흥미로운 기능입니다. 누군가는 이것이 Vercel 기능이라고 주장할 수 있지만 필요한 서버가 Next.js에 있지만 가장 많이 사용할 계정은 Vercel이기 때문에 여기에서 정말 머리를 쪼개고 있습니다. 가까운 미래에. Figma 또는 Miro에서 작업한 경우 이와 동일한 유형의 공동 작업을 보았을 가능성이 큽니다. 이것은 "Design. Architect. Build. Run"에서 OST에서 작업하는 방식의 디자인 단계에 머무르는 경향이 있습니다. 경험. 코드 비하인드를 실행하는 라이브 사이트에서 협업하는 경우는 거의 없습니다. 이것이 프로젝트의 설계, 설계 및 구축 단계를 하나로 모을 것이라고 생각합니다.

적합성

Conformance is a system that provides carefully crafted solutions and rules to support optimal loading and Core Web Vitals, with further additions coming to support other quality aspects like security and accessibility.

기본적으로 이것은 모든 개발자가 달성하기 위해 열심히 노력하지 않고도 원하는 것입니다. Next.js 11은 ESLint를 직접 지원하므로 개발 중에 프레임워크 관련 문제를 찾을 수 있습니다. Core Web Vitals에 대해 기대가 크지만 팀이 보안 및 A11y를 위해 무엇을 준비하고 있는지 보고 싶습니다!

프로젝트Aurora에 대한 Google의 계획과 특히 Conformance in Next.js의 블로그를 확인하십시오.

이미지 크기 감지

Media Jams에 대해 이야기한 것처럼 이미 내장된 이미지 제공자 기능을 사용하지 않는 분들을 위해 이 기능은 놀랍습니다! 로컬 이미지를 가져올 수 있으며 자동으로 너비와 높이를 결정합니다.

import Image from 'next/image'
import cat from '../public/cat.png'

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={cat} alt="Picture of AJ the Cat" />
  )
}

또한 주목해야 할 점은 placeholder="blur" 를 사용하여 지금 추가할 수 있는 멋진 자리 표시자입니다. 이미지 가져오기에 대한 자세한 내용은 Next.js Docs에서 읽을 수 있습니다.

스크립트 로딩 전략

이 새로운 스크립트 최적화는 Gwen이 항상 말했던 것처럼 예쁜 바나나입니다!

via GIPHY

개발자라면 외부 스크립트를 사용해야 하는 분석 패키지 또는 광고 요구 사항에 100% 부딪혔을 것입니다. 일반적으로 성능이 악몽이며 앱이 공개될 때까지 보이지 않는 경우가 많습니다. 이제 새로운 next/script 태그를 사용하고 적절한 strategy 태그를 정의할 수 있습니다. 관련된 세 가지 전략이 있으며 매우 쉽게 세분화됩니다.

beforeInteractive : 봇 감지 및 동의 관리와 같이 페이지가 대화형이 되기 전에 가져와서 실행해야 하는 중요한 스크립트용입니다. 이러한 스크립트는 서버에서 초기 HTML에 삽입되고 자체 번들 JavaScript가 실행되기 전에 실행됩니다.

afterInteractive (default) : 태그 관리자 및 분석과 같이 페이지가 대화형이 된 후 가져오고 실행할 수 있는 스크립트용입니다. 이러한 스크립트는 클라이언트 측에 주입되며 수화 후에 실행됩니다.

lazyOnload 채팅 지원 및 소셜 미디어 위젯과 같이 유휴 시간 동안 로드를 기다릴 수 있는 스크립트용입니다.

Script Optimization 또는 Next.js Docs에 있는 Next.js 11 블로그 게시물에서 이에 대한 모든 내용을 읽을 수 있습니다.

자동 글꼴 최적화

좋아 기술적으로 이것은 Next.js 10.2에 추가되었지만 회의에서 이야기되었고 확실히 그것에 대해 몰랐습니다! 시스템에 웹 글꼴 로드를 포함하는 방법에는 여러 가지가 있습니다. 빌드 시간 및 참조 시 생성하거나 TailwindCSS에서 수행하도록 하거나 수동으로 링크를 추가할 수 있습니다. 이제 아래 코드처럼 보일 것입니다.

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal.....
</style>

특히 빌드 시간 동안 정적 사이트에서 이 최적화의 가장 큰 부분은 Next.js가 빌드 시간에 글꼴 CSS를 최적화하고 인라인하므로 글꼴 선언을 가져오기 위한 추가 왕복을 제거합니다. 이것은 또한 더 나은 FCP 및 LCP를 제공해야 합니다. 글꼴 최적화에 대한 자세한 내용은 Next.js Docs을 확인하십시오.