🦜 on the web

Next.js анонсировал поддержку Node.js для middleware!

В версии v15.2 canary появился новый флаг experimental.nodeMiddleware, который позволяет использовать runtime: 'nodejs' в middleware. Это значит, что теперь можно использовать Node.js API в middleware, избавляясь от ограничений, которые были связаны с совместимостью с edge runtime.

Кроме того, команда Vercel полностью переработала свою систему middleware, чтобы поддерживать множественные среды выполнения и запускать их на новой технологии — Fluid Compute. Это более экономичный способ запуска serverless-функций, что делает работу с middleware ещё эффективнее.

Подробнее:
Pull Request на GitHub
Блог Vercel про Fluid Compute

🎉 Результаты розыгрыша:

Победитель:
1. sl (@theslvr)

Проверить результаты

Розыгрыш билета на Podlodka React Crew. Итоги 07.02.25 утром

🚀 FT + TBD = Доставка фич без стресса

Выступлю с докладом о Feature Toggles + Trunk-Based Development в связке с Flipt и React. Разберём, как эти техники помогают фронтендерам доставлять фичи быстрее и безопаснее.

📅 Когда: 15 февраля (суббота)
⏰ Время: 11:00 – 12:00
🎤 Спикер: Роман Титов

Мой доклад — часть Podlodka React Crew, недельной конференции с экспертами, которая стартует 10 февраля.

От меня розыгрыш билета и если кому нужен промокод, то опубликую его в комментариях.

Два интересных МРчика в canary Next.js залетело.

Первый — experimental.useCache. Добавляет флаг, позволяющий использовать 'use cache' без выбора experimental.dynamicIO. Вместе с этим МР залетела проверка на export const runtime = 'edge' во время компиляции с включенным useCache.
Напомню, что dynamicIO позволяет во время билда закэшировать данные, чтобы не делать их выборку во время рендера серверных компонентов.

Второй — Обнаружение медленных модулей для вебпака. В комменты добавлю пример вывода.

При включении experimental.slowModuleDetection:

• Отслеживает время сборки каждого модуля
• Сообщает о модулях, которые превышают настраиваемый временной порог
• Показывает визуализацию дерева зависимостей медленных модулей.
• Помогает разработчикам выявлять узкие места производительности в процессе сборки

Спасибо здравому смыслу, всем причастным -- можно будет запретить енамы, и то, что не в спеке через конфиг в ТСе.

У меня гореть с енамов начало, когда я работал в монорепе. Нельзя было просто юзать типы с енами, нужно было их сначала собрать, прежде чем шарить по аппам. После гореть начало, когда кодген пробовали. Енам не равен енаму, ладно, если у вас есть контроль над openapi, но если нет, то будет создаваться другой енам, но со схожим наполнением, что потребует финты ушами, чтобы заткнуть ТС.

upd: TypeScript enums: use cases and alternatives

Вот так вот без анонсов, просто вкинули релиз tailwindcss 4.0

Как-то я уже шарил ссылку на курс по ИИ от майкрософт для начинающих, теперь вот пошарю обновленный курс LLM с учетом текущего развития технологий.

https://github.com/mlabonne/llm-course

В React добавляют компонент <ViewTransition> для View Transition API, а Next.js добавляет флаг experimental.viewTransition и возможность уже использовать в 15.2 canary 4.

Подробнее в этом PR

Интересно изучать такие пулреквесты. react.dev перевели на React 19, с включенным React compiler и обновили next.js до 15 версии.

Чем интересно? Какие изменения были внесены, какие комментарии оставили — увидеть подводные камни.

PR содержит простые изменения в типах и работе с свг, но есть интересные комментарии, связанные с типами, что говорит нам о том, что экосистема никак не реагирует на появление React 19 и многие авторы библиотек не спешат добавлять поддержку.

