Biome v3: новые правила линтинга для RSC с Turbopack в Next.js 15

[hannadev]

Biome v3 выходит с крутыми правилами линтинга именно под React Server Components в связке с Turbopack из Next.js 15. Это решает боли с проверкой серверного кода, где старые линтеры вроде ESLint тормозят или глючат на RSC. Теперь бандл летает, а код чистый без лишнего бойлерплейта.

Зачем это нужно? Turbopack на Rust ускоряет dev-сервер в 76% раз по сравнению с Webpack, но с RSC появляются новые паттерны - серверные функции без client-side state, строгие границы между сервером и клиентом. Biome v3 ловит эти нюансы на лету, интегрируется с Next.js без танцев с бубном. Разрабы тратят меньше времени на фикс ошибок и больше на фичи.

Что нового в Biome v3 для RSC

Biome v3 - это не просто линтер, а full-stack инструмент на Rust, который форматирует, линтит и проверяет типы быстрее ESLint в 10-20 раз. В связке с Turbopack он понимает специфику RSC: нет хуков вроде useState на сервере, только async/await для data fetching. Старые правила ESLint часто фейлят на этом - ругаются на missing dependencies или unused vars в серверных компонентах.

Представь: пишешь page.js в app router, Turbopack компилит мгновенно, а Biome сразу подсвечивает проблемы вроде client directive в server-only коде. В Next.js 15 Turbopack поддерживает RSC на 99%, так что линтинг должен быть таким же шустрым. Biome v3 добавляет правила, заточенные под Server Actions и Suspense boundaries, без ложных срабатываний.

Вот ключевые фичи для RSC:

• noClientHooks: Блокирует useState, useEffect в серверных файлах - сразу catch на этапе линтинга.
• rscBoundaryCheck: Проверяет правильность ‘use client’ директив, предотвращает утечки state на сервер.
• asyncServerFn: Валидирует Server Actions - аргументы serializable, нет DOM манипуляций.

Правило	Описание	Пример фикса
@biomejs/noServerClientMix	Запрещает микс client/server логики	Добавь ‘use client’ только где нужно
@biomejs/rscDataFetch	Рекомендует fetch в корне компонента	async function Page() { const data = await fetch... }
@biomejs/turbopackCompat	Оптимизирует импорты под Turbopack chunking	Избегай dynamic imports в RSC

Интеграция с Turbopack в Next.js 15

Turbopack в Next.js 15 - это killer-feature: dev сервер стартует на 76% быстрее, hot reload в миллисекундах, даже для монстров с тысячами компонентов. Но с RSC добавляется сложность - серверный бандл должен быть lean, без client-side bundle exposure. Biome v3 нативно работает с next.config.js, подхватывает Turbopack флаги вроде turboForceSwcTransforms.

Чтобы запустить: меняешь скрипт в package.json на next dev --turbo, добавляешь Biome в lint шаг. Он парсит RSC без SWC overhead, ловит circular deps, которые Turbopack иногда пропускает. В реальных проектах это спасает от endless compiling - помнишь баги в 15.2.2? Biome фиксирует их на fly.

Настройка простая:

1. npm i -D @biomejs/biome
2. npx biome init - генерит biome.json с RSC правилами.
3. В next.config.js: lint: { biome: true } - Turbopack подхватит.

Пример biome.json для RSC:

{
  "linter": {
    "rules": {
      "recommended": true,
      "react": { "recommended": true },
      "correctness": { "noServerClientMix": "error" }
    }
  }
}

Правила линтинга, заточенные под Server Components

RSC меняют игру: компоненты рендерятся на сервере, payload streaming через Suspense. Biome v3 имеет 50+ правил для этого - от noDomQueries (запрет querySelector в server code) до оптимизаций tree-shaking. С Turbopack это критично: лишний импорт раздувает chunks, замедляя PPR (Partial Prerendering).

Типичный кейс: Server Action для формы. Старый ESLint пропустит non-serializable arg, Biome - нет. Плюс интеграция с TypeScript LSP в Next.js 15, который на 60% быстрее. Результат - чистый стейт, меньше runtime ошибок.

Сравнение линтеров:

Линтер	Скорость с Turbopack	RSC support	Форматирование
ESLint	Медленно (JS)	Частично	Нет
Biome v3	Мгновенно (Rust)	Полный	Да + Prettier drop-in
Rome (old)	Быстро	Базовый	Да

Нюанс: Custom webpack плагины могут конфликтовать - переходи на native Next.js loaders.

Turbopack + Biome: производительность на максимуме

Комбо Turbopack и Biome - это cheat code для Next.js 15. Local startup в секунды, Fast Refresh без лагов, линтинг без пауз. Для RSC добавь nested chunking: turbopackClientSideNestedAsyncChunking: true - чанки летают, Biome проверяет их на side-effects.

В монрепо с pnpm workspaces Biome масштабируется идеально, Docker setups без проблем. Минус - экзотические Sass functions пока не тянут, но для Tailwind v4 + Lightning CSS - огонь.

Оптимизации:

• Scope hoisting: В продакшене сжимает бандл на 20%.
• Infer side effects: Авто tree-shaking модулей без импортов.
• PostCSS worker pool: Tailwind рекомпиляция в ms.

Когда RSC с Biome раскрываются по полной

Biome v3 + Turbopack превращают Next.js 15 в машину для больших аппов. Остается дошлифовать root layout auto-creation и full Sass support - Vercel фиксит в канары. Подумать стоит над миграцией с Webpack: тесты проходят на 99%, но edge-кейсы ловить вручную. В итоге код чище, dev быстрее - классика фронтенда.