Next.js Component Preview
VSCode-расширение для мгновенного превью React/Next.js-компонентов прямо в редакторе. Открывает Webview-панель справа, собирает текущий компонент встроенным Vite-сервером, поддерживает hot reload, реальные стили (CSS Modules, Tailwind, global CSS) и моки Next.js-модулей (Image, Link, useRouter, usePathname и др.).
Возможности
- Команда
Preview Component — через Command Palette, иконку в заголовке редактора или хоткей.
- Webview справа от редактора с живым рендером компонента.
- Hot reload — изменения файла применяются на лету (Vite HMR), без потери панели.
- Реальные стили — CSS Modules, Tailwind и глобальный CSS обрабатываются вашим же
postcss.config/tailwind.config (Vite запускается с корнем вашего проекта).
- Моки Next.js —
next/image, next/link, next/head, next/script, next/dynamic, next/router, next/navigation (useRouter, usePathname, useSearchParams, useParams, redirect, notFound и т. д.).
- Алиасы tsconfig — пути из
compilerOptions.paths подхватываются автоматически (vite-tsconfig-paths).
- Панель ошибок — ошибки сборки, компиляции и рантайма видны в нижней панели webview.
Как пользоваться
- Откройте файл компонента (
.tsx, .jsx, .ts, .js).
- Запустите превью одним из способов:
- Command Palette →
Preview Component;
- хоткей
Cmd+Alt+P (macOS) / Ctrl+Alt+P (Windows/Linux);
- иконка предпросмотра в правом верхнем углу редактора.
- Справа откроется панель. Меняйте код — превью обновится автоматически.
Чтобы показать другой компонент — переключитесь на его файл и снова вызовите Preview Component.
Что считается компонентом
Расширение ищет компонент в открытом файле так:
default-экспорт, если это функция/класс;- иначе — первый именованный экспорт-функция с заглавной буквы (
export function Card() {}).
Если компонент принимает обязательные пропсы, он будет отрендерен без них — оберните его в файл-обёртку с дефолтными пропсами, если нужно.
Стили (Tailwind / global CSS)
Vite запускается с корнем вашего проекта, поэтому postcss.config.js и tailwind.config.js применяются автоматически к импортируемым стилям.
Если компонент сам не импортирует глобальные стили (типичный случай для App Router, где globals.css подключается в layout.tsx), укажите путь к ним в настройках:
// .vscode/settings.json
{
"nextjsPreview.globalCssPath": "app/globals.css"
}
Настройки
| Параметр |
По умолчанию |
Описание |
nextjsPreview.globalCssPath |
"" |
Путь к глобальному CSS (например, app/globals.css). Абсолютный или относительно корня проекта. |
nextjsPreview.port |
0 |
Порт встроенного Vite-сервера. 0 — выбрать свободный автоматически. |
nextjsPreview.previewBackground |
#ffffff |
Цвет фона области превью. |
nextjsPreview.reuseEditorColumn |
true |
Открывать панель в колонке справа от редактора. |
Требования
- VSCode
^1.85.0.
- В проекте установлены
react и react-dom (как в любом Next.js-проекте). Если их нет — расширение подставит свои встроенные версии React 18 как fallback.
Разработка
npm install # установить зависимости
npm run compile # собрать расширение (tsc -> out/)
npm run watch # пересборка в фоне
Затем нажмите F5 в VSCode — откроется Extension Development Host с уже загруженным расширением. Откройте в нём любой Next.js-проект и вызовите Preview Component.
Архитектура
| Файл |
Роль |
src/extension.ts |
Точка входа, регистрация команды nextjsPreview.preview. |
src/PreviewPanel.ts |
Webview-панель: UI (тулбар + iframe + панель ошибок), FileSystemWatcher, обмен сообщениями. |
src/ComponentBuilder.ts |
Встроенный Vite dev-сервер, виртуальные модули (entry/target), моки и алиасы. |
src/nextMocks.ts |
Реализация моков Next.js-модулей (рендерятся в webview). |
Превью устроено так: ComponentBuilder поднимает Vite dev-сервер с корнем вашего проекта и набором виртуальных модулей. Webview встраивает iframe, указывающий на этот сервер. Виртуальная точка входа импортирует текущий компонент, рендерит его в React и отправляет статус/ошибки наверх через postMessage. Hot reload работает за счёт Vite HMR.
Ограничения
- Серверные возможности Next.js (Server Components с доступом к БД,
fetch к внутренним API, серверные экшены) не исполняются — компонент рендерится как клиентский.
- Данные из роутера/параметров моканы значениями по умолчанию.
iframe указывает на http://localhost встроенного сервера; этот порт доступен только локально.
Лицензия
MIT
