S.Gromov
53aa01199d
- добавлен отдельный VitePress-сайт для NextJS Style Guide - удалены дубли SLM-канонов из style-guide - обновлены ссылки, сборочные скрипты, CI, Docker и README - разблокирована карточка NextJS Style Guide на главной
80 lines
4.9 KiB
Markdown
80 lines
4.9 KiB
Markdown
---
|
||
title: NextJS Style Guide
|
||
description: Практический стайлгайд для разработки frontend-приложений на Next.js и TypeScript.
|
||
---
|
||
|
||
# NextJS Style Guide
|
||
|
||
Практический стайлгайд для разработки frontend-приложений на Next.js и TypeScript.
|
||
|
||
## Использование
|
||
|
||
**Для AI-агентов:**
|
||
|
||
- [llms.txt](/llms.txt) — Карта разделов, оглавление со ссылками на разделы.
|
||
- [llms-full.txt](/llms-full.txt) — Вся документация одним файлом.
|
||
|
||
**Для проекта:**
|
||
|
||
- [nextjs-style-guide.zip](/nextjs-style-guide.zip) — Набор Markdown-файлов для распаковки в `./ai/nextjs-style-guide/` или другую папку проекта.
|
||
|
||
## Структура документации
|
||
|
||
### Подсказки
|
||
|
||
[Подсказки](/docs/workflow) — короткие ответы на типовые вопросы и решения для спорных ситуаций.
|
||
|
||
### Базовые правила
|
||
|
||
**Каким должен быть код** — стандарты, не привязанные к конкретной технологии.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Технологии и библиотеки | Какой стек используем? |
|
||
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
||
| SLM Design | Что такое SLM и зачем она нужна? |
|
||
| Архитектура: Слои | Какие слои есть и как между ними устроены зависимости? |
|
||
| Архитектура: Модули | Что такое модуль и как он устроен? |
|
||
| Архитектура: Сегменты | Какие сегменты есть внутри модуля? |
|
||
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
||
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
||
| Типизация | Как типизировать: type vs interface, any/unknown? |
|
||
|
||
### Настройка
|
||
|
||
**Как сконфигурировать проект** — пошаговая настройка инструментов и инфраструктуры.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Создание проекта из шаблона | Как начать проект из готового шаблона? |
|
||
| Создание проекта вручную | Как поднять проект с нуля без шаблона? |
|
||
| Чистая установка Next.js | Как поставить голый Next.js под дальнейшую сборку? |
|
||
| Алиасы импортов | Как настроить алиасы импортов? |
|
||
| Biome | Как настроить линтер и форматтер? |
|
||
| PostCSS | Какие плагины PostCSS нужны и как их настроить? |
|
||
| Стили | Как подключить базовые стили и токены? |
|
||
| SVG-спрайты | Как подключить генерацию SVG-спрайтов? |
|
||
| Шаблоны генерации | Как подключить шаблоны для кодогенерации? |
|
||
| VS Code | Как настроить редактор для проекта? |
|
||
|
||
### Использование
|
||
|
||
**Как это устроено и как этим пользоваться** — структура, примеры и правила для конкретных областей.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Структура проекта | Как организованы папки и файлы по SLM? |
|
||
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
||
| Файлы роутинга | Как описывать layout, page, loading, error, not-found? |
|
||
| REST-клиент | Как настроить клиент внешнего REST API? |
|
||
| Получение данных | Как выбрать способ получения данных под рендер страницы? |
|
||
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
||
| Стили | Как писать CSS: вложенность, медиа, токены? |
|
||
| SVG-спрайты | Как использовать SVG-спрайты в коде? |
|
||
| Изображения | _(не заполнен)_ |
|
||
| Видео | _(не заполнен)_ |
|
||
| Stores | _(не заполнен)_ |
|
||
| Хуки | _(не заполнен)_ |
|
||
| Шрифты | _(не заполнен)_ |
|
||
| Локализация | _(не заполнен)_ |
|