Прежде чем мы начнем с того, почему Next .Js, я хотел бы заявить, что я не знаю всего о Next .Js, поэтому, если у вас есть что-то, что вы считаете важным добавить, не стесняйтесь.
Оптимизация изображения
Почему я начал с оптимизации изображений?
Почему я начал с этого? Почему не SSR или дружественность к SEO? Лично это из-за моего опыта работы с Next .Js. Я был разработчиком фреймворка Create-React-App (до сих пор им являюсь), и каждый раз, когда на моем сайте было так много изображений, его производительность становилась безумно низкой. Это разочаровало бы меня и заставило бы искать способы оптимизировать изображения.
Однажды, когда я просматривал React Docs, я заметил, что у React есть несколько фреймворков, и их чтение Next .Js всегда было решением моей проблемы.
Компонент Next .Js Image включает в себя множество встроенных средств оптимизации производительности, которые помогут вам достичь хороших основных веб-жизненных показателей.
Сравните его со старым тегом Img
Если вы являетесь фронтенд-разработчиком или даже разработчиком, я чувствую, что тег html ‹img› — это то, с чем вы сталкивались.
Тег ‹img› больше похож на ‹Image› в Next .js, но с неоптимизированными настройками.
<img
src="/img.png"
alt="unoptimized image"
width={100}
height={50}
/>Если вы использовали этот код и проверили свою консоль, вы поймете, что отображаемое изображение принимает свой реальный размер.
