forked from templates/nextjs-template
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:
71
src/app/globals.css
Normal file
71
src/app/globals.css
Normal 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
43
src/app/layout.tsx
Normal 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
11
src/app/page.tsx
Normal 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
0
src/entities/.gitkeep
Normal file
0
src/features/.gitkeep
Normal file
0
src/features/.gitkeep
Normal file
28
src/screens/home/home.screen.tsx
Normal file
28
src/screens/home/home.screen.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
1
src/screens/home/index.ts
Normal file
1
src/screens/home/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { HomeScreen } from './home.screen'
|
||||
5
src/screens/home/styles/home.module.css
Normal file
5
src/screens/home/styles/home.module.css
Normal file
@@ -0,0 +1,5 @@
|
||||
.root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
0
src/shared/lib/.gitkeep
Normal file
0
src/shared/lib/.gitkeep
Normal file
0
src/shared/types/.gitkeep
Normal file
0
src/shared/types/.gitkeep
Normal file
0
src/shared/ui/.gitkeep
Normal file
0
src/shared/ui/.gitkeep
Normal file
0
src/widgets/.gitkeep
Normal file
0
src/widgets/.gitkeep
Normal file
Reference in New Issue
Block a user