{/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
                
{/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}

https://github.com/aidenybai/bippy

Автор react-scan и million выложил инструмент, с помощью которого сделан react-scan. Bippy дает доступ к внутрянке реакта притворяясь "реакт девтулзами", тем самым предоставляет доступ к Fiber и другим внутренним компонентам.

Демо

Lee Robinson выпустил пост о директиве 'use cache' с дискасом о том, почему такой API дизайн. В посте разбираются примеры как использовать.

Lee отвечая на вопрос, почему все же директива, а не функция, ссылается на компилятор и замыкания. Т.к кэш обычно работает по ключу, то если кэш будет реализован через функцию, то в замыкание может попасть как ключ, так и данные (аргументы функции), тем самым можно словить отравление кэша.

Директивы use cache достаточно для компилятора некста, чтобы правильно обработать замыкание и сформировать ключи кэша, а если делать это функцией cache() то все это нужно делать руками, что скорей всего приведет к ошибкам.

Китайская команда Qwen запустила свой чат с мощными возможностями: бесплатный доступ к сильным моделям вроде Qwen2.5-Plus и Turbo (до 1M токенов контекста). Есть поддержка загрузки документов, картинок и даже фича с отправкой запроса сразу нескольким моделям. В будущем обещают поиск и генерацию изображений. Цель проекта — рекламировать API и собирать данные для тюнинга, так что с приватностью не всё гладко. Проверить можно тут без VPN: https://chat.qwenlm.ai/

WebDev технологии и подходы 24 года

24 год стал временем для изучения современных подходов и инструментов в веб-разработке. От новых функций JavaScript до использования передовых CSS-технологий — каждая статья открывала новые возможности и решения, которые можно применить уже сегодня.

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

https://teletype.in/@popuguy/webdev-2024-by-popuguy

Next.js PR — unstable_rootParams()
Новый API unstable_rootParams предоставляет удобный способ доступа к [slug]. Например [lang] или [locale] Т.к эти пути в рамках лейаута статичны, то доступ через контекст избыточный.
Так же будет плагин, который генерит типы для параметров.

Next.js PR — experimental.newDevOverlay
Добавили фича флаг для нового дев оверлея. Пока флаг не включает отображение.

🧠 The useEffect Mind Virus Must Be Defeated

Почему стоит обновиться на React 19, даже если вы просто делаете SPA:

💡 Проблема: асинхронность и баги

В классическом подходе, как в примере с setTimeout, за 2000мс может произойти что угодно:
• Компонент может анмаунтиться.
• Могут измениться пропсы.
И самое страшное: код в setTimeout этого не узнает.

🛠 Решение: useOptimistic и useTransition

React 19 привносит новые хуки, которые упрощают работу с состояниями:
• Транзишины позволяют “задерживать” обновления через промисы, а React берёт на себя координацию. Это устраняет баги, рассинхронизацию UI, мерцания и другие проблемы.
• useOptimistic упрощает управление временными состояниями.

🎯 Зачем нужен useOptimistic?

1️⃣ Позволяет использовать await прямо в обработчиках, например, в onClick.
2️⃣ Избавляет от сложностей с состоянием промиса — меньше useState, useEffect и беспорядка в коде.
3️⃣ Обеспечивает только временное обновление интерфейса без создания долгосрочных состояний.

Ключевой инсайт:
С переходом на React 19 состояние после завершения транзишина автоматически возвращается к исходному — без лишнего кода и головной боли.

Новый React помогает устранить хаос в асинхронном коде. 🚀

after() позволяет планировать работу, которая будет выполнена после завершения ответа (или предварительной визуализации). Это полезно для задач и других сайд эффектов, которые не должны блокировать ответ, таких как логи и аналитика.

Его можно использовать в Server Components (включая generateMetadata), Server Actions, Route Handlers, и Middleware.

Метод waitUntil() ставит в очередь асинхронную задачу, которая должна быть выполнена в течение жизненного цикла запроса. Он не блокирует ответ, но должен завершиться перед завершением функции.

Он используется для запуска любых действий, которые можно выполнить после отправки ответа, например, ведения журнала, отправки аналитики или обновления кэша, не блокируя отправку ответа.

https://nextjs.org/blog/next-15-1

В Next.js улучшили отладку ошибок, и я хочу отметить, насколько это полезно. Теперь можно быстрее находить источники проблем — будь то терминал, браузер или дебаггеры.
Что впечатлило:
• Улучшенные сорс-мапы. Использование свойства ignoreList позволяет скрывать стектрейсы внешних зависимостей, делая акцент на коде приложения. Это невероятно удобно для понимания, где именно что-то пошло не так.
• Свернутые стектрейсы. В терминале и браузере стектрейсы зависимостей скрыты по умолчанию, оставляя только то, что нужно. Но при необходимости можно раскрыть скрытые фреймы. Это выравнивает вывод ошибок между терминалом и браузером, что упрощает работу.
• Профилирование. Скрытые фреймы теперь игнорируются и в профилировщиках браузера. Это позволяет точнее анализировать производительность своего кода без “шума” от сторонних библиотек.
• Edge Runtime. Логи ошибок теперь содержат полный стектрейс, а не только текст ошибки.

Пример до/после наглядно показывает, как много шума убирается, и насколько проще стало читать ошибки.

Tailwind: спасение от хаоса стилей и свобода быть продуктивным

Давайте начистоту: ручное написание CSS — это реликт прошлого. Вы любите создавать файлы стилей? Вручную прописывать классы, мучительно раздумывать над их названиями? Вы фанатеете от SMACSS, BEM или OOCSS? Если да, то, возможно, вам пора пересмотреть свои подходы к работе.

Tailwind — это как глоток свежего воздуха после лет, проведённых в болоте Sass, линтеров и бесконечных медитаций на тему “как правильно организовать стили”. Зачем мне вообще думать об этом? Я разработчик, моя задача — создавать интерфейсы, которые работают и выглядят шикарно, а не бороться с CSS.

С Tailwind всё просто. У тебя есть автокомплит, у тебя есть систематизированные классы, которые идеально ложатся друг на друга, как кирпичи в идеальной кладке. Нужно что-то темизировать? Да, это встроено. Нужно расширить тему? Легко. Брендирование? Два движения клавиш, и готово. И что самое важное: это не превращает твой проект в свалку кастомного кода.

Теперь поговорим про ту чепуху, от которой я отказался навсегда. Sass. Зачем мне эта надстройка, если у меня есть Tailwind? Окей, кому-то нравится писать переменные и функции, но мне это не нужно. Мне нужно работать быстро, а не думать, как организовать миксин.

BEM, SMACSS и прочие “системы”. Знаете, что это такое? Это костыли, которые пытались сделать CSS управляемым, пока не появился Tailwind. Эти правила уже мертвы, просто их никто не похоронил.

И последнее. build-step для Sass? Вы серьёзно? Вы хотите замедлять разработку ради того, чтобы ещё и билдить стили? Я хочу результат. Tailwind даёт мне этот результат. Может, это и звучит резко, но я больше не хочу видеть Sass в своём проекте.

Tailwind — это про фокус на продукте. это про эффективность. Это про избавление от мусора, который отвлекает. Это про работу, где ты думаешь о дизайне и продукте. Это про возможность быть эффективным, не отвлекаясь на технические костыли. Всё остальное — это просто вчерашний день.

https://react.dev/blog/2024/12/05/react-19

https://github.com/facebook/react/blob/main/CHANGELOG.md

* Actions / Server Actions / useActionState()
* <form> + progressive enhancement compatible hooks
* <Context> instead of <Context.Provider>
* The use() hook
* Custom Elements
* Ref as standard props and ref callbacks cleanup functions
*Meta tags handling
*Resource preloading
*Better errors and hydration diff reporting

Next.js Canary — authInterrupts APIs
Позволяет использовать forbidden и unauthorized

Next.js Canary — CSS chunking
Позволяет выключить чанки css и, я так понимаю, сделать один css файл

Undeprecate revalidate APIs and rename expire APIs

Походу рано хоронить. expirePath APIs помечены как unstable

Раз все так сейчас полюбили адвент календари — ловите мой любимый.

Сам сайт собирает лучшие практики в HTML, скопированные с реальных сайтов.

Оптимизация загрузки ассетов

Когда дело доходит до ускорения загрузки страниц, фронтендеры любят выжимать максимум из доступных технологий. Некоторые из них уже на слуху, другие только набирают популярность. Сегодня разберем проверенные методы и новые подходы.

1. <link rel="preload">: проще некуда

Preload позволяет подгружать критически важные ресурсы заранее. Это гибкий и простой в реализации способ ускорения загрузки, который отлично подходит для изображений, шрифтов и скриптов.

👉 Пример:
Подгружаем шрифт, необходимый для отображения интерфейса:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Скрипты:

<link rel="preload" href="/js/critical.js" as="script">

Изображения:

<link rel="preload" href="/images/banner.jpg" as="image">

Почему лучше, чем HTTP/2 Push?
Хотя серверный пуш позволяет загружать ресурсы заранее, настройка сложна и требует поддержки на уровне бэкенда. Preload, напротив, легко внедрить прямо в HTML и управлять его использованием.

2. <link rel="prefetch">: готовим ресурсы для будущего

Если известно, куда пользователь может пойти дальше, то prefetch поможет заранее подгрузить ресурсы, которые понадобятся. Это особенно полезно на страницах с предсказуемыми переходами.

👉 Пример:
На главной странице предзагружаем ассеты для “О нас”:

<link rel="prefetch" href="/about.html">
<link rel="prefetch" href="/css/about.css">

3. DNS Prefetch и Preconnect: ускоряем внешний контент

Когда ресурсы грузятся с внешних источников (шрифты, аналитика, изображения), можно сократить задержки с помощью dns-prefetch и preconnect:
• dns-prefetch выполняет поиск DNS ещё до первого запроса.
• preconnect заранее устанавливает соединение с сервером, включая DNS, TLS и TCP handshake.

👉 Пример:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.googleapis.com" crossorigin>

Это особенно важно для сторонних библиотек, таких как Google Fonts или CDN-ресурсы.

4. Паттерн загрузки при hover на ссылке

Динамическая загрузка ресурсов при наведении курсора на ссылку улучшает UX и ускоряет переходы.

👉 Как сделать?

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = link.href;
    document.head.appendChild(prefetchLink);
  });
});

