2026-03-28 21:15:15 +03:00
|
|
|
# NextJS Style Guide
|
2026-01-29 16:00:19 +03:00
|
|
|
|
2026-03-28 21:15:15 +03:00
|
|
|
Rules and standards for NextJS and TypeScript development: architecture, typing, styles, components, API, and infrastructure.
|
2026-01-29 16:00:19 +03:00
|
|
|
|
2026-03-28 21:15:15 +03:00
|
|
|
## Documentation Structure
|
2026-01-29 16:00:19 +03:00
|
|
|
|
2026-03-28 21:15:15 +03:00
|
|
|
### Processes
|
2026-01-29 16:00:19 +03:00
|
|
|
|
2026-03-28 21:15:15 +03:00
|
|
|
**What to do** in a specific situation — step-by-step instructions.
|
2026-01-29 16:00:19 +03:00
|
|
|
|
2026-03-28 21:15:15 +03:00
|
|
|
| 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 FSD 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, FC? |
|
|
|
|
|
|
|
|
|
|
### 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, FC? |
|
2026-03-29 11:43:23 +03:00
|
|
|
| Page-level Components | How to define layout, page, loading, error, not-found? |
|
2026-03-28 21:15:15 +03:00
|
|
|
| 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)_ |
|
|
|
|
|
|
|
|
|
|
## For Assistants
|
|
|
|
|
|
|
|
|
|
Full documentation in a single MD file: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/generated/en/RULES.md
|
