## Ввесто введения или что же такое Strapi?

Strapi - это headless (буквально "безголовая") полностью кастомизируемая CMS с открытым исходным кодом. Написана на 100% Javascript. Что делает ее одной из самых удобных для фронтенд-разработчиков.

### Основные преимущества Strapi

1. Значительно ускоряет время создания и разворачивания API;
2. Позволяет управлять контентом и его доставкой;
3. Безупречно работает с несколькими различными фронтенд приложениями.

## Немного истории

Первоначальная цель проекта заключалась в том, чтобы помочь создать основу для вашего API: так был создан Strapi. Теперь Strapi - это автономная CMS с открытым исходным кодом, которая дает разработчикам полную свободу выбора своих любимых инструментов и фреймворков и позволяет редакторам управлять своим контентом и распространять его с помощью панели администратора своего приложения. Strapi основан на системе плагинов и представляет собой гибкую CMS, панель администратора и API которой являются расширяемыми. Каждая часть этой системы настраивается в соответствии с вашим вариантом использования. Strapi также имеет встроенную пользовательскую систему для детального управления тем, к чему имеют доступ администраторы и конечные пользователи.

## Установка Strapi

Strapi предлагает множество возможных вариантов установки для вашего проекта или приложения. Strapi можно установить на локальном компьютере или в таких сервисах, как Render, DigitalOcean, Amazon AWS или Platform.sh. Далее я опишу некоторые из них.

### Установка через CLI

Это самый простой и быстрый способ запустить Strapi на вашем локальном компьютере. И здесь необходимо выполнить 3 шага:

#### Шаг 1. Проверить рекомендуемые требования


##### Node.js

Strapi работает только в среде Node.js и только в LTS-версиях. Самая последняя рекомендуемая версия на момент написания этой статьи **Node LTS v14**.

Ниже небольшая табличка:

<table>
   <thead>
      <tr>
        <th>Приложение</th>
        <th>Минимальная версия</th>
        <th>Рекомендуемая версия</th>
      </tr>
   </thead>
   <tr>
      <td>Node.js</td>
      <td>12.x</td>
      <td>14.x</td>
    </tr>
    <tr>
      <td>npm</td>
      <td>6.x</td>
      <td>6.x</td>
    </tr>
</table>


**Yarn (опционально)**


##### БД

Strapi поддерживает следующие типы баз данных.

<table>
<thead>
<tr>
<th>Приложение</th>
<th>Минимальная версия</th>
</tr>
</thead>
<tbody>
<tr>
<td>SQLite</td>
<td>3</td>
</tr>
<tr>
<td>PostgreSQL</td>
<td>10</td>
</tr>
<tr>
<td>MySQL</td>
<td>5.6</td>
</tr>
<tr>
<td>MariaDB</td>
<td>10.1</td>
</tr>
<tr>
<td>MongoDB</td>
<td>3.6</td>
</tr>
</tbody>
</table>


#### Шаг 2. Создание нового проекта.

Для быстрого создания проекта можно воспользоваться следующей командой:

```
yarn create strapi-app my-project --quickstart
```

Где `my-project` можно заменить на название вашего проекта.

