Извините, Nuxt. Прощай, Гэтсби.

В недавнем выпуске Next.js (версия 10.0.0) появилось много интересных функций, которых я так долго ждал. Это, безусловно, делает его более привлекательным как для разработчиков, так и для бизнеса, поскольку он превратился в надежную готовую к работе веб-платформу со многими многообещающими преимуществами. Вот краткое описание нескольких важных обновлений функций, которые заставили меня полностью погрузиться в Next.js.

I. Автоматическая оптимизация изображения

NextJS 10 представляет новый встроенный компонент изображения «next / image» как расширение HTML-тега ‹img›, обеспечивающий автоматическую отложенную загрузку и адаптивные изображения.

👇 Как это работает:

В HTML:

<img src=”/my-image.jpg” ...>

В Next.js:

import Image from 'next/image'
<Image src="/my-img.jpg" ...>

🤖 Что такое ленивая загрузка?

Компонент Next.js next / image также автоматически генерирует изображения меньшего размера за счет встроенной оптимизации изображений, которая автоматически обслуживает изображения в современных форматах изображений, таких как WebP, обслуживая изображения на 30% меньше, чем JPEG (если браузер поддерживает это).

II. Интернационализация

Next.js 10 не только предоставляет встроенную поддержку интернационализированной маршрутизации и определения языка, но также поддерживает две самые популярные стратегии маршрутизации интернационализации: «маршрутизация подпути» и « маршрутизация домена », которая работает как с SSG, так и с SSR.

👇 Как это работает:

Пример подпути маршрутизации (в next.config.js):

Если у вас есть, например, pages / blog.js, будут доступны следующие URL-адреса, этот параметр приведет к следующим путям домена:
- Английский: / blog
- французский: / fr / blog
- корейский: / ko / blog

Пример маршрутизации домена (в next.config.js):

При этом параметре, если у вас есть pages / blog.js, автоматически будут созданы следующие URL-адреса:
- Английский: yourdomain.com/blog
- французский: yourdomain.fr/blog
- корейский: yourdomain.kr/blog

III. Гибрид SSG / SSR с автоматическим разрешением href

Готовы ли вы к этому?
Next.js теперь может предварительно отображать страницы во время сборки (SSG, создание статического сайта) и SSR (сервер -Side Rendering) в одном проекте!

Кроме того, новая функция Автоматическое разрешение href - это вишенка на торте: в Next.js 10 вам больше не нужно использовать свойство «as» в ссылках для большинства случаев использования!

Так, например, в этом теге:

 <Link href=”/categories/[slug]” as=”/categories/books”>

вы можете удалить декоратор «как». Это изменение полностью обратно совместимо - если вы в настоящее время используете и «href», и «as», существующее поведение сохраняется.

- Подробнее об Автоматическом разрешении href

Помимо этих замечательных функций, упомянутых выше, вы можете попробовать еще несколько функций Next.js v.10:

  • Next.js Analytics
  • Поддержка TypeScript
  • Быстрое обновление
  • Встроенная поддержка CSS, позволяющая импортировать файлы CSS из файла JS.
  • Next.js commerce
  • Маршруты API

Пришло время поработать!