templates/nextjs-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: привести проект к стайлгайду

Browse Source 
- Убран FC из всех шаблонов и компонентов
- Заменён interface на type, .interface.ts на .type.ts
- Добавлен паттерн Params/Props/RootAttrs в типы
- Деструктуризация пропсов перенесена в тело компонента
- Добавлены styles/ и types/ для feature, entity, widget, screen
- Добавлен расширенный JSDoc-шаблон с назначением и сценариями
- Исправлен баг в index.ts шаблона component
- Добавлены .editorconfig, .env.example
- Добавлен organizeImports.biome в .vscode/settings.json
- Исправлен .gitignore для .env.example
- Переписан README под проект-шаблон
- Удалён CLAUDE.md
This commit is contained in:
Сергей Громов
2026-04-02 17:01:22 +03:00
parent 9e2167b34d
commit 7382499886
24 changed files with 212 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@@ -0,0 +1,12 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

2
.env.example Normal file
View File

@@ -0,0 +1,2 @@
# Базовый URL приложения
NEXT_PUBLIC_APP_URL=http://localhost:3000

1
.gitignore vendored
View File

@@ -32,6 +32,7 @@ yarn-error.log*
# env files (can opt-in for committing if needed)
.env*
!.env.example
# vercel
.vercel

2
.templates/component/{{name.kebabCase}}/index.ts
View File

@@ -1 +1 @@
export { {name.pascalCase} } from './{{name.kebabCase}}'
export { {{name.pascalCase}} } from './{{name.kebabCase}}'

6
.templates/component/{{name.kebabCase}}/types/{{name.kebabCase}}.interface.ts
View File

@@ -1,6 +0,0 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры {{name.pascalCase}}.
*/
export interface {{name.pascalCase}}Props extends HTMLAttributes<HTMLDivElement> {}

11
.templates/component/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры {{name.pascalCase}}.
*/
export type {{name.pascalCase}}Params = {}
/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>
export type {{name.pascalCase}}Props = RootAttrs & {{name.pascalCase}}Params

15
.templates/component/{{name.kebabCase}}/{{name.kebabCase}}.tsx
View File

