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

Next.js 13.1

Next.js 13.1 представляет улучшения для директории app, встроенную транспиляцию модулей, стабильный edge runtime для API-роутов и множество улучшений поддержки Turbopack.

Next.js 13.1 включает улучшения как для директории pages/ (стабильная), так и для app/ (бета):

Обновите сегодня, выполнив:

Terminal
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Улучшенная надежность и поддержка директории app

В Next.js 13 мы анонсировали новую директорию app (бета). Эта новая система маршрутизации и получения данных может быть постепенно внедрена вместе с существующей директорией pages.

Директория app предоставляет множество преимуществ, включая улучшенные макеты, совместное расположение компонентов, тестов и стилей, получение данных на уровне компонентов и многое другое. Благодаря вашему отзыву и раннему тестированию мы внесли несколько улучшений в надежность директории app:

  • Отсутствие div-элементов в макетах: Ранее директория app добавляла дополнительные элементы <div> для прокрутки макетов в область видимости при навигации. В версии 13.1 эти дополнительные элементы больше не создаются. Поведение прокрутки сохраняется.
  • Плагин TypeScript: Мы создали новый плагин TypeScript, который предоставляет подсказки для параметров конфигурации страниц и макетов, встраивает документацию непосредственно в вашу IDE и дает полезные подсказки по использованию серверных и клиентских компонентов (например, предотвращает использование useState в серверных компонентах). Узнать больше.
  • Улучшения надежности: Мы исправили множество ошибок, включая улучшенную поддержку CSS-модулей, правильное устранение дублирования cache() и fetch() для макетов и страниц, утечки памяти и многое другое.
  • Меньше клиентского JavaScript: Директория app теперь включает на 9.3kB меньше клиентского JavaScript, чем директория pages. Этот базовый уровень не увеличивается независимо от того, добавляете ли вы 1 или 1000 серверных компонентов в ваше приложение. Временный размер React runtime немного увеличился из-за runtime серверных компонентов React, который обрабатывает механизмы, ранее обрабатываемые Next.js. Мы работаем над дальнейшим уменьшением этого показателя.
pages/app/разница
Общий объем JS при первой загрузкеБазовый уровень-9.3kB12.1% меньше
Next.js RuntimeБазовый уровень-12kB56.8% меньше
React RuntimeБазовый уровень+2.7kB5.2% больше

Мы рады продолжать улучшать стабильность директории app. Бета-документация для директории app получила сотни обновлений на основе ваших отзывов.

Встроенная транспиляция модулей (стабильная)

Теперь вы можете отмечать зависимости из локальных пакетов (например, монорепозиториев) или внешних зависимостей (node_modules) для транспиляции и сборки. Эта встроенная поддержка заменяет популярный пакет next-transpile-modules.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
 
module.exports = nextConfig;

Мы благодарим Pierre de la Martinière (@martpie) за работу над этим пакетом и помощь в обеспечении соответствия встроенной поддержки потребностям сообщества.

Разрешение импортов для уменьшения бандлов

Многие популярные npm-пакеты используют "barrel-файлы" для предоставления единого файла, который реэкспортирует другие модули. Например:

@acme/ui/index.ts
export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

Это позволяет потребителям пакета использовать именованные экспорты в одной строке:

import { Button, Slider, Dropdown } from '@acme/ui';

Хотя сборщики понимают эти barrel-файлы и могут удалять неиспользуемые реэкспорты (называемые "устранением мертвого кода"), этот процесс включает разбор/компиляцию всех реэкспортируемых файлов. В случае опубликованных библиотек некоторые npm-пакеты поставляют barrel-файлы, которые реэкспортируют тысячи модулей, что замедляет время компиляции. Эти библиотеки рекомендовали babel-plugin-transform-imports для избежания этой проблемы, но для пользователей SWC ранее не было поддержки. Мы добавили новую встроенную в Next.js трансформацию SWC под названием modularizeImports.

Эта новая настройка включает трансформацию SWC, которая изменяет ваши операторы импорта на основе определенного шаблона. Например, приведенный выше код для использования трех компонентов будет автоматически преобразован в использование прямых импортов без необходимости ручного написания этого кода разработчиком:

// До (с barrel-файлом)
import { Button, Slider, Dropdown } from '@acme/ui';
 
// После (с модульными импортами из плагина)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

Эта трансформация возможна с опцией modularizeImports в next.config.js:

next.config.js
module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
};

Использование этой трансформации с @mui/icons-material или lodash позволяет пропустить компиляцию неиспользуемых файлов. Узнать больше.

Посмотреть демонстрацию в действии.

Легковесная Node.js среда выполнения для Edge, теперь стабильная для API-роутов

Edge Runtime в Next.js использует строгое подмножество API Node.js (таких как Request, Response и других), которые совместимы с платформами Edge-вычислений, такими как Vercel, или при самостоятельном хостинге. Эти API работают везде, включая браузер, позволяя разработчикам изучить их один раз и писать везде.

pages/api/hello.ts
// Префикс "experimental-" больше не нужен
export const config = {
  runtime: 'edge',
};
 
export default function handler(req: Request) {
  return new Response('Hello World');
}

Next.js Middleware уже по умолчанию использует эту легковесную edge среду выполнения для лучшей производительности. Поскольку Middleware может выполняться перед каждым запросом в вашем приложении, наличие легковесной среды выполнения критически важно для обеспечения низкой задержки. В Next.js 12.2 мы добавили возможность опционально использовать эту среду выполнения для API-роутов.

С версией 13.1 Edge Runtime в Next.js теперь стабилен для API-роутов. При самостоятельном хостинге Middleware и API-роуты, использующие Edge Runtime, по умолчанию будут работать как однoрегиональная рабочая нагрузка в рамках next start. На Vercel Next.js Middleware и API-роуты развертываются глобально с использованием Vercel Edge Functions для минимально возможной задержки. Vercel Edge Functions также теперь общедоступны.

