🚀 Next.js 16.4 научил ИИ-агента искать лишний JavaScript

В Next.js 16.4 появился next-bundle-optimizer: навык для ИИ-агента, который разбирает граф модулей сборщика Turbopack и ищет код, попавший в бандл зря.

Пример: тяжёлый компонент обёрнут в lazy(), но другой модуль импортирует его напрямую, и он всё равно грузится сразу. Агент прослеживает такие цепочки и предлагает, где их разорвать.

npx skills add vercel/next.js --skill next-bundle-optimizer

Затем в агенте вызываете /next-bundle-optimizer. По умолчанию он только сообщает о проблемах, а /next-bundle-optimizer fix применяет правки и сравнивает размер до и после.

Учтите: нужен Turbopack, без его графа модулей анализ не работает. С Next.js 16 это сборщик по умолчанию.

В Vercel агент так убрал почти 2 МБ сжатого JS на v0 и vercel.com, и список его находок стоит посмотреть.

👍 - если было полезно

👉 @sWebDev

🚀 Tailwind или StyleX: что меняет реальная миграция

StyleX: система стилей от Meta. Стили пишутся объектами в TypeScript и при сборке превращаются в статический CSS.

Разработчик сделал 20 компонентов на Tailwind и переписал их на StyleX с новым пропом sx={}. Кнопка с вариантами выглядит так:

return (
  <button sx={[styles.base, styles[variant], styles[size]]}>
    {children}
  </button>
);

Кода стало вдвое больше (3143 строки против 1568), а размер CSS и время сборки почти не изменились. Зато TypeScript ловил опечатки в токенах и неверные варианты до браузера. В Tailwind класс вроде bg-blue-60 может молча не сработать.

StyleX стоит рассмотреть для библиотеки компонентов с общими токенами и кучей вариантов. Но его публичная экосистема намного меньше, многое придётся писать самому.

В статье разобраны пять граблей миграции, от barrel-экспортов до порядка CSS-слоёв.

👍 - если было полезно

👉 @sWebDev

🎬 Демо-ролик, который пересобирается одной командой

Remotion позволяет писать видео как React-приложение. useCurrentFrame() отдаёт номер кадра, interpolate() превращает его в значение анимации, <Sequence> задаёт, когда идёт сцена. На выходе обычный MP4.

Так разработчик калькулятора на Next.js заменил запись экрана. Поля заполняются по заданным кадрам, данные лежат в мок-файлах. Изменился дизайн: правишь пару строк и рендеришь заново:

npx remotion render remotion/index.ts feature-walkthrough output/feature-walkthrough.mp4

Это для роликов, которые делаешь снова и снова. По его замерам первое видео быстрее записать с экрана, а со второго выигрывает Remotion.

Но есть подвох: каждый кадр рендерится как статичный компонент. useState, useEffect и localStorage там не работают, так что компоненты придётся переделать на props.

В статье ещё ролик «до и после» и видео, которое Claude Code собрал по одному промпту.

👍 - если было полезно

👉 @sWebDev

🔍 Значение в Vue поменялось, а экран нет

Достали поле из реактивного объекта в переменную, поменяли, а шаблон показывает старое. Ошибок нет, watch молчит, nextTick не помогает.

Дело в устройстве: reactive() отдаёт Proxy-обёртку, которая следит за парой «объект плюс имя свойства», а не за значением. После деструктуризации в переменной лежит обычное число без связи с прокси.

Выхода два: превратить свойства в ref через toRefs или не разбирать объект.

const { count } = toRefs(state)    // count.value связан с state.count в обе стороны
state.count++                      // либо просто не разбирать объект

С props то же самое. С Vue 3.5 разобранные props остаются реактивными, но только в <script setup>: это работа компилятора, в обычном JS связь рвётся.

В статье ещё shallowRef для таблиц на 50 000 строк, markRaw и ловушки computed и watch.

👍 - если было полезно

👉 @sWebDev

✨ Next.js 16.4: AI-агент сам убирает скелетоны при переходах

Знакомая картина: кликаешь по ссылке и видишь скелетон, пока грузятся данные. Возвращаешься на ту же страницу, и он снова там.

В Next.js 16.4 появился Skill next-partial-prefetching-optimizer, набор инструкций для вашего coding-агента. Вы словами описываете, что должно быть готово до клика.

Агент пишет Playwright-тест с хелпером instant(): тот проверяет, что видно ещё до прихода данных навигации. Потом агент правит кэширование и предзагрузку, пока тест не пройдёт. Тест остаётся в проекте и ловит регрессии в CI.

npx skills add vercel/next.js --skill next-partial-prefetching-optimizer

Важно, что Skill рассчитан на приложения, где уже включены Cache Components и Partial Prefetching (предзагрузка только переиспользуемых частей страницы).

В статье разбор на живом v0, AI-конструкторе Vercel, и в том числе почему первая версия раздула префетчи в 2,9 раза.

