Извините, 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
Пришло время поработать!