Улучшения Turbopack

После выпуска Turbopack в альфа-версии с Next.js 13 мы сосредоточились на улучшении надежности, добавлении поддержки наиболее востребованных функций и определении планов для плагинов и использования в других фреймворках.

С момента выхода Next.js 13.0.0 Turbopack:

  • Поддерживает PostCSS, включая Tailwind CSS
  • Поддерживает next/image
  • Поддерживает @next/font (Google Fonts)
  • Поддерживает загрузку CSS из динамических операторов import()
  • Поддерживает source maps CSS (спасибо @ahabhgk за их вклад)
  • Улучшена обработка ошибок в оверлее ошибок next dev
  • Улучшено использование памяти
  • Улучшена поддержка CSS-модулей
  • Улучшен алгоритм чанкинга для обновлений HMR
  • Улучшена надежность source maps HMR

Мы благодарим Evan You и сообщество Vite за их отзывы и вклад в обеспечение максимальной точности бенчмарков Turbopack. Мы работали вместе с командой Vite для проверки последних бенчмарков Turbopack и внесения многочисленных улучшений в нашу методологию тестирования.

В результате этого сотрудничества мы теперь используем более точную метрику, которая включает время, затраченное на механизм обновления React. Мы смогли улучшить время React Fast Refresh на 30ms в Turbopack, а также в Next.js 13.1 на webpack. Мы также добавили новый бенчмарк для использования Vite с SWC, который показывает улучшенную производительность по сравнению с использованием Vite по умолчанию с Babel. Посмотрите обновленные бенчмарки или прочитайте о методологии тестирования.

Попробуйте альфа-версию Turbopack сегодня в Next.js 13 с next dev --turbo. Если у вас есть какие-либо отзывы, сообщите нам на GitHub Discussion.

Продвинутый Middleware в Next.js

Благодаря вашим отзывам мы делаем Next.js Middleware более мощным, чем когда-либо. С версией 13.1 вы теперь можете возвращать ответы из Middleware, а также устанавливать заголовки в запросе.

Эти улучшения API предоставляют вам новую гибкость для настройки каждой части жизненного цикла маршрутизации Next.js. Опция конфигурации experimental.allowMiddlewareResponseBody в next.config.js больше не требуется.

Теперь вы можете легче устанавливать заголовки в запросе, а также отвечать напрямую без необходимости rewrite или redirect:

middleware.ts
import { NextResponse } from 'next/server';
 
export function middleware(request: Request) {
  // Проверка доступа пользователя...
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'Unauthorized' });
  }
 
  // Добавление нового заголовка, это изменит входящие заголовки запроса
  // которые вы можете читать в getServerSideProps и API-роутах
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');
 
  return NextResponse.next({
    request: {
      // Применение новых заголовков запроса
      headers: requestHeaders,
    },
  });
}

Узнайте больше о продвинутом Middleware в Next.js.

Другие улучшения

Сообщество

Next.js — это результат совместной работы более 2400 отдельных разработчиков, отраслевых партнеров, таких как Google и Meta, и нашей основной команды в Vercel. С более чем 3,6 миллионами загрузок npm в неделю и 97,900+ звезд на GitHub, Next.js является одним из самых популярных способов создания веб-приложений.

Присоединяйтесь к сообществу на GitHub Discussions, Reddit и Discord.

Этот релиз был создан благодаря:

А также вкладу: @aarnadlr, @aaronbrown-vercel, @aaronjy, @abayomi185, @ademilter, @adictonator, @adilansari, @adtc, @alantoa, @aleksa-codes, @alfred-mountfield, @alpha-xek, @andarist, @andykenward, @anujssstw, @artdevgame, @artechventure, @arturbien, @aziyatali, @bennettdams, @bertho-zero, @blue-devil1134, @bot08, @brkalow, @brvnonascimento, @chanceaclark, @chibicode, @chrisipanaque, @chunsch, @colinking, @craigwheeler, @ctjlewis, @cvolant, @danmindru, @davidnx, @delbaoliveira, @devvspaces, @dtinth, @ducanhgh, @duncanogle, @ethomson, @fantaasm, @feugy, @fomichroman, @gruz0, @haschikeks, @hughlilly, @idoob, @iiegor, @imranbarbhuiya, @ingovals, @inokawa, @ishaqibrahimbot, @ismaelrumzan, @jakemstar, @janicklas-ralph, @jaredpalmer, @jaykch, @jimcresswell, @joliss, @josephcsoti, @joshuaslate, @joulev, @jueungrace, @juliusmarminge, @karlhorky, @kikobeats, @kleintorres, @koenpunt, @koltong, @kosai106, @labyrinthitis, @lachlanjc, @laityned, @leerob, @leoortizz, @lorenzobloedow, @lucasassisrosa, @m7yue, @manovotny, @marcus-rise, @matthew-heath, @mattpr, @maxleiter, @maxproske, @meenie, @mmaaaaz, @mnajdova, @moetazaneta, @mrkldshv, @nathanhammond, @nekochantaiwan, @nfinished, @niedziolkamichal, @nocell, @notrab, @nuta, @nutlope, @obusk, @orionmiz, @peraltafederico, @reshmi-sriram, @reyrodrigez, @rightones, @rishabhpoddar, @saseungmin, @serkanbektas, @sferadev, @silvioprog, @sivtu, @soonoo, @sqve, @steven-tey, @sukkaw, @superbahbi, @teobler, @theevilhead, @thomasballinger, @timeyoutakeit, @valentinh, @ws-jm, @wxh06, @yasath, @yutsuten и @zekicaneksi.