Альтернативный способ, использовать любой [стартер](https://strapi.io/starters).

```
yarn create strapi-starter my-project <starter-url>
```

Где `my-project` можно также заменить на название вашего проекта и вместо `starter-url` указать линк на любой из [стартовых шаблонов](https://strapi.io/starters),

> Если вам нужна другая БД, вы можете не использовать флаг `--quickstart`. Тогда командная строка предложит вам выбор базы данных. Флаг `--quickstart` по умолчанию подключает SQLite.


#### Шаг 3. Запуск проекта в режиме разработки

Чтобы запустить приложение Strapi, вам нужно будет выполнить следующую команду в папке вашего приложения:

```
npm run develop
```

или

```
yarn develop
```

> Если вы создаете приложение с помощью флага `--quickstart`, то приложение в режиме разработки запустится автоматически.

Strapi - это headless (буквально "безголовая") полностью кастомизируемая CMS с открытым исходным кодом. Написана на 100% Javascript. Что делает ее одной из самых удобных для фронтенд-разработчиков.

large_MoshingDoodle.png

medium_MoshingDoodle.png

small_MoshingDoodle.png

thumbnail_MoshingDoodle.png

MoshingDoodle.png

Создание проекта на Strapi

## Итак, что же такое Next.js framework?

Next.js - это фреймворк, основанный на React, который позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью дополнительных функций предварительного рендеринга, таких как полноценный **рендеринг на стороне сервера** (SSR) и **статическая генерация страниц** (SSG).

![text](https://api.pxstudio.pw/uploads/5294398307303424_0e24e0d31c.png)

Таким образом приложения Next.js используют все преимущества библиотеки [React](https://ru.reactjs.org/) и просто добавляют дополнительные функции:

- **Server Side Rendering**. SSR позволяет получать доступ ко всем необходимым данным для построения страницы на сервере. Затем страница полностью отправляется обратно в браузер и сразу же отображается. SSR позволяет веб-страницам загружаться за меньшее время и повышает удобство работы пользователей за счет повышения скорости отклика.

- **SEO или просто поисковая оптимизация**. Использование SSR также дает вам преимущество в SEO, что помогает вашему сайту занимать более высокие позиции на страницах результатов поисковых систем. SSR повышает рейтинг веб-сайтов для SEO, потому что они загружаются быстрее и больше контента сайта можно сканировать с помощью трекеров SEO.

- **Тег `<head>`**. Next.js также позволяет вам редактировать тег `<head>` сайта, что вы не можете сделать в React. Тег <head> является основной частью метаданных веб-страницы и способствует повышению SEO-рейтинга сайта.


## Зачем использовать Next.js?

Основное преимущество Next.js - встроенная поддержка SSR для повышения производительности и SEO. Рендеринг на стороне сервера работает путем изменения потока запросов приложения React, так что все компоненты, кроме клиента, отправляют свою информацию на сервер.

Имея всю информацию на сервере, клиент может получить предварительную версию HTML-кода страницы. Клиент может отправить один запрос на сервер и получить полноценную HTML-страницу вместо того, чтобы запрашивать каждый компонент по отдельности с рендерингом на стороне клиента.

![рендеринг на стороне клиента](https://api.pxstudio.pw/uploads/clien_side_rendering_298028e8c9.png)

![ssr](https://api.pxstudio.pw/uploads/ssr_21824fae3a.png)

**Плюсы**:

- Приложения Next.js загружаются значительно быстрее, чем приложения React, благодаря встроенному рендерингу на стороне сервера;
- Поддерживает функции экспорта статических сайтов;
- Быстрый вход, для тех кто уже работал с библиотекой React.js;
- Автоматическое разделение кода для страниц;
- Легко создавать внутренние API-интерфейсы с помощью встроенных маршрутов API и создавать конечные точки API;
- Встроенная поддержка маршрутизации страниц, CSS, JSX и TypeScript;
- Быстрое добавление плагинов для настройки Next.js в соответствии с потребностями вашей страницы;
- Поддерживает такие преимущества React, как интуитивно понятное создание на основе компонентов, интерфейсная система состояний и высокая популярность.

**Минусы**:

Единственным реальным недостатком Next.js является то, что это самостоятельный фреймворк, то есть у него есть определенный метод и набор инструментов, которые он хочет, чтобы вы использовали для создания своих приложений.

Однако возможности Next.js вполне подходят для большинства проектов.

## Когда нужно использовать Next.js

Next.js лучше всего подходит, когда необходимо создать оптимизированный лендинг или домашнюю страницу, а также любые другие страницы, которые полагаются на органический поисковый трафик. Эти страницы получат наибольшую выгоду от встроенных функций Next.js.

## Пример приложения на Next.js

Давайте посмотрим на пример полноценного приложения Next.js, чтобы вы могли увидеть, как оно устроено. Мы будем использовать приложение Next.js по умолчанию, созданное с помощью команды:

```bash
yarn create next-app
```

![Файловая структура приложения Next.js](https://api.pxstudio.pw/uploads/nextjs_example_f8ce6cb04d.png)

Файл index.js, представляет отдельную страницу в этом проекте и выглядит следующим образом:

```jsx
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  )
}
```

По сути, индексный файл является ядром этого приложения, поскольку каждый файл в каталоге `pages` является отдельной страницей. Реальные веб-сайты будут содержать несколько страниц в папке `pages`, которая сопоставляется с соответствующим URL-адресом веб-приложения.


## С чего начать в Next.js

Теперь давайте подойдем с практической точки зрения и взглянем на код Next.js. Рассмотрим 5 основных концепций, которые представили нам разработчики фреймворка и которые понадобятся вам для создания собственного проекта на Next.js.

### Требования и окружающая среда

Прежде чем мы начнем, давайте настроим все, что вам нужно. Помимо самого фреймворка Next.js. вам потребуются Node.js, npm и npx.

Вы можете установить Node.js с их официального [сайта](https://nodejs.org). Чтобы убедиться, что он загружен правильно, введите в командной строке `node -v`. Обычно npm и npx одновременно устанавливаются при установке Node.js.

> Чтобы убедиться, что они установлены правильно, введите в командной строке `npm -v` и `npx -v`. Каждый вернет свою версию соответственно.

Если все три инструмента установлены правильно, вы cможете установить Next.js с помощью Node. Введите `npm install next react react-dom` в командную строку.

После успешной установки вы получите cообщение с вашими текущими версиями Next и React.

```bash
$ npm i next react react-dom

added 266 packages, and audited 267 packages in 15s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

### Создание приложения на Next.js

> Есть два способа создания приложения на Next.js, первый с помощью команды `create-next-app` или второй - вручную. Использовать `create-next-app` проще, поскольку все, что вам нужно сделать, это ввести `npm create-next-app <app-name>` в командную строку. Но ниже мы будем делать это вручную.

Кроме того, вы можете открыть файл `package.json` и ввести следующие сценарии:

```json
"scripts": {
  "dev": "next dev",
  "start": "next start",
  "build": "next build"
}
```

Это позволяет запускать новое приложение в разных режимах:

- `dev` запускает Next.js в режиме разработки;
- `start` запускает Next.js в режиме Production;
- `build` собирает ваше приложение Next.js для Production. Независимо от того, какой метод вы выберете, он сгенерирует базовый шаблон приложения Next.js, который мы видели ранее.

Если вы запустите это приложение с помощью `next dev` и перейдете Next.js по умолчанию на [](http://localhost:3000), то увидите примерно следующее:

![Тестовое приложение](https://api.pxstudio.pw/uploads/small_5483636076314624_82d24ba2ac.webp?1386155.900000006)



Next.js - это фреймворк, основанный на React, который позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью дополнительных функций предварительного рендеринга, таких как полноценный рендеринг на стороне сервера (SSR) и статическая генерация страниц (SSG).

large_5294398307303424.png

medium_5294398307303424.png

small_5294398307303424.png

thumbnail_5294398307303424.png

5294398307303424.png

small_clien-side-rendering.png

thumbnail_clien-side-rendering.png

clien-side-rendering.png

small_ssr.png

thumbnail_ssr.png

ssr.png

thumbnail_nextjs-example.png

nextjs-example.png

large_5483636076314624.webp

medium_5483636076314624.webp

small_5483636076314624.webp

thumbnail_5483636076314624.webp

5483636076314624.webp

Что такое Next.js и для чего он нужен?

15 лет назад для создания веб-сайта нужно было быть разработчиком, сегодня же создать веб-сайт может практически каждый. На сегодняшний день доступно множество платформ веб-разработки с бесплатными и платными шаблонами, которые пользователи могут легко загрузить, добавить контент (текст, изображения, видео и т. п.), нажать кнопку публикации и готово.

Но, несмотря на то, что их легко и быстро настроить, есть множество функций, которые могут отсутствовать в шаблоне, которые могут напрямую повлиять на цели вашего бизнеса.

С другой стороны, даже если шаблонное решение покрывает все ваши потребности, индивидуальное решение имеет свою, а иногда даже и большую стоимость.

Итак, как узнать, подходит ли вам такой путь? Начнем с самого начала.

> Если вы планируете редизайн и/или повторную разработку веб-сайта, сначала прочтите этот пост здесь. Несомненно, наличие устаревшего веб-сайта может навредить вашему бизнесу. Тем не менее, переделывать нужно гораздо больше, чем вы думаете.


## Что такое индивидуальное веб-решение?

**Индивидуальное веб-решение** - это индивидуальное решение для вашего бренда, бизнес-цели, продукта или услуги. Решение позволит вам иметь уникальный веб-сайт. Помимо очевидной уникальности дизайна веб-сайта, уникальный веб-сайт также включает в себя различные функции, разработанные так, чтобы быть максимально эффективными, чтобы помочь вашим бизнес-целям, а не навредить им.

### Зачем вам может понадобиться индивидуальное веб-решение?

И действительно индивидуальное решение помогает вам выделиться и получить конкурентное преимущество над вашими же конкурентами. Необходимость в нем для вашего бизнеса зависит от типа вашего бизнеса и типа веб-сайта, который вы хотите создать, - от его сложности.

Например, если у вас есть ресторан, вам не нужно много. Вероятно, будет достаточно простого веб-сайта с вашим меню, обзором команды и контактной информацией. Существуют тысячи готовых шаблонов, которые могут сделать именно это.

Но если вы ищете что-то, что поможет вашему ресторану выделиться (и не только с точки зрения дизайна, я также говорю о дополнительных функциях, таких как бронирование, обзоры, электронная торговля и т. д.), индивидуальный подход может быть как раз решением для вас.

> **Веб-разработка** и **веб-дизайн** - это два частично совпадающих термина, которые часто легко используются в сообщениях, как и этот, без четких различий. Итак, для ясности, думайте о **веб-дизайне** как об аспектах взаимодействия с пользователем при разработке веб-сайта (веб-графика, дизайн пользовательского интерфейса, что делает его «красивым»). **Веб-разработка** включает в себя внешнее и внутреннее кодирование. Работа, которая происходит за кадром. Работа, которая заставляет веб-сайт выглядеть так, как задумано, работает быстро и хорошо работает в разных браузерах.


## Преимущества индивидуальных веб-решений

### Брендинг

Во-первых, ваш веб-сайт будет иметь уникальный вид, соответствующий вашему бренду.

Имея сегодня так много готовых шаблонов, вы, наверное, заметили веб-сайты, которые выглядят очень и очень похожими. Это потому, что использовались те же шаблоны, и (в большинстве случаев) были изменены только изображения и текст. Быть оригиналом в пуле решений для копирования и вставки помогает вам выделиться на фоне остальных.

Благодаря уникальному веб-сайту, который клиенты раньше не видели, вы мгновенно привлекаете внимание и выглядите намного более профессионально и достойно доверия. Индивидуальные решения дают больше места для оригинального корпоративного брендинга, что жизненно важно для развития вашей компании как авторитетной и надежной в вашей области.

Наконец, с помощью специального решения вы можете настраивать каждый визуальный дюйм вашего экрана и все необходимые функции. Это означает, что вы сможете разработать веб-сайт полностью по своему вкусу и предпочтению вашей аудитории, включая возможность тестировать различные визуальные подсказки и/или функции, пока не найдете те, которые хорошо конвертируются.


### Прекрасные долгосрочные инвестиции

Хотя стоимость разработки индивидуального решения может быть выше, чем простое использование шаблона, это отличное **долгосрочное** вложение.

Например, пользовательские решения в веб-разработке легко масштабируются. Как только ваш бизнес начнет расти, ваши веб-разработчики легко масштабируют существующий веб-сайт или веб-приложение.

Кроме того, индивидуальные веб-сайты можно как можно более плотнее адаптировать к требованиям и целям вашего бизнеса. Поскольку они разрабатываются для индивидуальных клиентов, индивидуальные решения имеют гораздо более высокую рентабельность.


### Отлично подходят для сложных веб-сайтов

Допустим, вы выбрали WordPress в качестве платформы для своего веб-сайта и установили простой шаблон. Немного настройки, и вы готовы к работе. Через некоторое время вы непременно начнете добавлять различные плагины и функции, высококачественные фотографии и контент для блога.

Следующее, что вы узнаете, это то, что ваш сайт становится очень медленный. Индивидуальные решения позволяют устранить ненужное вредоносное ПО, сохраняя при этом функциональность. А с растущим ландшафтом API микросервисов вы можете еще больше сократить расходы. Вместо разработки определенных функций вы можете отказаться от известного решения и выполнить интеграцию, не влияя на скорость и производительность вашего сайта.


### Хороший пользовательский опыт

Создав веб-сайт, ориентированный на ваших идеальных клиентов, который отлично работает в различных браузерах и на разных устройствах и работает невероятно быстро, вы предоставляете своим посетителям потрясающий пользовательский интерфейс.

Один из наиболее важных факторов сегодня, как для поисковых систем, так и для ваших клиентов, лучший пользовательский опыт может повлиять на ваших клиентов, чтобы они предпочли вас вашим конкурентам.


### SEO

Большинство готовых шаблонов, в зависимости от платформы, не созданы с учетом производительности и скорости. И даже те, которые есть, требуют хорошего обслуживания, чтобы поддерживать их работоспособность. Нельзя сказать, что Google предпочитает настраиваемые веб-сайты и веб-приложения, но поскольку вы начинаете с нуля, вы строите свой веб-сайт с учетом производительности.

Такой подход может помочь вашему веб-сайту повысить рейтинг, потому что он будет быстрым и удобным как для настольных компьютеров, так и для мобильных. И в то время как вы занимаетесь более высоким рейтингом, вашим потенциальным клиентам будет проще найти вас.


## Недостатки индивидуальных решений в веб-разработке

### Стоимость

Разработка индивидуального решения, безусловно, обойдется вам дороже с точки зрения первоначальных затрат. Вам нужно будет нанять команду веб-разработчиков, потратить время на создание плана для своего веб-сайта, а затем потратить время на его разработку.

Однако, несмотря на то, что получение шаблона может показаться вам более доступным вначале, скорее всего вам, придется платить за лицензионные пакеты в течение последующего определенного периода времени, а также постоянно следить за частым обновлением тем/плагинов и в некоторой степени зависеть от шаблонов дизайнера.

### Трудоемкость

На создание веб-сайта требуется время. Наем веб-разработчиков тоже требует времени. На разработку веб-сайта тоже нужно время. Любые корректировки, исправления ошибок, обновления и обновления также требуют времени. Намного больше в отличие от использования шаблонов.


## Подведем итог

Просмотрите список плюсов и минусов выше, сравните их с вашими бизнес-целями и решите, какой выбор для вашего бизнеса является наиболее правильным.

Имейте в виду, что если вы ищете незамысловатый интересный дизайн, индивидуальный пользовательский интерфейс с настраиваемыми функциями и высокопроизводительными индивидуальными настройками, то разработка индивидуального решения - это ваш путь.

Это может стоить дороже, но из-за этого ваш бизнес получит больше прибыли.

Нужна специальная команда веб-разработчиков, которая поддержит ваши идеи и воплотит их в жизнь? Давайте поговорим. Напишите нам сегодня и узнайте больше о том, что мы можем сделать для вас и вашего бизнеса.

В наши дни любой бизнес нуждается в веб-сайте. Но не всем из них нужно собственное решение.

large_UnboxingDoodle.png

medium_UnboxingDoodle.png

small_UnboxingDoodle.png

thumbnail_UnboxingDoodle.png

UnboxingDoodle.png

Нужно ли вашему бизнесу индивидуальное веб-решение?

Без сомнения, наличие устаревшего веб-сайта может легко навредить вашему бизнесу. В конце концов, для большинства компаний веб-сайт часто является отправной точкой на пути покупателей их аудитории. Место, где они перемещают их от осознания к стадии рассмотрения и покупки.

Это верно для брендов с оборотом в миллионы рублей, так и местного бизнеса. Для фрилансеров и крупных компаний. Интернет-магазины и некоммерческие сайты.

Давайте сначала проясним кое-что.

**Никто не любит вкладывать деньги в переделку веб-сайта**. Однако в тот или иной момент нам всем, вероятно, придется это сделать, если мы хотим поддерживать здоровье нашего сайта и идти в ногу с текущими и будущими тенденциями.

Потребность в переделке (редизайне и/или переработке) выходит далеко за рамки личных предпочтений, одержимости причудливыми изображениями, крутыми шрифтами, броскими фотографиями, формами, набором технологий и т. д.

Наиболее распространенные причины переделки веб-сайта делятся на две основные категории: первая связана с **брендингом** и изменением маркетинговой стратегии, а вторая связана с **техническими проблемами** или тенденциями.

Позвольте мне объяснить, что я имею в виду.


## Анализ бренда, аудитории, конкурентов

Для большинства предприятий одной из основных причин переделки веб-сайта является изменение стратегии брендинга и/или маркетинга.

### Изменение посыла бренда

Если есть одна фраза, которая могла бы объяснить, как клиенты видят вашу компанию, то это, вероятно, постоянство бренда, отраженное в сообщениях бренда и визуальных эффектах бренда.

Формулировка является важной частью последовательного брендинга. Иметь копию, открытую для различных интерпретаций, — ужасная практика. Тщательно продумайте свое руководство по стилю контента, свои слоганы, голос бренда, заявление о миссии и о странице, конечно, все в соответствии с вашей первоначальной идеей.

Хотя обмен сообщениями с брендом очень важен, набор инструментов вашего бренда также должен состоять из стандартизированного логотипа, цветовой палитры, типографики, фотографии и многого другого. Если вы обнаружите какие-либо расхождения между этими элементами, возможно, потребуется капитальный ремонт веб-сайта.

Все это можно поместить под лейблом **развивающегося бренда**. Теперь вы можете подумать, что поддержание согласованности бренда предназначено для крупных компаний, таких как Adobe, Apple, Walmart и других, но если вы ожидаете, что ваша компания будет расти, вам придется это сделать. Кроме того, наличие всех документов в одном месте определенно сэкономит значительное количество рабочего времени для многих команд в вашей компании.



То, что мне это больше не нравится, не является достаточной причиной, чтобы обновлять сайт. Также есть ли какие-то гарантии, что у сайта улучшится рейтинг, если мы возьмем и переделаем его, если мы переделаем наш веб-сайт, улучшится ли наш рейтинг? (один из самых задаваемых вопросов от клиентов)


Нужно ли переделывать Ваш сайт?

## Что же такое MongoDB и NoSQL базы данных?

![](https://api.pxstudio.pw/uploads/mongo_DB_6c3c193358.png)

Согласно [википедии](http://yandex.ru/clck/jsredir?bu=68h39r&from=yandex.ru%3Bsearch%2F%3Bweb%3B%3B&text=&etext=4617.SUn9XW74uZ6hMJhIS9X72Y2HrRN9pkcKdKR2bnS40uDyp8pmLoclvwLhFcl1mvMI.9143da1c97f1f32c574db35694d76cd1c8e2767b&uuid=&state=WkI1WI4IbJHybCQJFouMIVy2s9lddBPkZffC6PSCC3gsnEK95LyhF0ZxKe8G8GA_unPuQRevCj4h-X3CMZi3dkJhIHn_-gG-BXHUWvoNfMVLMWMgWYSqrg,,&&cst=AiuY0DBWFJ5Hyx_fyvalFDDh0K5lKc8vq1zfu-_t8kAeJ3EG_1__NXgRnuNeFr3eB6-00c2AxfiA-HQv6VOm5OfodVpKoDcS3SxYK5zimR6vmAyyeZvnrBICuTfdYqHULwtIakx919gk8yahdPagVe4YxkEPHpqhPkgAW59NPIdOivbpUtWLvi76sZ6vEmcv5d0w-MBeaHoP-b8vwyxgzTfmHfIPcHQzB47TPCe2E44wPjITtUsWssBYLeYBIgl1XgpdgqofJn44R2K2mC_kS3ojN5JlBZkTQJh1eeySb4f1T_PbCeRZFdptF3q8VzTKpLG2pzBCP8wCCKyiq3ExGU4yRfpULDz13OQjZyX8WNghg_65gfDLzK8I0W78_VtYKG8QyXcT-GOXFQ0odod3MYTtFLVY6JRvQfChyo-0WXnjxECvNNtPUqswhX0qRzce-NgCCiVxKgg0N794KHuBgg9EagzrWed6tO-m8IND3trMFjZyFgdYiyf-IV_jykMbfdPjZsXH1eDl0F5E8Kdbb0miPUGlEQcvHoBHTM3E0I8pv0IQUy01r6v3XmlqsH0ImNnfg5iGg_QT8qiFBIZtRHbOx-P9-mIQJxFnQBvi_rqN3GaIWBqM8bbzPix2mvdFJ-LTdMEdtruLk60aBqCc3PWPF4LBRF63149X4zemAqDROoOmbmCdMO4-heEFFDDMzn3RxLrgB-GYiE0UbLWj4G66EC5w49IJsX_kAnKLAey-MULuO7cj9YSJgXZquXGWyRWxW2_VjILuqLXf941BuOdeqeJMuLVtlHQlP-aXciGWqMcxWwAzCmfPZj0yQanf2lOxoUfukDT2fV74Q_rolP1ubQdhqb4-NYkLypSvspk43UH0rbuz_dx_MKZafNwiG4wlXv7Gae8WBNzdaGHZJw,,&data=UlNrNmk5WktYejR0eWJFYk1LdmtxamVnNEJRWnJseWwyX0JzSlhyc2l1YUpDWmZVRlU4RUVHTjVkSWtZRDhtZFRqVEdoOVo1RmRDbGNBcmNyWEhna1ZwSXhxbjJYN1piZ1hWYWQ5S09tWEd2VTdYZlV6SGpwUSws&sign=115a487101adf5c70883294f18753b5c&keyno=0&b64e=2&ref=orjY4mGPRjk5boDnW0uvlrrd71vZw9kpVBUyA8nmgRG93VrviSzq444Hg1m0ocNml0kyftChxVz5MnCrbBnM_E5V85Fq-KfHkWPJhLaaVp0Mn0qAAq_4riVH2MG1BybWbvvAvTbJUrn5qejccc_z6Q,,&l10n=ru&rp=1&cts=1566739681125&mc=4.185703093006738&hdtime=204916):

> MongoDB - это документоориентированная система управления базами данных с открытым исходным кодом, не требующая описания схемы таблиц. Классифицирована как NoSQL, использует JSON-подобные документы и схему базы данных...

## Что значит документоориентированная или NoSQL?

**Документированная** БД хранит данные в виде **документов** и обычно реализуется с помощью подхода NoSQL. Эти документы имеют структуру **дерева**. Структура начинается с корневого узла и может содержать несколько **внутренних и листовых узлов**. Листовые узлы содержат данные, которые при добавлении документа заносятся в индексы, что позволяет даже при достаточно сложной структуре данных находить место искомых данных.

Документы могут быть организованы (сгруппированы) в **коллекции**. Аналог таблиц в реляционных БД. Но коллекции могут хранить другие коллекции. Хотя документы в коллекции могут быть с произвольным содержимым, принято использовать в коллекции документы со схожей структурой.

Документооиентированные БД применяются в система управления содержимым, издательском деле, документальном поиске и т.п. К СУБД данного типа относятся CouchDB, Couchbase, **MongoDB**, Berkeley DB.

В данной статье мы рассмотрим возможности NoSQL БД на примере MongoDB.

## Преимущества MongoDB

MongoDB - как раз относится к документоориентированным базам данных, которая хранит данные в виде JSON-подобных документов.

### JSON-документы

```js
{
  "_id": "5cf0029caff5056591b0ce7d",
  "firstname": "Денис",
  "lastname": "Иванов",
  "address": {
  "street": "Ленина ул.",
  "city": "Ижевск",
  "region": "Удмуртская республика",
  "zip": "426000",
  "hobbies": ["серфинг", "кодинг"]
}
```

Такие JSON-подобные документы поддерживают массивы и вложенные объекты. И позволяют строить гибкие и динамические схемы.

### Мощный язык запросов

Богатый и выразительный язык запросов, который позволяет фильтровать и сортировать по любому полю, независимо от того, насколько вложенным оно может быть в документе.

```js
db.users.find({ "address.zip" : "90404" })
{ "_id": "5cf0029caff5056591b0ce7d", "firstname": "Jane", "lastname": "Wu", "address":{}}
{ "_id": "507f1f77bcf86cd799439011", "firstname": "Jon", "lastname": "Davis", "address":{}}
{ "_id": "5349b4ddd2781d08c09890f3", "firstname": "Jim", "lastname": "White", "address":{}}
{ "_id": "5bf142459b72e12b2b1b2cd", "firstname": "Jeff", "lastname": "Taylor", "address":{}}
{ "_id": "5cf003283b23d04a40d5f88a", "firstname": "Jerry", "lastname": "Miller", "address":{}}
{ "_id": "5bf142459b72e12b2b1b2cd", "firstname": "Jai", "lastname": "Williams", "address":{}}
{ "_id": "5cf0036deaa1742dd225ea35", "firstname": "Jess", "lastname": "Johnson", "address":{}}
{ "_id": "54495ad94c934721ede76d90", "firstname": "Jill", "lastname": "Brown", "address":{}}
{ "_id": "566eb3c704c7b31facbb0007", "firstname": "Janet", "lastname": "Jones", "address":{}}
{ "_id": "5a999cc461d36489a27f2563", "firstname": "Jan", "lastname": "Smith", "address":{}}
```

### Предоставляет всю мощь реляционных БД плюс немного больше!

```js
session.start_transaction()
order = { line_items : [ { item : 5, quantity: 6 } ] }
db.orders.insertOne( order, session=session );
for x in order.line_items:
  db.inventory.update(
  { _id  : x.item } ,
  { $inc : { number : -1 * x.quantity } },
  session=session
)
session.commit_transaction()
```

## Что нужно чтобы начать с ней работать?

Для того, чтобы начать работать с этой базой данных есть два пути:

*  Облачные сервисы (это например [Mlab](https://mlab.com) или [MongoDB Atlas](https://mongodb.com));
* Локальная установка.

Если нет желания запариваться с установкой, то следуйте первому пути. Необходимо зарегистрироваться и далее создать базу данных с помощью внутреннего визарда. Который все сделает за вас и даст вам ссылку на БД, с которой мы и будем работать.

Но мы пойдем другим путем и запустим сервис mongoDB на локальной машине c Windows 10.

Для этого необходимо с официального сайта скачать два установочника, перед этим тоже зарегистрировавшись.

* MongoDB Server (для Windows);
* MongoDB Compass Community Edition.

Первое - это собственно сама база данных с драйверами для Windows. А второе - это GUI для более удобной работы с БД.

Процесс установки довольно простой и после установки двух пакетов. Необходимо запустить MongoDB Compass найдя его в панели приложений Windows 10.

![](https://api.pxstudio.pw/uploads/mongodb_compass_start_win10_fae67ac3ed.png)

После запуска мы увидим следущее окно:

![](https://api.pxstudio.pw/uploads/mongodb_compass_5da70111b7.png)

В MongoDB Compass мы можем работать как с локальной БД, так и с облачными сервисами [mlab.com]() и [mongodb.com]().



MongoDB - это документоориентированная система управления базами данных с открытым исходным кодом, не требующая описания схемы таблиц. Классифицирована как NoSQL, использует JSON-подобные документы и схему базы данных

thumbnail_https://pxstudio.pw/static/blog/mongodb-compass-start-win10.png

https://pxstudio.pw/static/blog/mongodb-compass-start-win10.png

large_https://pxstudio.pw/static/blog/mongodb-compass.png

medium_https://pxstudio.pw/static/blog/mongodb-compass.png

small_https://pxstudio.pw/static/blog/mongodb-compass.png

thumbnail_https://pxstudio.pw/static/blog/mongodb-compass.png

https://pxstudio.pw/static/blog/mongodb-compass.png

MongoDB для NodeJS туториал: Часть 1 - Установка MongoDB и соединение с базой данных

> [Strapi](https://github.com/strapi/strapi) с 48,5 тысячами звезд на **Github** стала одной из любимых CMS с открытым исходным кодом в экосистеме **Jamstack** благодаря своей универсальности и масштабируемости. Кроме того, идея получить полный контроль над приложением, которое вы создаете, без каких-либо ограничений API, очень заманчива.


## Что такое Strapi?

**Strapi** — это безголовая CMS, построенная на Node.js и React, которая позволяет вам использовать базу данных на ваш выбору. В настоящее время он поддерживает SQLite, MongoDB, MySQL и Postgres. Не секрет, что Strapi позиционирует себя как альтернативу WordPress.

Вы можете использовать Strapi для создания всего, что захотите, **от простого веб-сайта до большого приложения для электронной коммерции**. На их веб-сайте вы можете найти множество ресурсов, чтобы узнать, как интегрировать Strapi с самыми популярными фреймворками, такими как Gatsby.js, Next.js, Flutter и другими.

В Strapi интуитивно понятный интерфейс администратора как для пользователей, так и для разработчиков и редакторов. С точки зрения разработчика, вы можете легко определить свою API-модель контента благодаря их упрощенному конструктору типов контента. А с точки зрения редактора вас встретит интуитивно понятный пользовательский интерфейс, позволяющий быстро создавать контент.


## Пользовательский интерфейс

Админка выглядит чистой. Вы можете быстро получить доступ к функциям, которые вы хотите использовать. Отдельное спасибо за  получение стартовой страницы со всеми полезными ссылками, к которым вы можете получить доступ в случае, если вам понадобится какая-либо помощь.

![headless--strapi--dashboard.png](https://api.pxstudio.pw/uploads/headless_strapi_dashboard_3cf00c34b2.png)

Итак, в основном у вас есть эти разделы в области администрирования:

* **Типы коллекций / отдельные типы**: здесь живет ваша API-модель контента. Редакторы могут получить доступ сюда, чтобы заполнить данные, которые будут отправлены на веб-сайт / в приложение.

* **Плагины**: здесь вы можете увидеть установленные в данный момент плагины. Один из них очень важен: Конструктор типов контента, потому что с его помощью разработчик может создавать типы контента для API.

* **Общие**: перейдите на рынок плагинов, установите новые и получите доступ к глобальным настройкам панели инструментов и плагинов.


## Плагины

Когда вы устанавливаете Strapi в первый раз, вы обнаружите, что некоторые из плагинов установлены по умолчанию, которые обеспечивают отличные функции для вашего проекта, и другие, которые вы, возможно, захотите установить.

Например, недавно разработчики выпустили плагин, который занимается **интернационализацией**. Этот плагин позволяет вам создавать многоязычные веб-сайты/приложения и создавать лучший пользовательский опыт для вашей аудитории.

Если вы не видите функции/плагина, которые могут вам понадобиться для вашего конкретного варианта использования, вы можете создать его, немного познакомившись с React.js и Node.js, поскольку Strapi создан с использованием этих технологий.


## Как установить Strapi?

Установить и использовать Strapi очень просто. Вам понадобится только ваш любимый текстовый редактор и существующие менеджеры пакетов, такие как NPM или Yarn. Итак, запустите одну из этих команд на своем терминале:

```bash
yarn create strapi-app my-project --quickstart
npx create-strapi-app my-project --quickstart
```

Эти команды установят для вас Strapi и инициализируют начальный проект, так что вы сможете начать работать с ней перейдя по следующей ссылке [http://localhost:1337/admin](http://localhost:1337/admin).

Так просто, не правда ли? Посмотрите это [краткое руководство](https://www.youtube.com/watch?v=zd0_S_FPzKg) по началу работы, чтобы начать работу со Strapi менее чем за 3 минуты 🚀.


## Поддержка

У Strapi растет сообщество в Discord, Slack, Github и на их [форуме сообщества](https://forum.strapi.io/). Это здорово, потому что какой бы вопрос у вас ни возник, вы можете быть уверены, что в одном из их сообществ вы найдете ответ на него.

![скриншот форума](https://api.pxstudio.pw/uploads/headless_strapi_forum_9eb29f8057.avif)

Для поддержки предприятий вы можете проверить их [Enterprise Support Platform](https://support.strapi.io/support/home) и разместить тикеты, чтобы получить ответ от них.

Кроме того, вы можете посетить их [центр ресурсов](https://strapi.io/resource-center), чтобы найти множество вещей, которые помогут вам создавать с помощью Strapi, таких как стартеры, учебные пособия, академия Strapi и т. д.


## Цены

Отметим только то, что Strapi, как упоминалось ранее, имеет ОТКРЫТЫЙ ИСХОДНЫЙ КОД!!! 🎉, так что в базовой версии вы можете получить большинство мощных функций абсолютно бесплатно (навсегда), и разместить его на вашем сервере.

![ценообразование](https://api.pxstudio.pw/uploads/headless_strapi_pricing_1_a6e4fc6a2c.avif)

Но если вы хотите расширить функции на уровне предприятия, вы можете это сделать. Они предлагают несколько планов, чтобы разблокировать эти функции и получить от них базовую/расширенную поддержку:

![тарифные планы](https://api.pxstudio.pw/uploads/headless_strapi_pricing_2_43ded75f36.avif)

Если мысль о том, чтобы справиться с этим самостоятельно, заставляет вашу голову взорваться 🤯, не волнуйтесь. Кажется, они усердно работают над тем, чтобы предложить облачную версию, в которой они будут размещать Strapi для вас, и это здорово, потому что вы сможете забыть обо всем, что связано с сервером, и сосредоточиться только на своем продукте, и вы получите некоторые функции, такие как неограниченный среды и использования.

Здесь вы можете ознакомиться с функциями поддержки в различных планах, которые они предлагают:

![сравнение тарифных планов](https://api.pxstudio.pw/uploads/headless_strapi_pricing_3_ccd0f1fef8.avif)


## Плюсы:

* Бесплатный и с открытым исходным кодом;
* Полностью настраиваемый;
* Медиатека, вы можете управлять своими ассетами и подключать свою медиатеку к любому из поставщиков услуг хранения;
* Выбирайте между RESTful или GraphQL API;
* Маркетплейс для плагинов;
* Поддержка интернационализации;
* Возможность создавать собственные роли и разрешения.

## Минусы

* Вам необходимы базовые знания DevOps, чтобы запустить его в собственной среде;
* Плохая поддержка переноса или развертывания изменений данных между разными средами;
* Интерфейс администратора не очень отзывчивый;
* Базовая поддержка расширенного текстового поля.



Если вы хотите иметь полный контроль над CMS, быть независимым от политики компании, ограничений и т. д., взгляните на Strapi. Это безголовая CMS Node.js с открытым исходным кодом, которую вы можете разместить на своем сервере, с возможностью добавления пользовательских плагинов, позволяющих вам еще больше настроить ее.


headless--strapi--forum.avif

headless--strapi--pricing-2.avif

headless--strapi--pricing-1.avif

headless--strapi--pricing-3.avif

Обзор Strapi, цена и характеристики

> В прошлой [статье](https://pxstudio.pw/blog/chto-takoe-next-js-i-dlya-chego-on-nuzhen) мы вкратце упомянули, что в Next.js есть две формы пререндеринга: **статическая генерация** (SSG) и **генерация на стороне сервера** (SSR). В этой статье мы глубже окунемся в стратегии получения данных для каждого случая.

Мы поговорим о трех уникальных функциях, которые можно использовать для пререндеринга:

**getStaticProps** - (Статическая генерация) - получение данных во время сборки проекта;

**getStaticPaths** - (статическая генерация) - устанавливает динамические маршруты для предварительного рендеринга страниц на основе данных;

**getServerSideProps** - (серверный рендеринг) - получает данные на сервере при каждом запросе.


## getStaticProps

Если вы экспортируете асинхронную функцию getStaticProps со страницы, Next.js будет предварительно рендерить эту страницу во время сборки, используя props, возвращаемые getStaticProps.

```js
export async function getStaticProps(context) {
  return {
    props: {}, // будут переданы в компонент-страницу через props
  }
}
```

Объект `context` может содержать следующие параметры:

`params` - содержит параметры маршрута для страниц, использующих динамические маршруты. Например, если имя страницы **[id].js**, то параметры будут иметь вид **{ id: ... }**. Используется совместно с **getStaticPaths**.

`preview` - должен быть **true**, если страница находится в режиме предварительного просмотра, и не определен в противном случае.

`previewData` - содержит данные предварительного просмотра, установленные с помощью **setPreviewData**.

`locale` - содержит активный языковую локаль (если эта опция включена).

`locales` - содержит все поддерживаемые языки (если эта опция включена).

`defaultLocale` - содержит языковую локаль по умолчанию (если эта опция включена).

Функция **getStaticProps** должна всегда возвращать объект со следующим содержимым:

`props` - требуемый объект с параметрами, который будет получен компонентом страницы. Это должен быть [сериализуемый](https://ru.wikipedia.org/wiki/%D0%A1%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) объект.

`revalidate` - необязательный параметр, количество секунд, после которого может произойти повторный рендеринг страницы. Смотрите подробнее на странице инкрементальной статической регенерации.

`notFound` - необязательный параметр, позволяющее странице возвращать статус 404 и страницу. Ниже приведен пример того, как это работает:


```js
export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // будут переданы в компонент страницы в качестве пропсов
  }
}
```

> **Примечание:** `notFound` не требуется для режима **fallback: false**, поскольку только пути, возвращенные из **getStaticPaths**, будут предварительно отрисованы.

> **Примечание:** с `notFound: true` страница вернет 404, даже если ранее была успешно сгенерирована страница. Это предназначено для поддержки вариантов использования, таких как удаление созданного пользователем контента его автором.

`redirect` - необязательное значение перенаправления, позволяющее перенаправлять на внутренние и внешние ресурсы. Он должен соответствовать форме **{ destination: string, permanent: boolean }**. В некоторых редких случаях вам может потребоваться назначить пользовательский код состояния для более старых HTTP-клиентов для правильного перенаправления. В этих случаях вы можете использовать свойство `statusCode` вместо свойства `permanent`, но не то и другое вместе. Ниже приведен пример того, как это работает:

```js
export async function getStaticProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: { data }, // будут переданы в компонент страницы в качестве пропсов
  }
}
```

> **Примечание:** перенаправление во время сборки в настоящее время не разрешено, и если перенаправления известны во время сборки, их следует добавить в **next.config.js**.

> **Примечание:** вы можете импортировать модули в области верхнего уровня для использования в **getStaticProps**. Импорты, используемые в **getStaticProps**, не будут объединены для клиентской стороны.

> **Примечание:** не следует использовать **fetch()** для вызова маршрута API в getStaticProps. Вместо этого напрямую импортируйте логику, используемую в вашем маршруте API. Для этого подхода вам может потребоваться небольшой рефакторинг вашего кода. Получение из внешнего API - это нормально!

## Простой пример

Ниже показан пример, который использует **getStaticProps** для получения списка сообщений в блоге из CMS (системы управления контентом).

```jsx
// Пропс posts будет заполняться в процессе сборки, с помощью функции getStaticProps
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// Эта функция вызывается во время сборки на стороне сервера.
// Она не будет вызываться на стороне клиента, поэтому в этой
// функции можно к примеру, напрямую обратиться к БД.
export async function getStaticProps() {
  // Получаем данные с внешнего API
  // Можно использовать любую библиотеку для получения данных.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Эта функция возвращает объект c объектом props.
  // который в свою очередь будет передан в компонент Blog(код которого описан выше)
  return {
    props: {
      posts,
    },
  }
}

export default Blog
```

### Когда стоит использовать getStaticProps?

- Если данные, необходимые для рендеринга страницы, должны быть доступны во время сборки до запроса пользователя.
- Если данные берутся из безголовой (headless) CMS.
- Если данные могут быть кэшированы публично (т.е. когда данные, не специфичны для пользователя).
- Страница должна быть предварительно отрендерена (для SEO) и быть очень быстрой - getStaticProps генерирует файлы HTML и JSON, которые для повышения производительности могут быть кэшированы CDN.


В прошлой статье мы вкратце упомянули, что в Next.js есть две формы пререндеринга: статическая генерация (SSG) и генерация на стороне сервера (SSR). В этой статье мы глубже окунемся в стратегии получения данных для каждого случая.

Получение данных в Next.js

И здесь встает вопрос, а будут ли они работать вместе должным образом.

Итак, какие задачи перед нами стоят:

* Обеспечить стабильную сборку для быстрого создания новых проектов и прототипирования;
* Обеспечить статическую типизацию и проверку типов для улучшения качества кода;
* Перейти на новый Material UI 5, который претерпел очень много полезных изменений по сравнению с 4 версией (который для нашей студии уже стал стандартом, де-факто);

В этой статье мы соберем с вами сборку на Next.js + MUI5 + TypeScript.

Cвязка React+Typescript давно уже стала самой популярная для создания клиентских приложений. Их в своих проектах уже используют следующие бренды:
Yandex, Тинькофф, ВК, Avito, Сбербанк, Контур, Netflix, Instagram, Pinterest, AirBNB и другие крупные компании.


## Next.js

Next.js — это основанный на React фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA, т.е. так называемых одностраничных приложений. Известно, что основным недостатком одностраничных приложений или SPA являются проблемы с индексацией страниц таких приложений поисковыми роботами, что негативно влияет на SEO.


## TypeScript

TypeScript (далее TS) - это надстройка над JavaScript (далее JS), которая добавляет [статическую типизацию](https://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%82%D0%B8%D0%BF%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) и еще кучу полезных фишек в нативный JS, старается исправить большинство недочетов и предоставляет нам мощнейшие иструменты для улучшения качества кода. Про все достоинства и недостатки TS подробнее можно почитать в других статьях. Например, [здесь](https://habr.com/ru/company/macloud/blog/559902/).

Наиболее распространенными ошибками, совершаемыми JavaScript-разработчиками, являются ошибки вида, когда вместо ожидаемого значения используется неправильное. Это может быть связано с простыми опечатками, непониманием интерфейса используемой библиотеки, неверными предположениями о поведении кода во время выполнения и т.д. Цель TypeScript - осуществлять проверку типов значений, используемых в программе, написанной на JavaScript. TypeScript - это инструмент, который выполняет свою работу до запуска кода (поэтому его называют статическим) и обеспечивает использование приложением значений правильных типов.

О том, что дает нам TypeScript в React можно подробнее прочитать [здесь](https://medium.com/maddevs-io/react-typescript-b36a6a91a595).


## MUI5 (MaterialUI 5)

MUI - это довольно надежная, настраиваемая и доступная библиотека базовых и расширенных компонентов, позволяющая создавать собственную систему дизайна и быстрее разрабатывать приложения на React.

## Собираем шаблон

### 1. Установка Next.js и TypeScript

Для начала сборки нам потребуется создать шаблонный проект на Next.js + Typescript. Next.js поддерживает
TypeScript из коробки, поэтому все, что нам нужно сделать на этом этапе, это набрать в консоли:

```bash
yarn create next-app --typescript
```

Где флаг --typescript как раз указывает на создание проекта с надстройкой TypeScript.

После запуска команды вам предложат задать имя для проекта, которое и будет совпадать с именем папки,
в которой создастся проект.

### 2. Установка MUI

С установкой MaterialUI-5 все немного сложнее ;)

Для начала в проект устанавливаем следующие пакеты:

```bash
yarn add @emotion/cache @emotion/react @emotion/server @emotion/styled @mui/icons-material @mui/material
```

### 3. Редактируем файл _app.js

Next.js использует компонент App для инициализации страниц, поэтому вы можете переопределить поведение по умолчанию,
который позволит использовать очень интересные вещи:

1. Сохранение частей макета при переключении между страницами;
2. Сохранение состояния при навигации по страницам;
3. Пользовательская обработка ошибок;
4. Встраивание дополнительных данных на страницу;
5. Добавление глобальных CSS-стилей.

Что нужно сделать?

Идем в документацию Next.js и открываем раздел [Advanced Features/Custom App](https://nextjs.org/docs/advanced-features/custom-app).
Копируем оттуда весь код и создаем файл `_app.js` в папке `/pages`

```jsx
// import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp
```

После этого необходимо добавить несколько изменений в файл `_app.js`

```jsx
import Head from 'next/head'
import type { AppProps } from 'next/app'
import { ThemeProvider } from '@mui/material/styles'
import { CssBaseline } from '@mui/material'
import { CacheProvider, EmotionCache } from '@emotion/react'
import theme from '../styles/theme'
import createEmotionCache from '../utils/createEmotionCache'

const clientSideEmotionCache = createEmotionCache()

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache
}

export default function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }: MyAppProps) {
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>Change title in _app.tsx</title>
        <meta name="viewport" content='initial-scale=1, width=device-width' />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  )
}
```

### 4. Добавляем файл _document.js

Файл `_document.js` в Next.js обычно используется для дополнения тегов `<html>`
и `<body>` вашего приложения. Это необходимо, потому, что страницы Next.js пропускают
определение разметки окружающего документа.

Создаем в папке `/pages` файл `_document.js`. И вписываем сюда следующий код.

```jsx
import React from 'react'
import Document, { Html, Head, NextScript, Main } from "next/document"
import createEmotionServer from "@emotion/server/create-instance"
import theme from '../styles/theme'
import createEmotionCache from "../utils/createEmotionCache"

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="ru">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
          <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const originalRenderPage = ctx.renderPage

  const cache = createEmotionCache()

  const { extractCriticalToChunks } = createEmotionServer(cache)

  ctx.renderPage = () => originalRenderPage({
    enhanceApp: (App: any) => function EnhanceApp(props) {
      return <App emotionCache={cache} {...props} />
    }
  })

  const initialProps = await Document.getInitialProps(ctx)

  const emotionStyles = extractCriticalToChunks(initialProps.html)
  const emotionStyleTags = emotionStyles.styles.map(style => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ))

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags]
  }
}
```

### 5. Пишем первую страницу на MaterialUI 5

```jsx
import { Link, Typography } from '@mui/material'
import { NextPage } from 'next'
import NextLink from 'next/link'
import Layout from '../components/Layout'

