nextjs-fetch-data-example/ai/nextjs-style-guide/applied/templates/templates-create.md

title, description, keywords

title	description	keywords
Создание шаблонов генерации	Структура шаблонов, синтаксис переменных и примеры.	шаблоны templates .templates syntax переменные kebabCase pascalCase scaffold

::: v-pre

Создание шаблонов генерации

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

Структура шаблонов

Все шаблоны лежат в .templates/ в корне проекта. Каждая папка — отдельный шаблон.

.templates/
├── component/                  # шаблон компонента
│   └── {{name.kebabCase}}/
│       ├── styles/
│       │   └── {{name.kebabCase}}.module.css
│       ├── types/
│       │   └── {{name.kebabCase}}.type.ts
│       ├── {{name.kebabCase}}.tsx
│       └── index.ts
└── store/                      # шаблон Zustand стора
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.store.ts
        ├── {{name.kebabCase}}.type.ts
        └── index.ts

Синтаксис шаблонов

Переменные

Переменные работают в именах файлов/папок и внутри файлов:

{{variable}}

Переменные могут быть любыми. name — дефолтная, подставляется генератором автоматически. Если реализация требует дополнительных параметров — можно использовать произвольные наборы переменных.

Модификаторы

Модификаторы меняют регистр и формат записи переменной:

{{name.pascalCase}}          → MyButton
{{name.camelCase}}           → myButton
{{name.kebabCase}}           → my-button
{{name.snakeCase}}           → my_button
{{name.screamingSnakeCase}}  → MY_BUTTON

Как создать новый шаблон

1. Создать папку в .templates/ с именем шаблона (например hook).
2. Внутри разместить файлы и папки, используя {{name}} и модификаторы в именах и содержимом.
3. Шаблон сразу доступен и в расширении VS Code, и в CLI.

Пример — создание шаблона для хука:

.templates/
└── hook/
    └── {{name.kebabCase}}/
        ├── {{name.kebabCase}}.hook.ts
        └── index.ts

// .templates/hook/{{name.kebabCase}}.hook.ts
export const {{name.camelCase}} = () => {

}

// .templates/hook/index.ts
export { {{name.camelCase}} } from './{{name.kebabCase}}.hook'

Дальше

• Использование — генерация через VS Code плагин и CLI.

:::