BackНазад к блогу

Next.js 10.1

В Next.js 10.1 представлены: обновление в 3 раза быстрее, размер установки на 58% меньше, на 56% меньше зависимостей, оптимизация изображений через WebAssembly, улучшенная поддержка next/image и многое другое!

Мы рады представить Next.js 10.1 с новыми возможностями:

Обновление в 3 раза быстрее

Начиная с v9.4, Next.js представил Fast Refresh от Facebook в open-source для мгновенной обратной связи при редактировании React-компонентов.

Это означает, что Next.js обновляет только код в редактируемом файле и перерисовывает только этот компонент, сохраняя его состояние. Это включает стили (inline, CSS-in-JS или CSS/Sass Modules), разметку, обработчики событий и эффекты (через useEffect).

Теперь мы делаем его на 200 мс быстрее при каждом редактировании без изменений в вашем коде. В среднем это ускоряет Fast Refresh в 3 раза.

Хотите еще более высокую производительность и лучшее время сборки? Включите Webpack 5 сегодня с новым флагом future. Этот флаг является релиз-кандидатом (RC), и Webpack 5 скоро станет стандартом. После включения флага поделитесь отзывом с нами.

next.config.js
module.exports = {
  future: {
    webpack5: true,
  },
};

Чтобы узнать больше о том, как Webpack 5 внедряется в ваше приложение с обратной совместимостью, ознакомьтесь с документацией.

Улучшенное время установки

Мы оптимизировали граф зависимостей Next.js, чтобы уменьшить время установки и размер зависимостей. Теперь создание проекта Next.js стало быстрее, чем когда-либо, как локально, так и в процессе CI/CD.

10.010.1разница
Среднее время установки~15с~5сВ 3 раза быстрее
Размер установки96.5МБ39.9МБНа 58% меньше
Количество зависимостей424187На 56% меньше

В рамках нашей цели по оптимизации зависимостей мы также обновили и/или заменили npm-пакеты, помеченные их авторами как устаревшие, даже если они были глубоко вложены в дерево зависимостей. Теперь чистая установка Next.js 10.1 не вызывает предупреждений о пакетах.

Улучшения next/image

Поддержка Apple Silicon

Когда вышла Next.js 10, оптимизация изображений работала через нативную зависимость. Это приводило к более медленной установке, причем нативные зависимости занимали 50% общего размера установки Next.js. Кроме того, это устраняет выполнение скриптов после установки и компиляцию по требованию.

Мы рады сообщить, что автоматическая оптимизация изображений через next/image теперь работает на WebAssembly. Эта оптимизация работает из коробки с next dev и next start. Благодаря WASM мы уменьшили размер установки на ~30МБ и добавили поддержку Apple Silicon M1 MacBooks.

Мы продолжаем улучшать производительность WebAssembly, используя расширения SIMD и многопоточность.

Дополнительные макеты

На основе ваших отзывов мы добавили новые макеты и параметры для next/image:

  • layout=fill: Не нужно указывать width и height. (Демо)
  • layout=fixed: Поведение нативного img. (Демо)
  • layout=responsive: Гибкая ширина с фиксированным соотношением сторон. (Демо)
  • layout=intrinsic: Не растягивается, но может сжиматься с фиксированным соотношением сторон. (Демо)
  • objectFit=cover: Фоновые изображения. (Демо)

Подробнее см. в документации layout.

Улучшенная поддержка оптимизации изображений

Мы расширили встроенные загрузчики изображений для next/image, добавив возможность использовать любой пользовательский загрузчик. С новым параметром loader вы можете оптимизировать изображения с любым провайдером или CDN.

components/my-image.js
import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

Подробнее см. в документации next/image.

Интеграция Next.js Commerce с Shopify

E-commerce — одна из самых быстрорастущих отраслей, использующих Next.js. Такие компании, как Apple, Wal-Mart, McDonald's и Nike, доверяют Next.js.