const HomePage: NextPage = () => {
  return (
    <Layout title="Главная | Next.js + TypeScript Example">
      <Typography component="h1" variant='h1'>Привет, Next.js 👋</Typography>
      <Typography>
        <NextLink href="/about" passHref>
          <Link>О нас</Link>
        </NextLink>
      </Typography>
    </Layout>
  )
}

export default HomePage
```


Все на этом туториал завершен. Код можно найти на [Github](https://github.com/reactcoder-it/with-mui5-and-typescript)

Очень часто при старте проекта необходимо выбрать набор инструментов, которые значительно упрощают разработку и, которые можно в дальнейшем использовать и в других проектах.

Стартовый шаблон Next.js + MUI5 + TypeScript

> Перевод [документации](https://nextjs.org/docs/authentication)
>
> Процесс аутентификации - это процесс проверки, кем является пользователь, а процесс авторизации контролирует, к чему пользователь может получить доступ. Next.js поддерживает несколько шаблонов аутентификации, каждый из которых предназначен для совершенно разных вариантов использования. На этой странице будет рассмотрен каждый случай, чтобы вы могли выбрать для своего проекта подходящий исходя из своих ограничений.

## Паттерны аутентификации

Первый шаг к тому, чтобы определить, какой шаблон аутентификации вам нужен, — это понять, какую стратегию выборки данных вы хотите использовать. Затем мы можем определить, какие поставщики аутентификации поддерживают эту стратегию. Существует два основных шаблона:

* Использование статической генерации страницы на сервере с последующей подгрузкой данных о пользователе на стороне клиента;
* Извлечение пользовательских данных на стороне сервера, чтобы устранить появление неаутентифицированного контента.

## Аутентификация статически сгенерированных страниц

Next.js автоматически определяет, что страница является статической, если нет требований к блокирующим данным. Об этом говорит отсутствие на странице функций **getServerSideProps** и **getInitialProps**. Вместо этого ваша страница может отображать состояние загрузки данных на пришедшей с сервера странице, а затем получать данные пользователя на стороне клиента.

Одним из преимуществ этого паттерна является то, что он позволяет обслуживать страницы из глобальной CDN и предварительно загружать их с помощью **next/link**. На практике это приводит к более быстрому **TTI** (Time to Interactive).

Давайте рассмотрим пример страницы профиля. Он изначальное отобразит загрузочный скелет и как только запрос пользователя будет завершен, он покажет имя пользователя:

```jsx
// pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // Получение пользовательских данных на клиенте
  const { user } = useUser({ redirectTo: '/login' })

  // То, что будет рендериться на сервере
  if (!user || user.isLoggedIn === false) {
    return <Layout>Загрузка...</Layout>
  }

  // После того, как данные пользователя будут загружены, отобразится содержимое страницы ниже
  return (
    <Layout>
      <h1>Ваш профиль</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile
```

Посмотреть этот [пример](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session) в действии вы можете на [странице](https://iron-session-example.vercel.app/).

## Аутентификация при SSR

Если вы экспортируете асинхронную функцию **getServerSideProps** со страницы, Next.js будет предварительно рендерить эту страницу при каждом запросе, используя данные, возвращаемые **getServerSideProps**.

```jsx
export async function getServerSideProps(context) {
  return {
    props: {}, // Будут переданы в компонент страницы через props
  }
}
```

Давайте преобразуем пример загрузки данных пользователя, чтобы использовать рендеринг на стороне сервера. Если есть сеанс, верните пользователя в качестве опоры для компонента «Профиль» на странице. Обратите внимание, что в этом примере нет скелета загрузки.

```jsx
// pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // Показываем данные пользователя. Обработка состояния загрузки не требуется!
  return (
    <Layout>
      <h1>Ваш профиль</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile
```

Преимуществом этого шаблона является предотвращение появления неаутентифицированного контента перед тем как поступят пользовательские данные. Важно отметить, что получение пользовательских данных в **getServerSideProps** блокирует рендеринг до тех пор, пока не будет разрешен запрос к вашему поставщику аутентификации. Чтобы предотвратить создание узкого места и увеличение вашего **TTFB** (время до первого байта), вы должны обеспечить быстрый запрос аутентификации. В противном случае рассмотрите статическую генерацию.

## Провайдеры аутентификации

Теперь, когда мы обсудили паттерны аутентификации, давайте рассмотрим конкретных поставщиков и рассмотрим, как они используются с Next.js.

### Перенесите свою собственную базу данных пользователей

Если у вас есть существующая база данных с пользовательскими данными, вы, вероятно, захотите использовать решение с открытым исходным кодом, которое не зависит от поставщика.

- Если вам нужна низкоуровневая, зашифрованная утилита сеанса без сохранения состояния, используйте [iron-session](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session).
- Если вам нужна полнофункциональная система аутентификации со встроенными провайдерами (Google, Facebook, GitHub…), JWT, JWE, электронной почтой/паролем, магическими ссылками и многим другим… используйте [next-auth](https://github.com/nextauthjs/next-auth-example).

Обе эти библиотеки поддерживают любой шаблон аутентификации. Если вы заинтересованы в [Passport](http://www.passportjs.org/), у нас также есть примеры для него с использованием безопасных и зашифрованных файлов cookie:

- [with-passport](https://github.com/vercel/next.js/tree/canary/examples/with-passport);
- [with-passport-and-next-connect](https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect).

## Другие провайдеры:

Чтобы увидеть примеры с другими поставщиками аутентификации, проверьте папку [примеров](https://github.com/vercel/next.js/tree/canary/examples).

- [Auth0](https://github.com/vercel/next.js/tree/canary/examples/auth0);
- [Clerk](https://github.com/vercel/next.js/tree/canary/examples/with-clerk);
- [Firebase](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication);
- [Supertokens](https://github.com/vercel/next.js/tree/canary/examples/with-supertokens).

Процесс аутентификации - это процесс проверки, кем является пользователь, а процесс авторизации контролирует, к чему пользователь может получить доступ. Next.js поддерживает несколько шаблонов аутентификации, каждый из которых предназначен для совершенно разных вариантов использования. На этой странице будет рассмотрен каждый случай, чтобы вы могли выбрать для своего проекта подходящий исходя из своих ограничений.

Стратегии аутентификации в Next.js

> Если вы хотите использовать автономную CMS, которая выделяется с точки зрения SEO? Вы наткнулись на нужную статью. В этом посте я объясню вам, как сделать Strapi лучшей системой управления контентом для вашего SEO.

## Что такое Headless CMS

Headless CMS (или буквально, безголовая CMS) - это внутренняя система управления контентом (CMS), созданная с нуля как репозиторий контента, который делает контент доступным через API для отображения на любом устройстве.

Headless CMS также особенно подходят для веб-сайтов, разработанных с использованием модели Jamstack, где JavaScript, API и разметка работают вместе, чтобы упростить веб-разработку и улучшить взаимодействие с пользователем. Использование Jamstack для успеха в SEO дает реальное преимущество.

Если вы хотите узнать об этом больше, мы опубликовали полное руководство по [Headless CMS](https://strapi.io/headless-cms-guide). Не стесняйтесь качать, это бесплатно;)

Термин «безголовый» означает, что в отличие от классической CMS, ваш контент не привязан напрямую к интерфейсу по умолчанию. Выбирая безголовую CMS, вы получаете больше гибкости, поскольку можете использовать Strapi с любым интерфейсом, который захотите. Вы можете использовать свой контент с Next.js, Gatsby, Nuxt.js, Jekyll и другими.

Но со стороны SEO все должно быть создано вашими же руками. Вам решать, как создавать контент, дружественный к SEO. Настройка и гибкость Strapi позволит вам оптимизировать структуру контента и улучшить SEO вашего сайта.

Я покажу вам лучшие практики, которые мы разработали для нашего веб-сайта и который очень хорошо работает в области SEO.


## Лучшие практики SEO

Когда вы создаете контент для своего веб-сайта, вы должны учитывать определенные аспекты:

* Построение URL-адресов;

* Метаданные и медиа;

* Структурированные данные;

* Кластеризация контента.

Рассмотрим каждый из этих аспектов более подробно. Я создам для этого пустой проект Strapi, в котором буду создавать основные компоненты для SEO.

(продолжение следует):


Оригинал статьи: [Headless CMS and Strapi SEO best practices](https://strapi.io/blog/headless-cms-strapi-seo-best-practices)

Если вы хотите использовать автономную CMS, которая выделяется с точки зрения SEO? Вы наткнулись на нужную статью. В этом посте я объясню вам, как сделать Strapi лучшей системой управления контентом для вашего SEO.

Лучшие практики SEO в Headless CMS на примере Strapi

> [Перевод официальной документации](https://nextjs.org/docs/basic-features/pages)

> Эта документация справедлива, для **Next.js v9.3** и выше. Если вы используете более раннюю версию, перейдите по [ссылке](https://nextjs.org/docs/tag/v9.2.2/basic-features/pages).

В Next.js, страница - это обычный React-компонент, экспортированный из **.js**, **.jsx**, **.ts** или **.tsx** файла в папке **pages**. Каждая находящаяся в этой папке страница, ассоциируется с роутом.

**Например:** если вы создадите файл **pages/about.js** и напишите код, как в примере ниже, он будет доступен по url **/about**.

```jsx
function About() {
  return <div>About</div>
}

export default About
```

## Страницы с динамической маршрутизацией

Next.js поддерживает страницы с динамической маршрутизацией. Например, если вы создадите файл **pages/posts/[id].js**, он будет обрабатывать следующие пути **/posts/1**, **/posts/2** и т.д.

> Для того, чтобы изучить больше о динамической маршрутизации посетите [страницу](https://nextjs.org/docs/routing/dynamic-routes).

## Предварительный рендеринг

По умолчанию в Next.js используется предварительный рендеринг всех созданных в папке **pages** страниц. Это означает, что Next.js генерирует HTML для каждой страницы заранее, вместо того, чтобы это делать с помощью JS на стороне клиента. Так это приводит к повышению производительности и улучшению SEO.

Каждая сгенерированная HTML-страница  дополняется минимальным кодом на JS, необходимым для этой страницы. Когда страница загружается браузером, ее JavaScript-код запускается и страница становится полностью интерактивной. Этот процесс называется [гидратацией](https://en.wikipedia.org/wiki/Hydration_(web_development)).

## Различают две формы предварительного рендеринга:

Next.js имеет две формы предварительного рендеринга: **статическую генерацию (SSG)** и **рендеринг на стороне сервера (SSR)**. Разница заключается лишь в том, в какой момент генерируется HTML-код для страницы.

* **Статическая генерация (рекомендуется):** HTML генерируется один раз во время сборки и дальше будет повторно загружаться при каждом запросе.
* **Рендеринг на стороне сервера:** HTML генерируется при каждом запросе.

Важно отметить, Next.js позволяет вам выбрать, какую форму предварительного рендеринга вы хотели бы использовать для каждой страницы в проекте. Вы можете создать "гибридное" Next.js приложение, используя статическую генерацию для большинства страниц и используя рендеринг на стороне сервера для других.

Мы рекомендуем использовать статическую генерацию вместо рендеринга на стороне сервера по соображениям производительности. Статически сгенерированные страницы могут кэшироваться CDN без дополнительной настройки. Однако в некоторых случаях рендеринг на стороне сервера может быть единственным вариантом.

Вы также можете использовать **рендеринг на стороне клиента** (CSR) наряду со статической генерацией или рендерингом на стороне сервера. Это означает, что некоторые части страницы могут быть полностью отрисованы с помощью JavaScript на стороне клиента. Чтобы узнать больше, ознакомьтесь с документацией [по получению данных](/blog/poluchenie-dannyh-v-next-js).

В Next.js, страница - это обычный React-компонент, экспортированный из .js, .jsx, .ts или .tsx файла в папке pages. Каждая находящаяся в этой папке страница, ассоциируется с роутом.

Страницы в Next.js

> В статье рассказываем о формате разметки JSON-LD. Какие у нее есть преимущества и как ее лучше внедрить. Знаний кода не потребуется

Микроразметка используется для того, чтобы поисковые роботы лучше понимали структуру и направленность контента на вашем сайте.

## Для чего ее нужно добавлять на сайт?

Она улучшает внешний вид сниппетов в результатах поиска и как, следствие увеличивает кликабельность ссылки.

Сравните, какая ссылка более информативнее и привлекательнее для пользователя:

![Результаты поиска](https://api.pxstudio.pw/uploads/format_mikrorazmetki_json_ld_chto_eto_takoe_112f96c8aa.png)


## Почему стоит использовать микроразметку JSON-LD на сайте?

Во-первых микроразметку можно внедрить с помощью нескольких видов синтаксиса (способов разметить данные в коде HTML-страницы):

* микроформаты (hCard, hCalendar и др.);

* микроданные (microdata);

* RDFa;

* JSON-LD.

Недостаток первых трех способов в громоздкости синтаксиса и необходимости добавлять HTML-код внутрь тега <body>. Для более простой работы используется формат передачи данных JSON-LD.

> **JSON-LD** («JavaScript Object Notation for Linked Data») — дословно «объектная нотация JavaScript для связанных данных». Формат разработан в 2010 году консорциумом W3C для упрощения передачи связанных данных, в частности, дает возможность размечать страницы с помощью словаря Schema.org. Работает на базе текстового формата JSON.

JSON-LD в отличии от HTML-разметки имеет ряд неоспоримых преимуществ:

* содержит меньше кода, чем `microdata` или `RDFa`, проще воспринимается;

* [рекомендован Google](https://developers.google.com/search/docs/guides/intro-structured-data?hl=ru) в качестве основного способа микроразметки;

* существуют для многих популярных CMS собственные плагины, которые облегчают внедрение микроразметки;

* разметка внедряется посредством [JavaScript](https://ru.wikipedia.org/wiki/JavaScript) и видна только поисковым роботам.

> К сожалению, на момент написания статьи Яндекс не поддерживает JSON-LD (исключение - Яндекс-Почта). Но страницы с JSON-LD отлично проходят валидацию и в Яндекс и Google.

## Куда писать код микроразметки JSON-LD

Google рекомендует внедрять код JSON-LD в тег `<head>`. Хотя работать он будет и в теге `<body>`.

Базовая конструкция разметки JSON-LD:

```html
<script type="application/ld+json">
{
  //между фигурными скобками указываются элементы разметки
}
</script>
```

Эта конструкция сообщает браузеру, что будет обращение к JavaScript, содержащему JSON-LD.

Синтаксис JSON-LD и JSON идентичен. Разница лишь в том, что в JSON-LD есть так называемые зарезервированные ключи, которые позволяют задать контекст описания или связать объекты. Так, ключ `@context` указывает на словарь объектов, а `@type` — на тип сущности. Всего таких ключей 13 — все они описаны на официальном сайте [W3.org](https://www.w3.org/).

В статье рассказываем о формате разметки JSON-LD. Какие у нее есть преимущества и как ее лучше внедрить. Знаний кода не потребуется

small_format-mikrorazmetki-json-ld-chto-eto-takoe.png

thumbnail_format-mikrorazmetki-json-ld-chto-eto-takoe.png

format-mikrorazmetki-json-ld-chto-eto-takoe.png

Формат микроразметки JSON-LD: Для чего он?

В формах, Chrome автоматически заполняет поля электронной почты и пароля. Это абсолютно нормальное и удобная фишка, однако Chrome меняет цвет фона на бледно-желтый, который может очень сильно подпортить дизайн. Сейчас покажем как эту ситуацию можно исправить.

Код ниже прекрасно работает, вы можете изменить стили ввода поля, а также стили текста внутри поля ввода:


> Здесь вы можете использовать любой цвет, например **white**, **#DDD**, **rgba(102, 163, 177, 0.45)**.
>
> Но **transparent** здесь не сработает.

```css
/* Можно изменить белый на любой другой цвет ;)*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
```

Как можно изменить цвет текста:

```css
/* Изменение цвета автозаполнения */
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}
```

> Совет: не используйте большой радиус размытия (сотни или тысячи). Это бесполезно и может привести к загрузке процессора на более слабых мобильных устройствах. (Также верно для реальных внешних теней). Для обычного поля ввода высотой 20px «радиус размытия» 30px будет его полностью охватывать.

В формах, Chrome автоматически заполняет поля электронной почты и пароля. Это абсолютно нормальная и удобная фишка, однако Chrome меняет цвет фона на бледно-желтый, который может очень сильно подпортить дизайн. 

Удаление цвета фона ввода для автозаполнения Chrome?

VSCode (или Visual Studio Code от Microsoft) - является одним из самых популярных редакторов кода. Помимо того, что он имеет целый ряд собственных достоинств, он позволяет расширять свой функционал внешними плагинами и таким образом увеличивать продуктивность программиста. VSCode - это результат упорной работы Microsoft в сфере открытого исходного кода. Сам по себе редактор в готовой сборке доступен бесплатно, а его исходный код можно найти на [Github](https://github.com/Microsoft/vscode/).

Одной из причин популярности VSCode является та самая система плагинов, которая значительно расширяет возможности самого редактора.

1. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Расширение Live Server позволяет запустить свой собственный локальный сервер для разработки и тестирования кода. В нем есть функция 'горячей' перезагрузки кода, как для статических страниц, так и для динамических страниц.

В настройках расширения можно установить номер порта и браузер по умолчанию, а также оно поддерживает HTTPS и прокси.

![Live Server](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)


2. [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

В процессе разработки часто приходится добавлять в свои проекты различные зависимости. И несмотря на то, что модульная разработка в настоящее время занимает очень важное место в разработке вообще, лучше все же подходить к импортам с осторожностью.

Плагин Import Cost для JavaScript и TypeScript позволяет оценивать зависимости на лету.

![Import Cost](https://miro.medium.com/max/1676/1*quov3TFpgG2ur7myCLGtsA.gif)


3. [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.

![Git Graph](https://github.com/mhutchie/vscode-git-graph/raw/master/resources/demo.gif)

4. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.

![GitLens](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)

5. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier — один из лучших плагинов для разработчиков, которым необходимо следовать четко сформулированному набору правил при разработке. Это замечательный плагин, который позволяет вам использовать пакет Prettier. Prettier — отличный инструмент для структурирования кода.

Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.

> Надеемся, что расширения из нашего списка помогут вам еще лучше организовать ваш процесс разработки.



VSCode (или Visual Studio Code от Microsoft) - является одним из самых популярных редакторов кода. Помимо того, что он имеет целый ряд собственных достоинств, он позволяет расширять свой функционал внешними плагинами и таким образом увеличивать продуктивность программиста. VSCode - это результат упорной работы Microsoft в сфере открытого исходного кода.

Top 5 популярных плагинов для VSCode

Как выглядит Ваш HTML-макет, наверное как-то так:

```html
<body>
	<div class="header" id="site-header">
		<div class="site-nav">
			<ul>
				<li><a href="/">Главная</a></li>
				<li><a href="/">О нас</a></li>
				<li><a href="/">Контакты</a></li>
			</ul>
		</div>
	</div>
	<div class="content-wrap">
		<div class="intro">Это сайт, состоящий из одних div-ов</div>
	</div>
	<div class="container"></div>
</body>
```

Большинство из нас используют элемент <div> по умолчанию, потому что это самый быстрый способ создания макета HTML. Возникает соблазн убрать лишнюю HTML-разметку и сосредоточиться на CSS и JavaScript.

Несмотря на то, что полное построение страницы с использованием тегов div может облегчить работу. Это также может привести к проблемам в будущем.


## Проблемы с использованием только тегов div

Использование `div` само по себе не является проблемой! Он выполняет свою функцию и нет причин не использовать его.

Но использование только `div`-ов в вашем проекте может вызвать недопонимание, как минимум у других участников проекта.


## Проблемы с читаемостью

Если вы когда-либо смотрели на чужой или даже на свой собственный код через несколько месяцев после его написания, может быть сложно читать, если он заполнен исключительно элементами `<div>`.

Расшифровка макета может занять гораздо больше времени, чем необходимо, что уменьшит вашу производительность. Просто попытка выяснить, где находится закрывающий тег `</div>` для определенного блока кода, может быть утомительной.


## Проблемы доступности

Соблюдение строгих правил - это не только цвет, контраст и субтитры. По оценкам Всемирной организации здравоохранения [who.int](https://www.who.int/ru), 285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов - слепые и 246 миллионов - слабовидящие.

Это еще одна причина, по которой важно, чтобы ваш HTML-код был как можно более доступным. А это значит, что вы должны писать семантический код.

Программам чтения с экрана обязательно нужен контекст, чтобы правильно читать веб-страницу вслух. Для программы чтения с экрана такие элементы, как `<div>` и `<span>`, ничего не значат. Семантические блоки, такие как `<form>` и `<button>`, легче анализировать.


## Проблемы согласованности

Когда вы знаете, чего ожидать от работы над проектом в команде, вы станете намного эффективнее. Кроме того, в вашем коде будет меньше ошибок. Установка стандарта для использования семантического HTML имеет смысл, потому что любому, кто возьмется за проект, будет легче понять макет.

Кроме того, когда вы начнете применять или настраивать CSS для HTML-документа, вы обнаружите, что гораздо быстрее и проще находить определенные элементы, когда в макете использовался семантический HTML.


## Проблемы SEO

При использовании семантической разметки поисковые системы будут рассматривать ее содержимое как важные ключевые слова, влияющие на поисковый рейтинг страницы. [Веб-документы MDN](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)

Что такое семантический HTML?

Наиболее четкое определение семантического HTML, которое я нашел, гласит:

> Семантический элемент четко описывает его значение как для браузера, так и для разработчика.

Использование семантического HTML похоже на разницу между указанием на объект в небе и словами: «Смотри, объект!» или "Смотри, самолет!"

Подобно тому, как описание объектов реального мира упрощает повседневное общение, семантический HTML упрощает чтение кода.

Фактически, использование семантического HTML отмечено как часть стандарта [HTML5](https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element):

> Авторам настоятельно рекомендуется рассматривать элемент div как крайний случай, когда никакой другой элемент не подходит. Использование более подходящих элементов вместо элемента `div` улучшает доступность для читателей и упрощает сопровождение для авторов.

Например, что проще сканировать:

```html
<div class="quote" id="twain-quote">
"Get your facts first, then you can distort them as you please." – Mark Twain
</div>
```

или

```html
<blockquote>
"Get your facts first, then you can distort them as you please." – Mark Twain
</blockquote>
```

Во втором примере вы можете увидеть элемент `<blockquote>`, который сразу понимается как текст, который необходимо отобразить в формате цитаты.

Использование альтернатив `div` может потребовать больше размышлений, но это дополнительное планирование с семантическим HTML того стоит.


## Альтернативы <div> в HTML

Поговорим о некоторых наиболее распространенных альтернативах `div`. Скорее всего, вы уже видели эти элементы раньше, но здесь мы подробно расскажем, для чего они нужны и как их использовать.

### Элемент <nav>

```html
<nav>
	<ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Contact</a></li>
	</ul>
</nav>
```

Элемент `nav` - это именно то, на что он похож. Этот элемент используется для обозначения набора навигационных ссылок.

Как упоминалось ранее, это также позволяет программам чтения с экрана решать, отображать ли этот тип контента изначально или нет. Элемент `nav` лучше всего использовать для основного блока навигационных ссылок в документе.


### Элемент <main>

```html
<main>
	<h1>Заголовок 1</h1>
	<h2>Заголовок 2</h2>
	<p>
            Стоит отметить, что принцип восприятия стабилизирует департамент маркетинга и продаж, не считаясь с затратами.
            Медийный канал нетривиален. Перераспределение бюджета, не меняя концепции, изложенной выше, подсознательно
            притягивает культурный традиционный канал. Как предсказывают футурологи рейтинг программирует ролевой диктат
            потребителя.
        </p>
</main>
```

Подобно `<nav>`, элемент `<main>` используется так, как он звучит (снова работает семантика). Этот элемент обертывает блоки кода, которые определяют основное содержимое страницы или документа. Основной элемент будет находиться между открывающим и закрывающим тегами `<body>`.


### Элемент <section>

```html
<section>
<h1>Лучший бутерброд на свете</h1>
<p>Лучший бутерброд - баранина, салат и помидор, а баранина вкусная и нежирная. Это так задорно, мне это нравится.
</p>
</section>
```

Элемент `<section>` - отличный пример использования альтернативы `div` для разделения содержимого.

В приведенном выше примере мы разделяем введение и вводный абзац на два раздела. Поиск и стилизация этих разделов в нашем CSS-документе будет намного быстрее, чем поиск класса `<div>`.


### Элемент <header>

```html
<header>
<img src="/" id="logo">
</header>
```

Элемент `<header>` отличается от элемента `<head>` тем, что вы можете использовать его несколько раз в документе.

Например, вы можете использовать один набор элементов `<header>` для размещения логотипа, а другой набор для описания заголовка для определенной части контента, например статьи (подробнее об этом позже).

### Элемент <footer>

```html
<footer>
<p>© 2021 Все права защищены. Не воровать.</p>
<p>Связаться: <a href="mailto:jiffy@jiffysites.com">Email Jiffy!</a></p>
</footer>
```

Как и в случае с элементом `<header>`, вы можете использовать элементы `<footer>` в любом месте вашего HTML-документа.

Типичное использование `<footer>` - для информации об авторских правах или авторе. Вы также можете использовать элемент нижнего колонтитула в качестве закрытия внутри элемента `<section>`.

## Менее распространенные альтернативы <div>

Есть также некоторые элементы, которые вы, возможно, не видели раньше или видели очень редко. Но они действительно пригодятся, и их изучение поможет сделать ваш код более читабельным.

### Элемент <aside>

```html
<p>Мое любимое телешоу всех времен - Маппет-шоу. Это мило, весело и блестяще.</p>
<aside>
<h3>Маппет-шоу</h3>
<p>Маппет-шоу было создано Джимом Хенсоном и транслировалось с 1976 по 1981 год.</p>
</aside>
```

В кино или театре `aside` известен как драматический прием, в котором персонаж обращается к аудитории отдельно от основного диалога.

Именно так мы можем использовать элемент `<aside>` в нашем HTML. Мы делаем обозначения, относящиеся к содержанию, но которые мы хотим сохранить отдельно. Мы также можем использовать его на боковой панели.

### Элемент <code>

```html
<p>Вы можете использовать это для такого фрагмента кода, как:
<code class="gray-code">const muppetFrog = 'Kermit'</code>, который отличается от остального текста.
</p>
```

В тех случаях, когда мы хотим отличить фрагмент кода от обычного текста, элемент `<code>` очень удобен.


### Элемент <article>

```html
<article class="all-muppets">
<h1>Куклы</h1>
<article class="kermit">
<p>Кермит - лидер кукол.</p>
</article>
<article class="fozzy">
<p>Фоззи - стоячий медведь.</p>
</article>
<article class="piggy">
<p>Не связывайся с мисс Пигги.</p>
</article>
```

Элемент `<article>` - это еще один элемент, который используется для различения типов контента в макете.

`<article>` должен быть автономным содержанием, отдельным от основного содержания. Использование этого элемента также упрощает стилизацию с помощью CSS, делая содержимое статьи явно отличным от другого содержимого на странице.


### Элемент <blockquote>

Элемент `<blockquote>` - еще один простой элемент, используемый так же, как он звучит: для отделения цитаты от другого текста, как было показано ранее.



### Элемент <mark>

```html
<p>Это предложение о лучшем Маппете, который когда-либо был <mark>Королевская креветка Пепе</mark>.</p>	
```

Элемент `<mark>` - это не только идеальный способ выделить блок текста, но и легко понять, когда вы встретите его в документе.

Попробуйте использовать эти альтернативы div в своем собственном коде и посмотрите, насколько их легче читать.


## Заключение

Это только десять примеров альтернатив `div`. Есть довольно много других семантических элементов, которые мы можем использовать в нашем HTML.

Вам не нужно использовать их все в одном документе, и вам не нужно беспокоиться о запоминании более 100 существующих элементов. У MDN есть удобная справочная страница, к которой вы можете обратиться, когда вам это нужно: [справочник по элементам HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

Написание семантического HTML - это хорошая привычка, которую нужно освоить как можно раньше. Это хорошо для читабельности, SEO и не забывайте о миллионах людей с ослабленным зрением, которые оценят ваш продуманный код.

Оригинал: [https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/]()


Большинство из нас используют элемент div по умолчанию, потому что это самый быстрый способ создания макета HTML. Возникает соблазн убрать лишнюю HTML-разметку и сосредоточиться на CSS и JavaScript.

Несмотря на то, что полное построение страницы с использованием тегов div может облегчить работу. Это также может привести к проблемам в будущем.

Семантическое руководство по HTML - 10 альтернатив использования div

> Иногда для того, чтобы разнообразить интерфейс веб-приложения или сайта, хочется анимировать числовые значения, но при этом не хочется подключать какие-то сложные библиотеки анимаций типа [Frame Motion](https://www.framer.com/), [React Spring](https://react-spring.io/), [React Animations](https://github.com/FormidableLabs/react-animations), [React Transition Group](https://reactcommunity.org/react-transition-group/) или [React Move](https://react-move-docs.netlify.app/)

Познакомьтесь с небольшой библиотекой [React CountUp](https://tr8tk.csb.app/), которая основана на js-библиотеке [CountUp.js](https://inorganik.github.io/countUp.js/). С помощью нее можно строить интересные живые числовые анимированные блоки.

## Установка библиотеки React Countup

Установить библиотеку достаточно просто. Для этого нужно в любом терминале в папке проекта выполнить команду. Подойдет даже, если вы используете Next.js.

```bash
yarn add react-countup
```

Второй шаг - это добавление компонента в разметку jsx. Например, если вы используете MUI 5.

```jsx
<Card elevation={5} sx={{ borderRadius: '40px', padding: '30px' }}>
  <Typography sx={{ fontSize: '40px' }}>
    <CountUp end={100} />
  </Typography>
  <Typography>Контакты</Typography>
</Card>
```

Этот компонент запустит анимацию чисел от 0 до 100 после первоначального рендеринга.

> Почитать как собрать приложение на Next.js + MUI5 + Typescript или скачать готовый шаблон можно [тут](/blog/startovyj-shablon-nextjs-mui5-typescript).

Компонент имеет множество параметров и позволяет настраивать задержку для старта анимации, длительность самой анимации, начальные и конечные значения, разделители, ease-функции.

Ниже более сложный пример:

```jsx
<CountUp
  start={-875.039}
  end={160527.012}
  duration={2.75}
  separator=" "
  decimals={4}
  decimal=","
  prefix="EUR "
  suffix=" left"
  onEnd={() => console.log('Ended! 👏')}
  onStart={() => console.log('Started! 💨')}
>
  {({ countUpRef, start }) => (
    <div>
      <span ref={countUpRef} />
      <button onClick={start}>Start</button>
    </div>
  )}
</CountUp>
```

## Хуки

Если по каким то причинам вы не хотите использовать компонент CountUp, есть соответствующие хуки, которые могут добавить функциональности вашему компоненту.

```jsx
import { useCountUp } from 'react-countup'

const SimpleHook = () => {
  useCountUp({ ref: 'counter', end: 1234567 })
  return <span id="counter" />
}
```

### Более сложный пример с хуками

```jsx
import { useCountUp } from 'react-countup'

const CompleteHook = () => {
  const countUpRef = React.useRef(null)
  const { start, pauseResume, reset, update } = useCountUp({
    ref: countUpRef,
    start: 0,
    end: 1234567,
    delay: 1000,
    duration: 5,
    onReset: () => console.log('Resetted!'),
    onUpdate: () => console.log('Updated!'),
    onPauseResume: () => console.log('Paused or resumed!'),
    onStart: ({ pauseResume }) => console.log(pauseResume),
    onEnd: ({ pauseResume }) => console.log(pauseResume)
  })
  return (
    <div>
      <div ref={countUpRef} />
      <button onClick={start}>Start</button>
      <button onClick={reset}>Reset</button>
      <button onClick={pauseResume}>Pause/Resume</button>
      <button onClick={() => update(2000)}>Update to 2000</button>
    </div>
  )
}
```

React Countup - это легковесная библиотека, основанная CountUp.js. Используется  для быстрого создания анимации, отображающей числовые данные более интересным способом.

Использование Countup.js для анимирования числовых значений в React

Хуки были добавлены в React, начиная с версии 16.8. При переходе от классов к функциональным компонентам хуки позволяют использовать состояние и другие функции в функциональных компонентах, то есть без написания компонента класса.

small_Ресурс 2@2x.png

thumbnail_Ресурс 2@2x.png

Ресурс 2@2x.png

large_Ресурс 3@2x.png

medium_Ресурс 3@2x.png

small_Ресурс 3@2x.png

thumbnail_Ресурс 3@2x.png

Ресурс 3@2x.png

medium_Ресурс 4@2x.png

small_Ресурс 4@2x.png

thumbnail_Ресурс 4@2x.png

Ресурс 4@2x.png

large_Ресурс 5@2x.png

medium_Ресурс 5@2x.png

small_Ресурс 5@2x.png

thumbnail_Ресурс 5@2x.png

Ресурс 5@2x.png

API хуков в React

> В этой статье вы узнаете, как легко добавлять статические и динамические карты для сайтов на Next.js. Не переключайтесь ;)

Карта сайта (или Sitemap) - важная часть SEO для любого популярного публичного веб-сайта. По сути, это список URL-адресов, которые вы хотите, чтобы робот Google, Yandex или другие поисковые системы сканировали для индексации.

В идеале, если у вас сайт структурирован правильно, то он должен сканироваться и индексироваться роботами Google или Yandex в автоматическом режиме без какой либо карты сайта. Отсюда напрашивается вопрос: зачем дополнительно облегчать жизнь ботам?

На этот вопрос мы ответим в статье чуть позже.

NextJS позволяет нам легко добиться этого. Итак, давайте посмотрим, как добавить карту сайта в ваш проект NextJS.

## Для чего нужна карта сайта?

Карта сайта (или Sitemap) - это своего рода дорожная карта для вашего сайта. Она рассказывает поисковым роботам о важных страницах вашего сайта.

Некоторые URL-адреса на вашем веб-сайте более доступны, чем другие. И вы не хотите оставлять их позади в SEO. В этом может помочь карта сайта.

Также рекомендуется включать в любой сайт, поскольку вы никогда не знаете, как роботы Google выполняют свою работу. Так что никогда не помешает добавить карту сайта на сайт.

## Шаг 1. Инициализация проекта

Мы воспользуемся нашим готовым шаблоном Next.js + MUI 5 + Typescript. Найти его можно на [Github](https://github.com/reactcoder-it/with-mui5-and-typescript).

Выполните следующие команды, чтобы создать пустой проект.

```bash
git clone https://github.com/reactcoder-it/with-mui5-and-typescript.git sitemap-demo
cd sitemap-demo
yarn
```

Затем перейдите в каталог проекта и откройте его в своем любимом редакторе.

## Шаг 2: Создание компонента Sitemap

После того, как вы перейдете в проект, взгляните на структуру и вы увидите, что там уже есть папка с именем **pages**. И файлы в этой папке становятся для нас URL-адресом.

Например, **about.tsx** станет **http://BASE_URL/about**.

Допустим, мы хотим, чтобы наша карта сайта располагалась по пути **http://BASE_URL/sitemap.xml**.

Так что перейдите в папку **pages** и создайте новый файл с именем **sitemap.xml.tsx**, если вы используйте Typescript. Или .jsx, если вы используете JavaScript. И добавьте туда следующий код.

```tsx
import { GetServerSideProps } from "next"

const Sitemap = () => {
  return null
}

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const BASE_URL = 'http://localhost:3000'

  const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      // сюда мы будем писать урлы вашего сайта
    </urlset>
  `

  res.setHeader('Content-Type', 'text/xml')
  res.write(sitemap)
  res.end()

  return {
    props: {}
  }
}

export default Sitemap
```

Этот файл представляет собой React-компонент, который возвращает значение null, потому что мы не хотим возвращать или отображать что-либо внутри этого компонента.

Однако мы хотим воспользоваться функцией [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering), доступной внутри компонента-страницы в Next.js. Мы знаем, что эта функция вызывается, как только мы попадаем по URL-адресу.

Итак, мы хотим подготовить нашу карту сайта, когда кто-то пытается получить доступ к URL-адресу и вернуть его. Базовый URL-адрес - [http://localhost:3000](http://localhost:3000), но вы, очевидно, измените его на свой рабочий URL-адрес.

Обратите внимание, что мы устанавливаем тип заголовка, чтобы указать, что это будет XML-файл.

```tsx
res.setHeader('Content-Type', 'text/xml')
```

## Шаг 4. Собственно создание самой карты сайта

Мы уже говорили, что файлы в каталоге страниц автоматически становятся URL-адресами страниц.

Поэтому мы воспользуемся этой концепцией и динамически сгенерируем URL-адреса для реальных страниц.

Обратите внимание, что у нас нет URL-адресов, созданных для некоторых пользовательских страниц в NextJS, таких как _document.js, _app.js и 404.js, а также нет пути для нашего api - папки, которая была автоматически создана для нас при создании приложения.

```tsx
import * as fs from 'fs'

const staticPaths = fs
  .readdirSync("pages")
  .filter(staticPage => {
    return ![
      "api",
      "_app.js",
      "_document.js",
      "404.js",
      "sitemap.xml.js",
    ].includes(staticPage)
  })
  .map(staticPagePath => {
    return `${BASE_URL}/${staticPagePath.split('.')[0]}`
  })
```

Однако у нас могут быть и динамические страницы. Допустим, у нас есть страница с описанием продукта. Что-то вроде **/product/{productId}**

И мы определенно хотим, чтобы бот Google сканировал и эти страницы, верно? Но как создаются эти страницы?

Обычно у нас есть **API** или что-то еще, откуда мы можем получить весь список продуктов, и используя этот идентификатор; мы можем предсказать URL для него.

```tsx
type Product = {
  id: string
  name: string
  price: number
}

function getAllProducts() : Product[] {
  return [{
    id: '1',
    name: 'MacBook Pro',
    price: 129900
  }, {
    id: '2',
    name: 'iPhone 13 Mini',
    price: 79490
  }, {
    id: '3',
    name: 'iPhone 13 Pro',
    price: 99990
  }]
}

const products: Product[] = getAllProducts() // Здесь может быть вызов с любого API

const dynamicPaths = products.map(singleProduct => {
  return `${BASE_URL}/product/${singleProduct.id}`
})

```

Итак, теперь у нас есть staticPaths и dynamicPaths. Давайте объединим их и сгенерируем фактическую карту сайта.

Помните то место, которое мы оставили пустым, когда начали работать? Вернемся к этому и сгенерируем содержимое для sitemap.xml.

```tsx
const allPaths = [...staticPaths, ...dynamicPaths]

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${allPaths.map(url => (
      `<url>
        <loc>${url}</loc>
        <lastmod>${new Date().toISOString()}</lastmod>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
      </url>`
    )).join("")}
  </urlset>
`
```

Как видите, здесь мы просто перебираем все пути и генерируем для нас URL.

Теперь запустите проект и перейдите по адресу [http://localhost:3000/sitemap.xml](http://localhost:3000/sitemap.xml), и вы должны увидеть что-то вроде этого.

![Карта сайта](https://api.pxstudio.pw/uploads/sitemap_28e8fe5e66.png)

Именно так, как мы этого и хотели.

Хорошего дня! ;D

Полный код можете посмотреть на [Github](https://github.com/reactcoder-it/with-nextjs-mui5-and-sitemap)!

Карта сайта (или Sitemap) - важная часть SEO для любого популярного публичного веб-сайта. По сути, это список URL-адресов, которые вы хотите, чтобы робот Google, Yandex или другие поисковые системы сканировали для индексации.

Как создать Sitemap в приложениях на Next.js

> В прошлой статье мы затронули форматирование разрядов чисел для программистов [Улучшение читаемости больших чисел с помощью числовых разделителей в JavaScript](/blog/uluchshenie-chitaemosti-bolshih-chisel-s-pomoshhyu-chislovyh-razdelitelej-v-javascript). В этой статье мы продолжим тему форматирования.

Очень часто возникает задача форматирования чисел на клиентской стороне. Форматирование чисел на стороне клиента - важная задача, особенно если учесть, сколько сырых API используется в наши дни. Также важно заметить, что эти цифры значимы для пользователей, независимо от того, где они находятся, особенно если ваш сайт представляет собой бизнес-сайт.

Написание кода интернационализации могло быть кошмаром для разработчика, но, к счастью, JavaScript предоставляет нам `Intl.NumberFormat`, API для интернационализации чисел как валют и многого другого. Давай проверим!

Вот несколько примеров, что можно сделать с помощью `Intl.NumberFormat`:

```javascript
new Intl.NumberFormat().format(12345)
// 12 345

new Intl.NumberFormat('en-US', { maximumSignificantDigits: 4}).format(1.2345678)
// 1.235 (Заметьте, число округляется)

new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(9002.20)
// £9,002.20

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(9002.20)
// 9.002,20 €

new Intl.NumberFormat().formatToParts(12345.678)
/*
[
   { "type":"integer", "value":"12" },
   { "type":"group", "value":"," },
   { "type":"integer", "value":"345" },
   { "type":"decimal", "value":"." },
   { "type":"fraction", "value":"678" }
]
*/
```

Не утруждайте себя написанием собственных функций форматирования чисел на стороне клиента, если числа, которые вы хотите представить, являются стандартными форматами. Лучше используйте удивительные API-интерфейсы, которые предоставляет вам браузер!


Очень часто возникает задача форматирования чисел на клиентской стороне. Форматирование чисел на стороне клиента - важная задача, особенно если учесть, сколько сырых API используется в наши дни. Также важно заметить, что эти цифры значимы для пользователей, независимо от того, где они находятся, особенно если ваш сайт представляет собой бизнес-сайт.

Форматирование чисел с помощью Intl.NumberFormat

> Недавное натолкнулся на статью Дэвида Уолша [Javascript Numeric Separators](https://davidwalsh.name/numeric-separators). Думаю это будет полезно и для читателей моего блога.

Написание хорошего кода, легко читаемого человеком, - это навык следующего уровня. Не часто вводятся API, чья, казалось бы, единственная полезная функция - сделать код более читабельным, но позвольте мне познакомить вас с числовыми разделителями JavaScript. Это API, который позволяет разработчикам использовать символы подчеркивания, чтобы сделать числа более читаемыми!

Например, в коде вы пишете:

```javascript
// Число без разделителей между нулями
const oneHundredThousand = 100000;
```

Инженерам всегда было трудно мысленно проанализировать большие числа, поэтому использование подчеркиваний, чтобы сделать код более читабельным, - это очень удобная штука.

Например:

```javascript
const oneMillion = 1_000_000; // 1000000
const decimals = 1_000_00.01_02_03 // 100000.010203
```

> Единственное реальное правило с числовыми разделителями заключается в том, что число не может начинаться или заканчиваться знаком подчеркивания `(_)`.

Числовые разделители в JavaScript выглядят как подарок от разработчиков спецификации. И как инженер, я могу взять это на вооружение или нет. Вы никогда не перестанете учиться в мире JavaScript!


Написание хорошего кода, легко читаемого человеком, - это навык следующего уровня. Не часто вводятся API, чья, казалось бы, единственная полезная функция - сделать код более читабельным, но позвольте мне познакомить вас с числовыми разделителями JavaScript. Это API, который позволяет разработчикам использовать символы подчеркивания, чтобы сделать числа более читаемыми!

Улучшение читаемости больших чисел с помощью числовых разделителей в JavaScript

Привет, ребята! В сегодняшней статье мы затронем тему цифрового бизнеса, чтобы узнать, как начать свой стартап, каковы риски и что еще нужно знать. Давайте приступим.

> Цифровой бизнес — это объединение физических и цифровых ресурсов бизнеса, стирание границ между людьми и процессами с целью выполнения задач бизнеса. Цифровые ресурсы помогают бизнесу увеличивать прибыль, привлекать новых клиентов и увеличивать лояльность клиентов по отношению к компании.

Создание цифрового агентства требует глубокого знания своей ниши. Итак, первое, что вам нужно сделать еще до того, как вы задумаетесь о названии своей компании - это выбрать нишу и проанализировать рынок, на котором вы будете работать.


## Не ограничивайте свои возможности

Независимо от того, выбираете ли вы маркетинг, графический дизайн или просто веб-разработку в качестве основы своего агентства, не ограничивайтесь одной категорией. Вы всегда должны думать о своем будущем и своем потенциальном клиенте, потому что клиент, который приходит за дизайном веб-сайта, может попросить разработать этот веб-сайт и создать маркетинговую компанию. Подумайте об этом 🤔!


## Рассчитайте все затраты

В основном они зависят от того, собираетесь ли вы открывать свое агенство удаленно - дома или в офисе. Если вам необходимо нанять кого-то в команду, потратить деньги на оборудование, снять комнату, создать юридическое лицо и т.д., вы всегда должны быть готовы к спонтанным расходам. Помните об этом, когда вы только начинаете, и всегда держите при себе "подушку безопасности".


## Проанализируйте свою аудиторию

Структура вашего агенства зависит от того, какие услуги вы предоставляете. Список ваших услуг зависит от того, кого вы обслуживаете. Вам необходимо иметь четкое представление о своей аудитории и ее потребностях, чтобы иметь возможность удовлетворить эту потребность. Итак, если вы знаете, кто ваши клиенты, тогда вы знаете, что им создавать и что предлагать.


## Следите за своими конкурентами

Это очень важно, поскольку конкуренция дает нам много информации о вашей аудитории, статистике продуктов, которые вы предоставляете. Копните еще глубже и выясните, что ваши конкуренты не делают для удовлетворения потребностей своих клиентов и попытайтесь предложить им свое решение. Как правило, конкуренты приносят вам большую пользу, если вы разумно используете их опыт.


## Создавайте выдающийся бренд

Первое впечатление имеет огромное значение, поэтому очень важно создать бренд, который заставит ваших посетителей что-то почувствовать. Эмоции эффективны. Когда речь идет об эмоциях, мы запоминаем с большей уверенностью и подробностями. Поэтому необходимо создать значимый бренд, который расскажет вашим клиентам о вашей миссии и останется надолго в их памяти.


## Получите первых клиентов

Этот пункт, вероятно, самая сложная часть работы с вашим цифровым агентством. В зависимости от вашей ниши, у вас есть несколько способов начать бизнес. К эффективным мы можем отнести бесплатные предложения, LTD (пожизненные предложения) или УТП (уникальное торговое предложение), которые могут быть предложены только вами. С помощью бесплатных услуг вы знакомите людей с вашим брендом и создаете аудиторию, которую затем можно преобразовать в клиентов.


## Говорите со своими клиентами

Частью всего вашего маркетинга должно быть общение с клиентами и получение обратной связи. Поблагодарите их за покупку, сделайте им бонус, расскажите, как они могут добиться успеха с вашим продуктом. Все это побудит ваших клиентов рассказывать о вашем бренде. Усердно работайте, чтобы заработать хорошую репутацию.


## Вовлекайте свою аудиторию

Один из наиболее эффективных методов - показать процесс, рассказать о возможностях и особенностях, научить, как получить максимальную выгоду от использования вашего продукта/услуги. Чем больше ваш потенциальный покупатель знает о вас и вашем продукте, тем больше вероятность, что он совершит покупку.


## Пишите тексты, которые продают

Учитывая, что 95% контента состоит из текста, мы можем с уверенностью сказать, что копирайтинг имеет решающее значение в вашем цифровом бизнесе. Эффективный копирайтинг пробуждает интерес клиентов к вашему продукту или услуге. Поэтому сделайте своим приоритетом написать хороший текст или нанять для этого специалиста.


## Ищите больше клиентов

После того, как вы настроили все основные пункты в своем агентстве, пора подумать о привлечении новых клиентов. Вам нужно принять все изменения, которые могут произойти на вашем пути. Вот несколько методов привлечения клиентов: создайте блог, записывайте подкасты или посетите чужой, сделайте обучающее видео, будьте активны в онлайн-сообществах, проведите целевой маркетинг, создайте реферальные системы, сотрудничайте с другими в вашей нише и т.д. Тут может быть бесконечное количество советов, вам необходимо найти те, которые лучше всего подходят для вашего бизнеса.


## Используйте дополнительные и перекрестные продажи, чтобы увеличить свой доход

Для начала давайте выясним, что представляет собой каждый термин, и как они могут помочь вам в продажах. **Дополнительные продажи** (или Upselling) - это предложение покупателю альтернативных продуктов, тем которые он собирается купить. Часто здесь можно продать более качественные продукты по более высокой цене.

**Перекрестные продажи** (или cross-selling) - это предложение покупателям купить дополнительные товары, которые могут быть полезны в комплекте с товаром, которые они собирались купить. Давайте посмотрим на конкретных примерах.

Если ваш клиент собирается купить набор иллюстраций за 2500 рублей, вы можете преложить ему или ей проверить ваши более дорогие и более интересные наборы.

Или же если клиенту нужен дизайн, то вы можете предложить сделать ему комплект: дизайн сайта + иллюстрации + разработка. Особенность кросс-продаж в том, что покупатель экономит при покупке комплекта, чем если бы он покупал эти товары по отдельности.


## Расширяйте команду по мере развития вашего агенства

Нанять подходящего сотрудника может быть непросто. Поэтому вам нужно всегда помнить некоторые основы того, как правильно расширить свое агентство: **сначала функции, затем сотрудники**. Это означает, первое, что необходимо сделать - это проанализировать структуру вашей компании, выявить слабые или быстро развивающиеся части ваших услуг и попытаться поддержать их новым сотрудником. В этом случае вы знаете, чем именно специалист может помочь вашей компании.


## Отличные продукты вызывают лояльность

В чем секрет успешных цифровых продуктов? Ответ - любовь создателя к своему творению. Это означает, что вам не нужно ограничивать себя достигнутым прогрессом, внесенными вами обновлениями и добавленными функциями. Всегда ищите что-то новое, чтобы улучшить свой продукт. Отличный продукт должен жить вечно, и его совершенству нет конца.


## Сделайте свою компанию любимой клиентами

Взаимодействие с вашими клиентами может очень помочь вам в создании хорошей репутации в их глазах. В жесткой конкуренции с другими владельцами бизнеса в вашей сфере решающим фактором может стать отличное обслуживание клиентов. Люди любят разговаривать с людьми, поэтому старайтесь избегать использования чат-ботов, если ваша компания еще не очень большая и вы не ведете сотни разговоров в день. Всегда будьте другом своему клиенту, слушайте его, заботьтесь о его проблемах и помогайте решать их наиболее удобным способом. И помните, что отзывы клиентов - это также отличный инструмент для улучшения наших продуктов и услуг. Так что всегда поддерживайте тесный контакт со своей аудиторией.

Есть множество различных второстепенных вещей, которые вам необходимо учитывать при управлении цифровым агентством, но в этой статье мы поговорили о самых важных из них. Помните, что у каждой компании свой путь, который нужно строить по мере создания и развития. Единственное, что ограничивает вас на пути к цели, - это ваше творчество, не бойтесь использовать его в полной мере.


В данной статье мы затронем тему цифрового бизнеса, чтобы узнать, как начать свой стартап и что вам нужно знать.


Блог PXSTUDIO