Next.js был действительно невероятным фреймворком для разработчиков React. Большинство реагирующих разработчиков любят Next.js, потому что это один из самых популярных фреймворков для реагирования, который в основном используется для рендеринга на стороне сервера. Next.js также имеет очень впечатляющую документацию, которая заставляет разработчика быстро учиться.
Структура Monorepo — очень известная и полезная структура, которая помогает нам хранить несколько проектов в одном репозитории. Структура монорепозитория помогает совместно использовать код между этими проектами. Могут быть различные варианты использования структуры монорепозитория, но сегодня мы будем разрабатывать полноценное реактивное приложение на основе монорепозитория с использованием Lerna. По сути, Lerna — это инструмент для управления проектом Javascript с несколькими пакетами. Это приложение состоит из двух проектов (я предпочитаю называть их пакетами): Users Package и Admin Package, который разделяет код с Shared package. Итак, это может быть немного длинная статья, но я постараюсь, чтобы вы поняли, что я буду делать.
Итак, давайте начнем!

1. Установка Lerna
Прежде всего, мы начнем с глобальной установки Lerna.

npm install --global lerna

2. Создать проект
Затем мы создаем проект next.js «next-mono-repo» и переходим в папку проекта.

mkdir next-mono-repo
cd next-mono-repo

3. Инициализация Lerna
Еще одна важная вещь в проекте — инициализация lerna для создания монорепозитория. Итак, давайте инициализируем его.

4. Создание пакетов
Как мы говорили ранее, мы создадим три пакета: admin, users и shared. . И admin, и users являются отдельными проектами и используют разные компоненты и утилиты из пакета shared. Позже в этой статье мы также увидим прекрасное совместное использование компонентов. Давайте создадим эти пакеты сейчас.

cd packages
mkdir admin
mkdir users
mkdir shared

5. Инициализировать package.json в каждом пакете
Теперь нам нужно инициализировать файл package.json в каждом из проектов. Итак, для настроек по умолчанию мы будем использовать тег «-y» в конце. Давайте также создадим папку src для каждого пакета. Я только что показал это для пакета администратора, сделайте то же самое для пользователей и общих пакетов.

cd packages/admin npm init -y
mkdir src

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

Точно так же для users package.json мы устанавливаем конфигурацию следующим образом:

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

Основной пакет в нашем проекте, лежащий в корне проекта, теперь должен иметь следующие конфигурации.

6. Установите React, React-Dom и Next.js
Пришло время установить react, react-dom и next.js в проекте. Также убедитесь, что вы находитесь в корне проекта перед установкой.

npm install --save react react-dom next

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

npm install --save @zeit/next-typescript @types/next @types/react @zeit/next-typescript @types/next @types/react @types/node typescript

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

Теперь в tsconfig.json общего пакета добавьте эти строки, которые расширяют tsconfig проекта.

// packages/shared/tsconfig.json 
{
 "extends": "../../tsconfig.json",
 "compilerOptions": {
   "noEmit": true,
   "allowSyntheticDefaultImports": true,
   "jsx": "preserve",
 }
}

9. Установка и использование модуля Next Transpile
Нам нужны модули next-transpile для переноса нетранспилированных модулей из node_modules с использованием конфигурации Babel Next.js. Итак, давайте установим его.

npm install --save next-transpile-modules

После установки давайте использовать их следующим образом в конфигурации next.js. Обязательно создайте next.config.js как в пакете admin, так и в пакете users в корне и добавьте эту строку, чтобы убедиться в этом.

// packages/admin/next.config.js, packages/users/next.config.js const withTM = require("next-transpile-modules")(["shared"]); module.exports = withTM();

10. Загрузите проект
Вот команда для начальной загрузки проекта. Вы также можете увидеть эту команду в нашем файле package.json.

npm run bootstrap