5. Speculation Rules: свежий взгляд на оптимизацию

Для меня это стало настоящим открытием. Новая технология от команды Chrome позволяет браузеру “угадывать”, какие ресурсы нужно подгрузить в первую очередь.

👉 Пример:

<script type="speculationrules">
{
  "prefetch": [
    {"source": "list", "urls": ["/about", "/contact"]}
  ]
}
</script>

Хотя это пока экспериментальная фича, её возможности впечатляют. Жду, когда поддержка появится и в других браузерах, чтобы использовать её шире.

Заключение

Эти техники хорошо работают вместе:
• Используйте preload для критических ресурсов страницы (просто и эффективно).
• Подгружайте будущие страницы через prefetch и паттерны на основе hover.
• Добавьте dns-prefetch и preconnect для внешних ресурсов.
• Экспериментируйте с Speculation Rules, чтобы быть на шаг впереди.

🕹 Пробую делать игру на Godot и Unity: опыт для новичка

Решил попробовать сделать простую игру и заодно сравнить два движка: Godot и Unity. Для гугления использовал бесплатные AI типа Perplexity и DeepSeek, потому что у них нет ограничений по региону, и количеству токенов.

Godot: дружелюбно и по делу

Установка, запуск, первые шаги — всё супер. Не надо никакой IDE, автокомплит из коробки, интерфейс не перегружен. Если цель просто попробовать что-то быстро собрать — это идеальный вариант.
Но вот с новой версией (4) справляться сложнее, нейросети вообще живут в прошлом.