Мы хотели предоставить вам высокопроизводительную отправную точку для создания e-commerce приложений, поэтому выпустили Next.js Commerce. После тысяч запросов на Shopify мы обновили Next.js Commerce с независимым от провайдера UI, позволяя использовать любое headless e-commerce решение по вашему выбору.

Переключение между провайдерами — это однострочное изменение в конфигурации. Мы также создали Features API, позволяющий включать функциональность в зависимости от вашего случая использования — всё с сохранением лучшей производительности.

Метрики Lighthouse для Next.js Commerce по всему миру.

Метрики Lighthouse для Next.js Commerce по всему миру.

Несколькими кликами разработчики Next.js могут клонировать, развернуть и полностью настроить свой собственный интернет-магазин. Узнайте больше на nextjs.org/commerce и попробуйте наш Shopify Demo. Поддержка других e-commerce провайдеров скоро появится.

Пользовательская страница 500

Теперь вы можете создать пользовательскую pages/500.js, чтобы добавить свой логотип и брендинг при отображении ошибок. Как и pages/404.js, этот файл статически генерируется при сборке.

pages/500.js
export default function Custom500() {
  return <h1>500 - Произошла ошибка на стороне сервера</h1>;
}

Строгая загрузка конфигурации PostCSS

Если вы используете PostCSS и Webpack 5, вы можете улучшить производительность (через кэширование) с новым флагом future.

next.config.js
module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

Попробуйте сегодня и поделитесь отзывом. Подробнее см. в документации PostCSS Config.

Поддержка extends в tsconfig.json

Теперь вы можете использовать extends в tsconfig.json, используемом Next.js, чтобы расширять другой tsconfig.json в вашем проекте. Например, вы можете расширить tsconfig.base.json в проекте следующим образом:

tsconfig.json
{
  "extends": "./tsconfig.base.json"
}

Подробнее см. в документации TypeScript.

Определение включенного режима предпросмотра

Теперь вы можете определить, включен ли режим предпросмотра, что позволяет рендерить определенные компоненты только для редакторов.

components/MyComponent.js
import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Режим предпросмотра включен</h1> : null}</>;
}

Подробнее см. в документации режима предпросмотра.

Прокрутка к верху при методах маршрутизатора

При навигации через next/link Next.js автоматически прокручивает к верху. В Next.js 10.1 router.push и router.replace также будут автоматически прокручивать к верху для соответствия поведению next/link. Вы можете отключить автоматическую прокрутку с помощью опции scroll.

Подробнее см. в документации next/router.

Улучшения документации

Мы также добавили новые руководства, ресурсы и документацию, включая:

Сообщество

Мы рады видеть рост популярности Next.js:

  • Более 1,540 независимых участников, включая более 240 новых с релиза 10.0
  • На GitHub проект получил более 64,950 звезд.

Присоединяйтесь к сообществу Next.js в GitHub Discussions. Discussions — это пространство для общения с другими пользователями Next.js, где можно задавать вопросы и делиться своими работами. Вы также можете присоединиться к официальному Next.js Discord.

Благодарности

Мы благодарим наше сообщество, включая все внешние отзывы и вклады, которые помогли сформировать этот релиз.