👍 - если было полезно

👉 @sWebDev

🛡️ Next.js: две критические уязвимости с выполнением кода на сервере

В августе команда фреймворка Next.js выпустила патчи v16.3.3 (Active LTS) и v15.5.24 (Maintenance LTS). Обе закрытые дыры позволяют запустить чужой код на сервере без авторизации.

Первая сидит в libheif, которую использует sharp при оптимизации картинок. Достаточно, чтобы Next.js обработал присланную злоумышленником AVIF-картинку.

Вторая касается серверов на Windows, где приложение использует и Pages Router, и App Router без Cache Components. Linux и macOS не затронуты, обходного пути нет.

npm install next@15.5.24  # for 15.5
npm install next@16.3.3   # for 16.3

Учтите: в этих версиях оптимизация AVIF просто отключена, пока исправление не придёт из upstream.

Если проект на 15.5 или 16.3 и lock-файл давно не трогали, самое время проверить, какая там версия next.

👍 - если было полезно

👉 @sWebDev

✨ Пять строк, которые копировали в каждый проект на shadcn, стали пакетом

Проекты на shadcn (компоненты ставятся в код командой npx shadcn add) годами начинались с файла lib/utils.ts. В нём вручную собирали функцию cn для className из двух библиотек: clsx и tailwind-merge.

С сентября 2026 года cn живёт в отдельном пакете cn. Это замена twMerge(clsx(...)) с тем же API, так что вызовы в коде не меняются, а зависимость одна вместо двух.

import { cn } from "cn"

<div className={cn("flex items-center", className)} />

Компоненты shadcn теперь импортируют cn прямо из пакета, а npx shadcn init создаёт lib/utils.ts в одну строку.

Старые проекты не ломаются, но clsx и tailwind-merge сами из них не уйдут. Для этого в CLI есть команда migrate cn: она перепишет импорты и удалит старые пакеты, когда на них больше ничто не ссылается.

👍 - если было полезно

👉 @sWebDev

✨ shadcn научился ставить код из приватных репозиториев

CLI shadcn добавляет в проект готовые файлы из реестров (registry). С июня реестром мог быть любой публичный GitHub-репозиторий, теперь и приватный: внутренняя дизайн-система, наборы фич, правила для агентов.

Если вы залогинены в GitHub CLI (gh) и можете читать репозиторий, настраивать ничего не нужно:

pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit

Токен остаётся внутри gh и не попадает в процесс shadcn. Публичные репозитории по-прежнему читаются анонимно.

В CI без gh придётся задать GH_TOKEN или GITHUB_TOKEN. Авторы советуют fine-grained токен на один репозиторий с правом Contents: Read-only.

Команды list, search и view тоже работают с приватными реестрами, а учётные данные CLI берёт, только если анонимно репозиторий не прочитать.

👍 - если было полезно

👉 @sWebDev

🚀 Поиск с опечаткой по 100 000 товаров за 2 мс

KiaraDB это открытый поисковый движок в памяти для TypeScript и Java. Работает и в браузере, и на сервере.

Большинство JS-библиотек поиска, включая популярный Fuse.js, на каждый запрос перебирают все записи. Чем больше данных, тем медленнее поиск. KiaraDB делает работу заранее: вы описываете поля, загружаете записи и один раз вызываете store.prepare(). У каждого поля появляется свой индекс.

В бенчмарке автора поиск «wireles lamp» по 100 000 товаров занял 1,95 мс, у Fuse.js 422 мс. Замер сделан на одной машине, данные в основном синтетические.

npm install @kapoorlabs/kiara-ts

Подходит для каталогов и справочников, которые собирают один раз и опрашивают тысячи раз. Но данные здесь снимок: любое изменение требует пересборки, а на 100 000 записей она заняла 4,3 с и 489 МБ памяти.

В статье один store ищет шестью способами, от диапазонов дат до автодополнения.

👍 - если было полезно

👉 @sWebDev

✨ Markdown-редактор, который не ломает форму

Многие markdown-редакторы прячут ваш textarea и редактируют вместо него свой div. Настоящее поле остаётся пустым. Если на нём стоит required, браузер молча не отправит форму, а FormData и сервер получат пустую строку.

Библиотека markdown-text-editor не подменяет поле. Она ставит над ним панель кнопок, а печатаете вы прямо в textarea. Значение одно, синхронизировать нечего.

import MarkdownEditor from 'markdown-text-editor';

new MarkdownEditor('#content');

После этого required, FormData и серверная валидация работают как раньше. Это вариант для обычной формы с markdown-полем, например в приложении с серверным рендерингом.

Совместного редактирования и модели документа тут нет: для такого нужны ProseMirror или Lexical.

В статье ещё тулбар с выбором уровней заголовков и подключение в React без отдельной обёртки.

👍 - если было полезно

👉 @sWebDev