Unity: монстр, который требует времени

После Godot переход на Unity ощущается как прыжок с велосипеда на грузовик. Движок кажется монструозным. Без туториалов можно часами кликать по интерфейсу и ничего не добиться. Обязательно нужна сторонняя IDE с настроенным автокомплитом и поддержкой C#, например, Rider или Visual Studio.

И что раздражает:
• Запускается долго. Даже на SSD и 32 ГБ DDR5 приходится ждать.
• Для простых вещей, вроде кнопки, приходится копаться в куче настроек.

Резюме

Если вы новичок и хотите быстро вкатиться — Godot ваш выбор. Unity лучше для серьёзных проектов, но чтобы освоить его, надо потратить уйму времени и терпения.

Осталось потестить Unreal Engine и понять, где та самая “золотая середина”.

Next.js PR - CSS inlining (experimental)

Вводится экспериментальный флаг inlineCSS.

Поддерживается Webpack и Turbopack на App Router.

• Вместо тегов <link> будут генерироваться теги <style>.
• Приоритет/дедупликация CSS поддерживается React 19 автоматически.
• Флаг применяется ко всем ресурсам CSS на данный момент.
• Оптимизация LCP/FCP для веб-сайтов использующие атомарный CSS как Tailwind.
• Флаг является экспериментальным, не рекомендуется использовать в производстве.