Этот релиз стал возможен благодаря вкладу: @shuding, @edazpotato, @laithyounes, @ijjk, @harshitsan, @selrond, @sromexs, @melono6, @timneutkens, @madou, @mottox2, @leerob, @divmain, @nblthree, @KennethKinLum, @KarthikeyanRanasthala, @alex-safian, @rishabhpoddar, @daviavmello, @jpalmieri, @merceyz, @Segolene-Alquier, @michrome, @janicklas-ralph, @Parnswir, @giraffesyo, @balazsorban44, @Cicada95, @vzaidman, @deniseyu, @eltociear, @unimprobable, @getspooky, @Timer, @armand1m, @alexknipfer, @elitan, @atcastle, @noahfschr, @amille44420, @laanayam333, @spidgorny, @devuxer, @Janpot, @nickbabcock, @rsipakov, @NkxxkN, @dominicfraser, @alevosia, @Kerumen, @CMeeg, @Pomaio, @tim-hanssen, @lachlanjc, @lebreRafael, @AryanBeezadhur, @guybedford, @petecorreia, @kaznak, @sam3d, @fwuensche, @rafaellaurindo, @sphilee, @styxlab, @rexxars, @smitbarmase, @maerzhase, @matamatanot, @lucleray, @jeremybalog, @tarunama, @zainfathoni, @destumme, @VictorAssis, @bhbs, @ciruz, @simnalamburt, @Almad, @frol, @ludofischer, @elliottsj, @Baheya, @Lalit2005, @vldmrkl, @AriFreyr, @kaykdm, @Sharcoux, @ramasilveyra, @devknoll, @botv, @pkellner, @sumanthratna, @sokra, @lfades, @thorwebdev, @berndartmueller, @davidspiessens, @ShashiSrinath, @elsigh, @MMT-LD, @hankandre, @maxnowack, @kmjennison, @darshkpatel, @mohsen1, @DylanRJohnston, @calmonr, @imrobinized, @justintemps, @ncarchedi, @btk, @faizanv, @chulkilee, @ryan-lustre, @dfelber, @Ymirke, @Robogeek95, @mcha-dev, @youngvform, @andrehsu, @Simply007, @rokobekavac0, @ja0n, @mattruby, @xom9ikk, @niko20, @LauraBeatris, @armspkt, @xiaooye, @sungpro, @awareness481, @joebernard, @jensmeindertsma, @donavon, @DaneTheory, @Zertz, @danielyefet, @lfender6445, @tajo, @jorrit, @tvler, @mustafaKamal-fe, @prateekbh, @gregrickaby, @enochndika, @zimv, @lharries, @JstnEdr, @zbialecki, @fredmontet, @leo, @kachkaev, @mongolyy, @justinphilpott, @mjr, @fireairforce, @jvarho, @gr-qft, @thomaswang, @c316, @benbender, @michael, @damusnet, @farhankk360, @smaktacular, @webda2l, @chibicode, @bar7b, @SiTaggart, @lolobosse, @jamesgeorge007, @nikosantis, @mikan3rd, @oshdev, @UnbearableBear, @tunesmith, @jamsinclair, @ivandotv, @Arthie, @louison, @FutureKode, @wesleytian, @dennismorello, @vispaduchuri, @styfle, @caulagi, @berekuk, @jescalan, @cascandaliato, @coetry, @PepijnSenders, @dkempner, @dlackty, @aralroca, @felixmeziere, @bmvantunes, @hideokamoto, @bram-l, @craigdanj, @ErikAugust, @joiglifberg, @blvdmitry, @bragle, @ykdojo, @vitorhsb, @TrySound, @mattfwood, @ka2jun8, @rfinkley, @bannier, @karlhorky, @shihabus, @yakovlevyuri, @dav-is, @lundgren2, @NoobTW, @Cow258, @toshi1127, @jorisw, @rifaidev, @willianjusten, @willheslam, @alexvilchis, @vitordino, @matthewlilley, @Prottoy2938, @brunocrosier, @OriginalEXE, @sidthesloth92, @davidsonsns, @saitolume, @tolfino, @iczero, @WestonThayer, @galanggg, @davidgolden, @weichienhung, @ashconnell, @callumbooth, @lyderichti59, @lukyth, @FredyC, @danielstocks, @valse, @MrJmpl3, @Sm1t, @lucas-varela, @jose-donato, @chr-ge, @pocorschi, @jflayhart, @aried3r, @LittleboyHarry, @Akumzy, @xeust, @tonyspiro, @yordis, @AmrSaber, @Mzaien, @PaulPCIO, @quinnturner, @SebastianTroc, @JipSterk, @developit, @yokinist, @queq1890, @oriverk, @ospira, @danielivert, @huv1k, @minhtule, @shunkakinoki, @khades, @eric-burel, @turadg, @huozhi, и @scottmacdonnell!