init: шаблон Next.js приложения

- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
This commit is contained in:
2026-03-28 22:11:43 +03:00
commit 8a8ecba397
47 changed files with 2028 additions and 0 deletions

71
src/app/globals.css Normal file
View File

@@ -0,0 +1,71 @@
/* Цвета */
:root {
--color-text: #1a1a1a;
--color-text-secondary: #6b7280;
--color-bg: #ffffff;
--color-bg-secondary: #f9fafb;
--color-border: #e5e7eb;
--color-primary: #228be6;
--color-error: #fa5252;
--color-success: #40c057;
--color-warning: #fab005;
}
/* Отступы */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
}
/* Скругления */
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
}
/* Медиа-запросы (Mobile First) */
@custom-media --xs (min-width: 36em);
@custom-media --sm (min-width: 48em);
@custom-media --md (min-width: 62em);
@custom-media --lg (min-width: 75em);
@custom-media --xl (min-width: 88em);
/* Базовые стили */
html {
height: 100%;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

43
src/app/layout.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { PropsWithChildren } from 'react'
import type { Metadata } from 'next'
import { ColorSchemeScript, MantineProvider } from '@mantine/core'
import '@mantine/core/styles.css'
import './globals.css'
export const metadata: Metadata = {
title: {
default: 'App',
template: '%s | App',
},
description: 'Описание приложения',
metadataBase: new URL('https://example.com'),
openGraph: {
type: 'website',
locale: 'ru_RU',
siteName: 'App',
images: [
{
url: '/og-image.png',
width: 1200,
height: 630,
alt: 'App',
},
],
},
twitter: {
card: 'summary_large_image',
},
}
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="ru" suppressHydrationWarning>
<head>
<ColorSchemeScript />
</head>
<body>
<MantineProvider>{children}</MantineProvider>
</body>
</html>
)
}

11
src/app/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import type { Metadata } from 'next'
import { HomeScreen } from '@/screens/home'
export const metadata: Metadata = {
title: 'Главная',
description: 'Главная страница приложения',
}
export default function HomePage() {
return <HomeScreen />
}

0
src/entities/.gitkeep Normal file
View File

0
src/features/.gitkeep Normal file
View File

View File

@@ -0,0 +1,28 @@
import type { FC } from 'react'
import { Container, Title, Text, Image, Stack } from '@mantine/core'
import styles from './styles/home.module.css'
/**
* Главный экран приложения.
*/
export const HomeScreen: FC = () => {
return (
<div className={styles.root}>
<Container size="sm">
<Stack align="center" gap="lg">
<Image
src="/rick-and-morty-dance.gif"
alt="Dancing Rick"
w={200}
h={200}
fit="contain"
/>
<Title order={1}>Добро пожаловать</Title>
<Text c="dimmed">
Шаблон приложения на Next.js и TypeScript.
</Text>
</Stack>
</Container>
</div>
)
}

View File

@@ -0,0 +1 @@
export { HomeScreen } from './home.screen'

View File

@@ -0,0 +1,5 @@
.root {
display: flex;
align-items: center;
min-height: 100vh;
}

0
src/shared/lib/.gitkeep Normal file
View File

View File

0
src/shared/ui/.gitkeep Normal file
View File

0
src/widgets/.gitkeep Normal file
View File