S.Gromov
5cf0f0f8ba
- восстановлены link для локалей: ru → /ru/, en → /en/ (были сломаны на /) - добавлена иконка GitHub в socialLinks шапки VitePress для ru и en со ссылкой на https://gromlab.ru/docs/nextjs-style-guide - root-локаль скрыта из переключателя языка через CSS (display: none для href="/"): в дропдауне теперь только Русский и English - pill-кнопка «Репозиторий» добавлена в блок controls лендинга с иконкой GitHub, открывается в новой вкладке - мобильная вёрстка лендинга переработана: контролы стопкой, репозиторий на ≤480px сжимается до иконки 36x36, увеличены отступы между блоками (hero / controls / cards) для разделения
NextJS Style Guide
Conventions for Next.js project development: application architecture and layers, code structure, module organization, styling, typing, and infrastructure.
Documentation Structure
Processes
What to do in a specific situation — step-by-step instructions.
| Section | Answers the question |
|---|---|
| Getting Started | What tools to install before starting development? |
| Creating an App | How to create a new project, where to get a template? |
| Creating Pages | How to add a page: routing and screen? |
| Creating Components | How to generate components using templates? |
| Styling | What to use: Mantine, tokens, or PostCSS? |
| Data Fetching | How to fetch data: SWR, codegen, sockets? |
| State Management | When and how to create a store (Zustand)? |
| Localization | How to add translations and work with i18next? |
Basic Rules
What the code should look like — standards not tied to a specific technology.
| Section | Answers the question |
|---|---|
| Tech Stack | What stack do we use? |
| Architecture | How are SLM layers, dependencies, and public API structured? |
| Code Style | How to format code: indentation, quotes, imports, early return? |
| Naming | How to name files, variables, components, hooks? |
| Documentation | How to write JSDoc: what to document and what not? |
| Typing | How to type: type vs interface, any/unknown? |
Applied Sections
How a specific area works — rules, structure, and code examples for specific technologies and tools.
| Section | Answers the question |
|---|---|
| Project Structure | How are folders and files organized by FSD? |
| Components | How is a component structured: files, props, clsx? |
| Page-level Components | How to define layout, page, loading, error, not-found? |
| Templates & Code Generation | How do templates work: syntax, variables, modifiers? |
| Styles | How to write CSS: PostCSS Modules, nesting, media, tokens? |
| Images | (not filled) |
| SVG Sprites | (not filled) |
| Video | (not filled) |
| API | (not filled) |
| Stores | (not filled) |
| Hooks | (not filled) |
| Fonts | (not filled) |
| Localization | (not filled) |