Наткнулся на аналог (если можно так сказать) chatgpt — DeepSeek.

Можно использовать аналог gpt o1 с рассуждениями — Deep Think . Дают 50 использований в день, если я правильно понял.

👀 Ссылка — нет блокировки по РУ региону и можно через гугл акк.

React Scan detects performance issues in your React app.

Новый инструмент для отслеживания ререндеров и проблем с производительностью приложений на Реакте.

На видео от автора, можно увидеть как работает на примере слака и чатгпт (будет в комментах).

Разница Suspense и Suspense + PPR. Экспериментальная фича в Next.js canary

Информация о книге статична (генерируется во время сборки)

Компонент Rating использует cookie() , поэтому, когда мы его добавляем, он отключает всю страницу для динамического рендеринга (генерируемого во время запроса)

PPR позволяет нам сохранять статичную информацию о книге и отображать рейтинг только динамически.

Появилось README для пакета react-server.

react-server — пакет для создания кастомных рендеров для стрима реакт компонентов.

Сам пакет содержит две имплементации. Первая это Fizz, вторая Flight.

Fizz — рендерит компоненты на сервере, которые будет ререндерится на клиенте.

Flight — рендерит серверные компоненты реакт, которые не ререндерятся на клиенте.

Далее в ридми идет описание использования этих имплементаций. Для Fizz она пока находится в разработке.

По Flight показаны доступные методы и примеры использования, плюс объяснения зачем нужны директивы 'use client', 'use server'.

Нужный контент для авторов желающих добавить поддержку RSC.

Есть что-то особенно раздражающее в том, как Sass может неожиданно поломаться на ровном месте из-за мелочей: пути, импорты, устаревшие функции… Казалось бы, просто стили, но нет — приходится лезть в настройки, поднимать ченджлоги, чтобы очередная версия внезапно не отправила всё к чертям собачим. Всё это отвлекает от реальных задач и отнимает кучу времени.

Кто-то там говорил, что Sass ускоряет разработку? 🙃

Попытка сделать стриминг SSR с использованием RSBuild

Решил попробовать сделать стриминг SSR на dev-сервере с RSBuild для замены вебпака в рабочем проекте для улучшения скорости сборки и DevEx. Задача показалась простой, но пришлось попотеть. Вот как это было.

1️⃣ Базовый поток стриминга

Начал с того, чтобы просто отправить поток рендеринга с помощью renderToPipeableStream. Код вроде стандартный:

export async function streamRender(req, res, serverAPI) {
  let didError = false;

  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(
    <React.StrictMode>
      <StaticRouter location={req.url}>
        <App />
      </StaticRouter>
    </React.StrictMode>,
    {
      onShellReady() {
        res.statusCode = didError ? 500 : 200;
        res.setHeader("Content-Type", "text/html");
        pipe(res);
      },
      onError(error) {
        didError = true;
        console.error("Stream error:", error);
      },
    }
  );
}

🛠 Проблема: Контент стримился, но обертка HTML не подтягивалась, что приводило к разрыву структуры. Решил, что нужно более четко передать HTML-шаблон.

2️⃣ Разделение шаблона на части

Следующий шаг — добавить HTML-шаблон из RSBuild. Я сделал так, чтобы <!--app-content--> заменялся стримом:

const template = await serverAPI.environments.web.getTransformedHtml("index");
const [header, footer] = template.split("<!--app-content-->");

После этого изменил onShellReady и добавил header и footer:

res.write(header);
pipe(res);
res.write(footer);

👀 Результат: HTML выводился полностью, но возникла ошибка гидратации из-за несовпадения структуры, поскольку Suspense автоматически не обрабатывал fallback для ожидания загрузки компонентов.

3️⃣ Поддержка Suspense и проблема асинхронного pipe

Чтобы настроить корректный SSR с Suspense, который используется внутри App как обертка над <Routes>, где роуты лейзи импортятся, попробовал следующее:

const { pipe, abort } = ReactDOMServer.renderToPipeableStream(
  <React.StrictMode>
    <StaticRouter location={req.url}>
        <App />
    </StaticRouter>
  </React.StrictMode>,
  {
    onShellReady() {
      res.statusCode = didError ? 500 : 200;
      res.setHeader("Content-Type", "text/html");

      res.write(header);
      pipe(res);
      res.write(footer); // Закрывающие теги добавляются сразу после header из-за асинхронности pipe
    },
    onError(error) {
      didError = true;
      console.error("Stream error:", error);
    },
  }
);

🤔 Текущая проблема: pipe асинхронный, поэтому закрывающие теги (footer) записываются сразу после header, что нарушает структуру и рендеринг. Нужно будет дальше разбираться с этим моментом, чтобы гарантировать последовательность вывода в pipe.

Буду еще пытаться и попробую сделать пример в репу rsbuild. Чтобы еще полностью соответствовать с рабочим проектом потребуется интеграция с loadable-components.

пока гром не грянет, мужик не перекрестится

очень правильное движение, чтобы не происходило таких вот неприятных ситуаций (1) (2)

upd: Немного контекста. В первой ссылке (заголовок) ломался shadcn из-за иконок, потому что там не был указан 19 реакт.
Shadcn локнут был на radix icons. Теперь же пошло движение на кастомную интеграцию с любыми иконками.

Оказывается, есть бест практисы по работе с gpt.

https://platform.openai.com/docs/guides/latency-optimization#use-predicted-outputs

Один из них. Predicted Outputs.
Например, можно попросить модель переписать код, передавая существующий контент в качестве прогноза, что значительно уменьшит задержку ответа.

поддерживается только моделями серий GPT-4o и GPT-4o-mini.

Не знал, что яндекс проводит такие исследования

https://yandex.ru/company/researches/2023/frontenders

скуфы за sass

Возраст is not one of 20 years old and under, 20-29 years old, 30-39 years old

4.6к из 6.8к

Про директиву "use cache"

Есть два(три) стула три подхода, как кэшировать данные.

Динамический
Для критической динамики, например дешборды.

Статический
Когда нет необходимости в использовании динамичной функциональности. Все запросы будут закэшированны.

Частичный
Можно кэшировать отдельные части страницы, и миксовать с динамическим получением данных.

Это экспериментальный подход, о котором можно посмотреть в видео с конференции.

https://nextjs.org/blog/our-journey-with-caching

Пошла конфа. Слушаем через нейроперевод в Яндекс браузере
https://youtu.be/WLHHzsqGSVQ

Посмотрел я тут состояние фронтенда на 2024 год...

Лучше бы не смотрел. По этой статистике можно считать, что с 2017 года никаких изменений не произошло. Все также пользуются moment, lodash, redux, react context, axios, npm, sass, css-in-js, jest, cypress, create-react-app.

Хотя бы тайпскрипта стало больше, на этом спасибо. Ладно, не только на этом, antd меньше стали пользоваться, но все еще есть bootstrap...

https://tsh.io/state-of-frontend/

Разница поведения кэша в 14 и 15 версии Next.js

Чатовое.

@vordgi — Разбирал по коммитам и они на самом деле многое не указали в релизе.

https://habr.com/ru/articles/852352/

Вышел стабильный релиз Next.js 15

https://nextjs.org/blog/next-15

https://nextjs.org/blog/next-15-rc2

* @next/codemod upgrade: Easily upgrade to the latest Next.js and React versions.

* Turbopack for development: Performance improvements and Next.js 15 stability target.

* Async Request APIs (Breaking): Incremental step towards a simplified rendering and caching model.

* Server Actions: Enhanced security with unguessable endpoints and removal of unused actions.

* Static Indicator: New visual indicator shows static routes during development.

* next/form: Enhance HTML forms with client-side navigation.

* next.config.ts: TypeScript support for the Next.js configuration file.

* instrumentation.js (Stable): New API for server lifecycle observability.

* Development and Build improvements: Improved build times and Faster Fast Refresh.

* Self-hosting: More control over Cache-Control headers.

* Linting: Added support for ESLint 9.

Фронтендер на java конференции.

Приходите на стенд, у нас тут базар, можно поторговаться за мерч.

Route-level middlewares (Request Interceptors)

→ defined in an interceptor.ts file
→ can be placed anywhere in app dir
→ can be nested
→ supports Node.js runtime
→ works with server actions
→ opt pages into dynamic rendering
→ doesn't replace middleware.ts

