🪄 Один URL: модалка поверх списка и полноценная страница

В каталоге детали карточки удобно открывать поверх списка. Но если модалка живёт в useState, адрес не меняется. Ссылкой не поделиться, после reload остаётся список, а поисковик деталей не видит.

В Next.js App Router это решают Parallel Routes и Intercepting Routes. Модалка лежит в слоте @modal, который layout рисует рядом со страницей. Папка с префиксом (.) перехватывает обычный маршрут:

@modal/
  (.)events/
    [id]/
      page.tsx

При клике через Link адрес меняется на /en/events/123, а детали открываются поверх списка. При прямом заходе или reload перехвата нет, и рендерится обычная страница со своими metadata и canonical.

Слоту обязательно нужен default.tsx, который возвращает null. Без него при прямом заходе можно получить 404.

В статье ещё разобрано, как закрыть модалку и вернуться к списку с теми же фильтрами.

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

👉 @sWebDev

🛟 Angular 22.2: упавший шаблон больше не ломает страницу

Раньше ошибка при рендере шаблона уходила в глобальный ErrorHandler, а часть страницы оставалась недорисованной.

Новый блок @boundary ограничивает ущерб: если внутри что-то бросит исключение, Angular покажет вместо этой секции блок @error. Идея подсмотрена у React.

@boundary {
  <app-chart />
} @error (let err; retry = $reset; when isNetworkError(err)) {
  <p>{{ err.message }}</p>
  <button (click)="retry()">Retry</button>
} @error {
  <p>Something went wrong.</p>
}

Первый @error ловит сетевые ошибки и даёт повторить рендер через $reset, второй ловит всё остальное. С Resource API это удобно: value() при сбое загрузки бросает исключение, и проверять error() заранее не нужно.

Пока @boundary в статусе developer preview.

А ещё в статье Router Resources: данные маршрутов грузятся параллельно, а не цепочкой резолверов.

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

👉 @sWebDev

🧩 Страница в Angular, которая не знает про роутер

Обычно компонент страницы сам берёт userId из ActivatedRoute, зовёт UserService и рисует «Loading...». Переиспользовать такой компонент сложно, а для теста нужен роутер и мок сервиса.

Опция роутера withComponentInputBinding (есть с Angular 16) сама записывает данные маршрута в инпуты компонента с тем же именем:

provideRouter(routes, withComponentInputBinding())

Загрузку пользователя автор выносит в резолвер, то есть функцию, которая получает данные до перехода на маршрут. В компоненте остаётся одна строка с input.required<User>().

Учтите, что роутер сверяет только имя ключа и имя инпута, а типы не проверяет. Если резолвер вернёт объект другой формы, всё скомпилируется. Автор советует общий интерфейс и интеграционный тест.

В статье разобрано, где здесь инверсия зависимостей и как показать лоадер, пока резолвер ждёт ответа.

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

👉 @sWebDev

🧭 Предзагрузка в TanStack Router, которая тихо ломается

В TanStack Router данные можно начать грузить в loader маршрута ещё до рендера, а компонент заберёт их из кэша TanStack Query. Но запрос при этом описан в двух местах:

// loader
await context.queryClient.ensureQueryData(
  dashboardQueryOptions(params.dashboardId, deps),
)

// component
const { data } = useSuspenseQuery(
  dashboardQueryOptions(params.dashboardId, { asOf }),
)

Если они разойдутся, ошибки не будет. Loader скачает лишнее, а компонент сделает второй запрос.

TkDodo предлагает собирать queryOptions один раз в новой функции маршрута context. Loader и компонент берут их оттуда (компонент через useRouteContext()), и разойтись им уже не в чем.

Учтите, что на момент написания статьи функция context ещё не была описана в документации.

Отдельно TkDodo объясняет, почему такой контекст не плодит лишних ререндеров.

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

👉 @sWebDev

🚀 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