/exp2

Primary LanguageJavaScript

Название проекта

Стартовый шаблон для быстрого создания проектов на Next.js

Версии

  • NodeJS - 18.8.0, актуальную версию можно посмотреть в .nvmrc
  • Yarn - не менее 1.22.5

Документация

Установка

  • Установите NodeJS (если требуется)
  • Для установки предпочтительно использовать nvm
  • установите Yarn

Запуск

nvm install   # устанавливает нужную версию node из .nvmrc
nvm use       # выбирает необходимую версию node из .nvmrc
yarn          # установка зависимостей
yarn "<task>" # запуск сценария
              # <dev>, <build>

Команды

  • yarn dev - запуск dev сборки для разработки проекта
  • yarn build - Production сборка проекта
  • yarn start - запуск Production сборки проекта
  • yarn export - Сборка статического проекта (Файлы собираются в папку out)
  • yarn lint - Проверка ESlint

Файловая структура

name-project

├── pages
│   ├── api
├── public
│   ├── images
│   ├── fonts
├── src
│   ├── components
│   │   ├── common
│   │   ├── pages
│   ├── hooks
│   ├── utils
│   ├── stubs
│   ├── styles
│   ├── constants
├── .env.sample
├── next.config.js
├── package.json
├── .eslintrc.json
├── .stylelintrc.json
├── .jsconfig.json
└── .gitignore

  • Корень папки:

    • public — Статичные файлы проекта (картинки, шрифты и т.д.)
    • public/images — Статичные изображения
    • public/fonts — Шрифты
    • pages — Файлы (компоненты) страниц Next.js (Читать подробнее)
    • pages/api — Api роутинг Next.js (Читать подробнее)
    • .env.sample — Переменные окружения проекта (Читать подробнее)
    • next.config.js — Файл конфигурации Next.js
    • .eslintrc.json — настройки ESLint
    • .gitignore – запрет на отслеживание файлов Git'ом
    • .stylelintrc.json — настройки Stylelint
    • package.json — список зависимостей
    • .jsconfig.json - настройка путей импортов в проекте

  • Папка src - используется во время разработки:

    • Компоненты: src/components
    • Глобальные компоненты: src/components/common
    • Компоненты страниц: src/components/pages
    • Утилки (вспомогательные функции): src/utils
    • Кастомные хуки: src/hooks
    • Stub данные (мокапы данных): src/stubs
    • Глобальные стили проекта: src/styles
    • Константы проекта: src/сonstants

Структура компонента

  • import стороних библиотек

  • import hooks/utils

  • import внешних компонентов

  • import внутренних компонентов

  • import стилей

  • константы

      import { ... } from 'react';
  import cx from 'classnames';
  import { string } from 'prop-types';
  ...

  import util from 'utils/util';
  import hook from 'hooks/hook';
  ...

  import Button from 'components/Button';
  ...

  import Item from './Item';
  ...

  import s from './Component.module.scss';

  const NUMBER = 10;
  ...

  const Component = ({ className }) => {

    return (
      <Button className={cx(s.root, className)}>
        <Item />
      </Button>
    )
  }

  Component.propTypes = {
    className: string,
  };

  export default Component;

Шрифты

  • шрифты находятся в папке public/fonts
    • используйте форматы .woff и .woff2
    • шрифты подключаются в файл src/styles/fonts.scss

Изображения

  • изображения находятся в папке public/images

Разработано

alt text