Новый экспериментальный пакет react-compiler-runtime

Теперь React Compiler поддерживает прошлые версии. Ранее работал только с 19 версией. Теперь минимально поддерживаемая версия 17.

// babel.config.js
const ReactCompilerConfig = {
  target: '18' // '17' | '18' | '19'
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig],
    ],
  };
};

React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra react-compiler-runtime package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.

Leerob снизошел на гайд 😳😱🙃

🙃😱

Server Actions переименовывают в Server Functions — сделано для лучшего понимания терминологии.

React DevTools 6.0 — обновление еще не появилось на площадках (upd).

cookies(), headers() и searchParams — Динамические апи будут асинхронными в next.js 15.

https://zod.fyi/

What in Zod's name? — инструмент визуализации zod errors.

Появился он так — одни челы, делали кодген тс сдк для одной компании. В зависимости от сложности схемы Zod, сообщение об ошибке может содержать стену текста JSON. Для удобства визуализировать и анализировать был придуман такой инструмент.

npkill

Эта либа перечисляет все каталоги node_modules в системе, а также место, которое они занимают. Можно выбрать, какие из них удалить, чтобы освободить место.

Deno 2.0 RC

Наверное, самое важное изменение, это поддержка npm экосистемы.

Это включает:
* npm-packages;
* npm workspaces;
* cjs

Можно еще сказать про @std либу, которая теперь полностью stable. Условно, вам теперь не нужно устанавливать дополнительные пакеты по типу lodash, jest, etc.

В приложенном изображении показывается, что не нужно устанавливать лишнее и заниматься настройкой eslint, prettier, ts — все уже есть из коробки.

Еще из интересного, deno теперь может запускать примеры в JSDoc, а не только проверять их.

С остальными изменениями можно ознакомиться в посте.

PR добавляющий CLI в Next.js 15 для автоматического апгрейда зависимостей до стабильного, RC, или canary.

Partial Fallback Prerendering (PFPR)

Новый концепт в системе частичного пререндера.

Проблема: при роутинге на страницу .../[articleId]/page.tsx и она не статичная (редко используется), то TTFB будет высокое, что будет приводить к медленной загрузки страницы.

С этим PR, используется особенность <Suspense /> приостанавливать работу по середине рендера и возобновлять его.

В коде ниже, статичный контент сразу придет в ответе на динамичный роутинг, но секция обернутая в <Suspense /> догрузится уже стримом. Тем самым исправляя проблему с TTFB.

Это если я правильно понял принцип работы.

// /app/users/[userID]/page.jsx
import { Suspense } from 'react'

function Profile({ params }) {
  const { userID } = params
  return <div>Hello {userID}!</div>
}

export default function ProfilePage({ params }) {
  return (
    <div>
      <h1>User Profile</h1>
      <Suspense fallback="Loading...">
        <Profile params={params} />
      </Suspense>
    </div>
  )
}

К посту выше.

В блоге Vercel вышла статья о React 19. В ней подробно обозревают, что нужно знать, чтобы быть готовым к обновлению.

Освежить знания по нововведениям с помощью примеров кода и инфографики можно перейдя по ссылке:

https://vercel.com/blog/whats-new-in-react-19

Next.js 15 может быть выпущен в ближайшее время, не дожидаясь, пока React 19 станет стабильным, и не требуя React 19 для pages router.

Релиз будет включать в себя основные улучшения Turbopack.

Rspack достиг версии 1.0, охватывая большинство API и функций webpack.

• В Rspack 1.0 добавлены важные функции и оптимизации, включая более высокую производительность, лучшую совместимость и меньший размер пакета.

• Rspack поддерживает Module Federation 2.0.

• Rspack 1.0 совместим с webpack v5 и поддерживает современные веб-стандарты.

• В будущем Rspack будет развиваться на основе webpack API для соответствия потребностям современной веб-разработки.

Rsnext

команда Rspack работает над тем, чтобы Next.js работал под их сборщиком Rust Rspack.

Попробовать можно заменой алиаса:

"dependencies": {
    "next": "npm:[email protected]",
    "react": "19.0.0-rc.0",
    "react-dom": "19.0.0-rc.0"
  },

Открыл для себя архив конференций с GitNation