@@ -1,15 +1,20 @@
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.interface'
import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* {{name.pascalCase}}.
* <Назначение компонента {{name.pascalCase}} в 1 строке>.
*
* Используется для:
* - <сценарий 1>
* - <сценарий 2>
*/
export const {{name.pascalCase}}: FC<{{name.pascalCase}}Props> = ({ className, ...htmlAttr }) => {
export const {{name.pascalCase}} = (props: {{name.pascalCase}}Props) => {
const { children, className, ...htmlAttr } = props
return (
<div {...htmlAttr} className={cl(styles.root, className)}>
{{name.kebabCase}}
{children}
</div>
)
}

2
.templates/entity/{{name.kebabCase}}/styles/{{name.kebabCase}}.module.css Normal file
View File

@@ -0,0 +1,2 @@
.root {
}

11
.templates/entity/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры сущности {{name.pascalCase}}.
*/
export type {{name.pascalCase}}EntityParams = {}
/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>
export type {{name.pascalCase}}EntityProps = RootAttrs & {{name.pascalCase}}EntityParams

18
.templates/entity/{{name.kebabCase}}/{{name.kebabCase}}.entity.tsx
View File

@@ -1,12 +1,20 @@
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}EntityProps } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* Сущность {{name.pascalCase}}.
* <Назначение сущности {{name.pascalCase}} в 1 строке>.
*
* Используется для:
* - <сценарий 1>
* - <сценарий 2>
*/
export const {{name.pascalCase}}Entity: FC = () => {
export const {{name.pascalCase}}Entity = (props: {{name.pascalCase}}EntityProps) => {
const { children, className, ...htmlAttr } = props
return (
<div>
{{name.kebabCase}}
<div {...htmlAttr} className={cl(styles.root, className)}>
{children}
</div>
)
}

2
.templates/feature/{{name.kebabCase}}/styles/{{name.kebabCase}}.module.css Normal file
View File

@@ -0,0 +1,2 @@
.root {
}

11
.templates/feature/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры фичи {{name.pascalCase}}.
*/
export type {{name.pascalCase}}FeatureParams = {}
/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>
export type {{name.pascalCase}}FeatureProps = RootAttrs & {{name.pascalCase}}FeatureParams

18
.templates/feature/{{name.kebabCase}}/{{name.kebabCase}}.feature.tsx
View File

@@ -1,12 +1,20 @@
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}FeatureProps } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* Фича {{name.pascalCase}}.
* <Назначение фичи {{name.pascalCase}} в 1 строке>.
*
* Используется для:
* - <сценарий 1>
* - <сценарий 2>
*/
export const {{name.pascalCase}}Feature: FC = () => {
export const {{name.pascalCase}}Feature = (props: {{name.pascalCase}}FeatureProps) => {
const { children, className, ...htmlAttr } = props
return (
<div>
{{name.kebabCase}}
<div {...htmlAttr} className={cl(styles.root, className)}>
{children}
</div>
)
}

6
.templates/layout/{{name.kebabCase}}/types/{{name.kebabCase}}.interface.ts
View File

@@ -1,6 +0,0 @@
/**
* Параметры {{name.pascalCase}}Layout.
*/
export interface {{name.pascalCase}}LayoutProps {
children: React.ReactNode
}

11
.templates/layout/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры {{name.pascalCase}}Layout.
*/
export type {{name.pascalCase}}LayoutParams = {}
/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>
export type {{name.pascalCase}}LayoutProps = RootAttrs & {{name.pascalCase}}LayoutParams

16
.templates/layout/{{name.kebabCase}}/{{name.kebabCase}}.layout.tsx
View File

@@ -1,13 +1,19 @@
import type { FC } from 'react'
import type { {{name.pascalCase}}LayoutProps } from './types/{{name.kebabCase}}.interface'
import cl from 'clsx'
import type { {{name.pascalCase}}LayoutProps } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* Layout {{name.pascalCase}}.
* <Назначение layout {{name.pascalCase}} в 1 строке>.
*
* Используется для:
* - <сценарий 1>
* - <сценарий 2>
*/
export const {{name.pascalCase}}Layout: FC<{{name.pascalCase}}LayoutProps> = ({ children }) => {
export const {{name.pascalCase}}Layout = (props: {{name.pascalCase}}LayoutProps) => {
const { children, className, ...htmlAttr } = props
return (
<div className={styles.root}>
<div {...htmlAttr} className={cl(styles.root, className)}>
{children}
</div>
)

11
.templates/screen/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры экрана {{name.pascalCase}}.
*/
export type {{name.pascalCase}}ScreenParams = {}
/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>
export type {{name.pascalCase}}ScreenProps = RootAttrs & {{name.pascalCase}}ScreenParams

17
.templates/screen/{{name.kebabCase}}/{{name.kebabCase}}.screen.tsx
View File

@@ -1,13 +1,20 @@
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}ScreenProps } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* Экран {{name.pascalCase}}.
* <Назначение экрана {{name.pascalCase}} в 1 строке>.
*
* Используется для:
* - <сценарий 1>
* - <сценарий 2>
*/
export const {{name.pascalCase}}Screen: FC = () => {
export const {{name.pascalCase}}Screen = (props: {{name.pascalCase}}ScreenProps) => {
const { children, className, ...htmlAttr } = props
return (
<div className={styles.root}>
{{name.kebabCase}}
<div {...htmlAttr} className={cl(styles.root, className)}>
{children}
</div>
)
}

11
.templates/widget/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { HTMLAttributes } from 'react'
/**
* Параметры виджета {{name.pascalCase}}.
*/
export type {{name.pascalCase}}WidgetParams = {}
/** HTML-атрибуты корневого элемента. */
type RootAttrs = HTMLAttributes<HTMLDivElement>
export type {{name.pascalCase}}WidgetProps = RootAttrs & {{name.pascalCase}}WidgetParams

17
.templates/widget/{{name.kebabCase}}/{{name.kebabCase}}.widget.tsx
View File

@@ -1,13 +1,20 @@
import type { FC } from 'react'
import cl from 'clsx'
import type { {{name.pascalCase}}WidgetProps } from './types/{{name.kebabCase}}.type'
import styles from './styles/{{name.kebabCase}}.module.css'
/**
* Виджет {{name.pascalCase}}.
* <Назначение виджета {{name.pascalCase}} в 1 строке>.
*
* Используется для:
* - <сценарий 1>
* - <сценарий 2>
*/
export const {{name.pascalCase}}Widget: FC = () => {
export const {{name.pascalCase}}Widget = (props: {{name.pascalCase}}WidgetProps) => {
const { children, className, ...htmlAttr } = props
return (
<div className={styles.root}>
{{name.kebabCase}}
<div {...htmlAttr} className={cl(styles.root, className)}>
{children}
</div>
)
}

3
.vscode/settings.json vendored
View File

@@ -2,7 +2,8 @@
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit"
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"files.associations": {
"*.css": "postcss"

1
CLAUDE.md
View File

@@ -1 +0,0 @@
@AGENTS.md

76
README.md
View File

@@ -1,36 +1,64 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Next.js Template
## Getting Started
Шаблон проекта на Next.js, построенный по [стайлгайду](https://gromlab.ru/docs/nextjs-style-guide).
First, run the development server:
## Стек
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- **Next.js 16** — фреймворк
- **React 19** / **TypeScript 5** — UI и типизация
- **Mantine UI 8** — компоненты
- **Zustand 5** — глобальное состояние
- **SWR 2** — получение данных
- **PostCSS Modules** — стили
- **Biome** — линтер и форматтер
- **clsx** — конкатенация CSS-классов
## Архитектура
Проект использует кастомизированный FSD (Feature-Sliced Design):
```
src/
├── app/ # Роутинг Next.js, провайдеры, глобальные стили
├── screens/ # Собранные страницы (UI)
├── layouts/ # Каркасы и шаблоны страниц
├── widgets/ # Крупные самостоятельные блоки интерфейса
├── features/ # Пользовательские сценарии
├── entities/ # Бизнес-сущности
└── shared/ # Переиспользуемый код (UI, утилиты, типы)
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
Зависимости идут строго сверху вниз: `app` -> `screens` -> `layouts` -> `widgets` -> `features` -> `entities` -> `shared`.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
## Быстрый старт
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
```bash
npx tiged git@gromlab.ru:templates/nextjs.git my-app
cd my-app
npm install
npm run dev
```
## Learn More
## Генерация кода
To learn more about Next.js, take a look at the following resources:
Модули создаются из шаблонов `.templates/`:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
```bash
npx @gromlab/create component button src/shared/ui
npx @gromlab/create feature auth src/features
npx @gromlab/create widget header src/widgets
npx @gromlab/create entity user src/entities
npx @gromlab/create layout admin src/layouts
npx @gromlab/create screen profile src/screens
npx @gromlab/create store auth src/shared/model
```
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Скрипты
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
| Команда | Описание |
|---|---|
| `npm run dev` | Запуск dev-сервера |
| `npm run build` | Сборка для продакшена |
| `npm run start` | Запуск продакшен-сервера |
| `npm run lint` | Проверка кода (Biome) |
| `npm run format` | Форматирование кода (Biome) |

3
src/screens/home/home.screen.tsx
View File

@@ -1,11 +1,10 @@
import { Container, Image, Stack, Text, Title } from '@mantine/core';
import type { FC } from 'react';
import styles from './styles/home.module.css';
/**
* Главный экран приложения.
*/
export const HomeScreen: FC = () => {
export const HomeScreen = () => {
return (
<div className={styles.root}>
<Container size="sm">