Next.js 11 Особенности


Пожалуйста, обратите внимание, что видео выше не принадлежит codingcat.dev. Я подумал, что важно увидеть объявление в полном контексте.

В процессе подготовки к моей следующей (или, лучше сказать, следующей.js) серии курсов я хотел вернуться к новым возможностям Next.js 11. О том, что меня действительно поразило, лучше всего рассказал один из моих любимых гостей нашего подкаста Swyx в этом твите.

  • Совместное редактирование предварительных версий (Next.js Live)

  • «Соответствие» руководства по перфекту

  • <Image> определение размера

  • <Script> стратегия загрузки

  • Автоматическая оптимизация шрифтов

Совместное редактирование предварительного просмотра

Это интересно назвать функцией Next.js, можно было бы утверждать, что это функция Vercel, но я действительно разделяю волосы, потому что сервер, который вам нужен, находится в Next.js, но учетная запись, которую вы, скорее всего, будете использовать в Vercel в ближайшем будущем. Вы, скорее всего, видели такой же тип сотрудничества, если работали над Figma или Miro. Это, как правило, остается на этапе проектирования, когда мы работаем в OST по принципу «Дизайн. Архитектор. Build. Запуск.». Это редко что-то, с чем вы видите сотрудничество на живом сайте, на котором вы выполняете код. Я думаю, это позволит объединить фазы проектирования, архитектуры и сборки проекта.

Conformance

Conformance — это система, которая предоставляет тщательно разработанные решения и правила для поддержки оптимальной загрузки и Core Web Vitals, с последующими дополнениями для поддержки других аспектов качества, таких как безопасность и доступность.

По сути, это то, чего хочет каждый разработчик, не прилагая для этого больших усилий. Next.js 11 будет напрямую поддерживать ESLint, что позволит ему находить любые проблемы, специфичные для фреймворка, во время разработки. Я в восторге от Core Web Vitals, но мне не терпится узнать, что команда приготовила для Security и A11y!

Обязательно ознакомьтесь с планами Google по проекту Aurora и, в частности, с их блогом о соответствии в 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

Стратегия загрузки сценариев

Новая оптимизация скриптов — это довольно банально, как всегда говорила Гвен!

через GIPHY

Если вы разработчик, вы 100% сталкивались с требованием аналитического пакета или рекламы использовать внешние скрипты. Как правило, они представляют собой кошмар производительности и часто остаются незамеченными до тех пор, пока ваше приложение не появится на всеобщее обозрение. Теперь вы можете использовать новый тег next/script и определить соответствующую стратегию. Существует три стратегии, которые очень легко разделить на три части

  • beforeInteractive: Для критических скриптов, которые должны быть получены и выполнены до того, как страница станет интерактивной, например, для обнаружения ботов и управления согласием. Эти скрипты внедряются в исходный HTML с сервера и выполняются до выполнения самописного JavaScript.

  • afterInteractive (по умолчанию): Для сценариев, которые могут быть получены и выполнены после того, как страница станет интерактивной, например, для менеджеров тегов и аналитики. Эти скрипты внедряются на стороне клиента и выполняются после гидратации.

  • lazyOnload Для скриптов, которые могут ждать загрузки во время простоя, например, поддержка чата и виджеты социальных сетей.

Вы можете прочитать об этом в статье блога Next.js 11 об оптимизации скриптов или в документации Next.js.

Автоматическая оптимизация шрифтов

Технически эта функция была добавлена в 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.

Оцените статью
devanswers.ru
Добавить комментарий