6월 15일, 다음날.js Conf 2021이 열리고 넥스트 소개를 가져왔다.js 11.
이 새 버전의 틀은 관련 새로운 특성을 가져왔기 때문에 우리는 본문에서 토론할 것이다.
특히 이 팀은 DX-UX(개발자 체험 엔드 유저 체험)의 균형과 그들이 새로운 버전의 Next에서 얻은 우수한 성능을 매우 중시한다.js.
간단히 설명한 다음 Next의 새로운 기능에 대해 자세히 살펴보겠습니다.js 11:

일치성

Consistency 는 새로운 시스템을 다음 시스템에 추가하는 것입니다.js11은 인코딩할 때 최적화된 실천을 실현하기 위해 개발자에게 지도와 기준을 제공했다.
이것은 코드의 가장 좋은 불러오는 성능을 얻기 위해 모든 규칙을 기억하는 것을 피하는 데 매우 유용하다.
그리고 다음.js11은 현재 ESLint가 프레임워크와 관련된 문제를 해결하는 것을 지원하여 개발자의 체험을 개선하는 데 도움이 된다.
사용법

npx next lint

스크립트 최적화

스크립트 최적화를 위해 새 버전의 Next에 있습니다.js에서 새로운 구성 요소를 발표했습니다: 스크립트 구성 요소로 개발자가 제3자 스크립트를 우선적으로 불러올 수 있도록 합니다.
때때로, 우리 개발자들은 스크립트를 정확하게 불러오고 실행하기 위해 어디에 놓을지 결정하기 어렵다.
이 새 스크립트 구성 요소가 있으면, 우리는 prop 정책을 통해 스크립트의 우선 순위를 설정할 수 있으며, 우리는 세 가지 다른 정책에 세 가지 다른 값을 전달할 수 있다.

beforeInteractive: 페이지가 상호작용하기 전에 검색하고 실행해야 하는 스크립트입니다.

afterInteractive: 페이지 상호작용 후 검색하고 실행할 수 있는 스크립트입니다.

lazyOnload: 유휴 시간에 불러오기를 기다리는 스크립트입니다.

사용법

import Script from "next/script";
...
<Script src="auth.js" strategy="beforeInteractive" /> 

이미지 개선

다음.js10은 이미지 최적화에 사용되는 새로운 구성 요소입니다. 이미지는 전통적으로 웹 응용 프로그램에서 많은 공간을 차지하기 때문에 성능이 좋지 않습니다.
이 구성 요소는 현재 이미지를 더욱 잘 최적화할 수 있는 새로운 기능을 가지고 있다.

가져오기를 사용하여 이미지 추가

이 방법은 정적 이미지의 너비와 높이 값을 자동으로 계산하여 프로젝트 저장소의 일부분에 분배합니다.이것은 누적 레이아웃 변화를 줄이는 데 도움이 된다. 이것은 웹 페이지의 모든 레이아웃 변화를 계산하는 방법, 즉 비사용자 상호작용으로 인한 가시적인 요소 변화를 계산하는 것이다.
사용법

import landscape from "../public/images/landscape.png";
...
<Image src={landscape} alt="Beautiful landscape of mountains" />

자리 표시자

사용자가 웹 페이지를 처음 방문할 때, 대형 이미지를 불러오는 데 시간이 걸릴 수도 있다. (특히 느린 인터넷 연결을 사용할 때)이미지가 나타날 때까지 임시 공백이 발생할 수 있습니다.
이러한 동작을 피하기 위해 새 버전의 Next에 이미지 구성 요소에 새로운 자리 표시자 도구를 도입했습니다.js.우리는 이 도구를 사용해서 과도를 완화시킬 수 있습니다. 이것은 완전히 불러올 때까지 희미한 이미지 버전을 보여 줍니다.

그림 출처:nextjs.조직하다
사용법

<Image src={landscape} placeholder="blur" alt="Beautiful landscape of mountains"  />

웹 페이지 5

Webpack 5는 버전 10.2부터 Next의 기본 번들로 사용됩니다.js 프로그램이지만, 그것을 사용하기 위해서는 next.config.js 에 우리가 사용할 Webpack 버전을 지정하는 로고를 추가할 필요가 있습니다.
다음.js 11, Webpack 5를 응용 프로그램 귀속기로 설정하려면 별도의 설정이 필요하지 않습니다.그것은 자동으로 사용을 준비할 권리로 상자를 열면 바로 사용할 수 있다.

다음 방송.

Next의 가장 중요한 기능 중 하나입니다.js 11.Next Live는 기본적으로 팀의 실시간 공동 작업을 의미합니다.이는 세계 어느 곳에서든 브라우저 자체의 코드를 공유하고, 평론하고, 편집할 수 있도록 하고, URL을 공유하기만 하면, 이전의 구축 절차가 필요 없으며, 이 과정을 신속하고 효율적으로 할 수 있다.

또 다른 장점은 오프라인 접근을 제공하여 팀이 인터넷 연결 없이 프로젝트 작업을 할 수 있도록 하는 것이다.

그림 출처:nextjs.조직하다

CRA 마이그레이션

이 새로운 기능을 통해 각 Create React 애플리케이션은 이제 다음 버전이 됩니다.이 도구@next/codemod만 실행하면 js를 호환할 수 있습니다.이렇게 하면 프로젝트에/pages 디렉토리가 자동으로 생성되고 CSS 가져오기가 올바른 위치로 재지정됩니다.
이 기능은 여전히 실험적이어서 회의에서 언급되지 않았지만 다음 회의에서 나타날 것이다.js 관련 문서.

성능 향상

이 프레임워크의 성능도 다음 단계부터 가동 시간이 24% 높아졌고 변경 처리 시간이 40% 단축되었다는 점을 강조했다.js 10.
그리고 다음.js 11에는 Webpack의 Babel loader의 새로운 구현도 포함되어 있어 부팅 시간을 끊임없이 단축할 수 있다.
이 모든 새로운 기능을 충분히 이용하기 위해서 우리는 다음 단계를 계속하기만 하면 된다.다음 명령을 실행하여 js가 업데이트되었습니다.

npm i next@latest react@latest react-dom@latest

오늘은 여기까지.🙂
나는 이 문장이 너희들에게 도움이 되기를 바란다. 나는 다음 문장에서 너희들을 만날 것이다.
🎉 나를 주목하고 더 많은 관련 내용을 이해하는 것을 잊지 마라.