~ 4 мин
Стартовый шаблон Next.js + MUI5 + TypeScript
744
11.12.2021
Очень часто при старте проекта необходимо выбрать набор инструментов, которые значительно упрощают разработку и, которые можно в дальнейшем использовать и в других проектах.
И здесь встает вопрос, а будут ли они работать вместе должным образом.
Итак, какие задачи перед нами стоят:
- Обеспечить стабильную сборку для быстрого создания новых проектов и прототипирования;
- Обеспечить статическую типизацию и проверку типов для улучшения качества кода;
- Перейти на новый 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), которая добавляет статическую типизацию и еще кучу полезных фишек в нативный JS, старается исправить большинство недочетов и предоставляет нам мощнейшие иструменты для улучшения качества кода. Про все достоинства и недостатки TS подробнее можно почитать в других статьях. Например, здесь.
Наиболее распространенными ошибками, совершаемыми JavaScript-разработчиками, являются ошибки вида, когда вместо ожидаемого значения используется неправильное. Это может быть связано с простыми опечатками, непониманием интерфейса используемой библиотеки, неверными предположениями о поведении кода во время выполнения и т.д. Цель TypeScript - осуществлять проверку типов значений, используемых в программе, написанной на JavaScript. TypeScript - это инструмент, который выполняет свою работу до запуска кода (поэтому его называют статическим) и обеспечивает использование приложением значений правильных типов.
О том, что дает нам TypeScript в React можно подробнее прочитать здесь.
MUI5 (MaterialUI 5)
MUI - это довольно надежная, настраиваемая и доступная библиотека базовых и расширенных компонентов, позволяющая создавать собственную систему дизайна и быстрее разрабатывать приложения на React.
Собираем шаблон
1. Установка Next.js и TypeScript
Для начала сборки нам потребуется создать шаблонный проект на Next.js + Typescript. Next.js поддерживает TypeScript из коробки, поэтому все, что нам нужно сделать на этом этапе, это набрать в консоли:
yarn create next-app --typescript
Где флаг --typescript как раз указывает на создание проекта с надстройкой TypeScript.
После запуска команды вам предложат задать имя для проекта, которое и будет совпадать с именем папки, в которой создастся проект.
2. Установка MUI
С установкой MaterialUI-5 все немного сложнее ;)
Для начала в проект устанавливаем следующие пакеты:
yarn add @emotion/cache @emotion/react @emotion/server @emotion/styled @mui/icons-material @mui/material
3. Редактируем файл _app.js
Next.js использует компонент App для инициализации страниц, поэтому вы можете переопределить поведение по умолчанию, который позволит использовать очень интересные вещи:
- Сохранение частей макета при переключении между страницами;
- Сохранение состояния при навигации по страницам;
- Пользовательская обработка ошибок;
- Встраивание дополнительных данных на страницу;
- Добавление глобальных CSS-стилей.
Что нужно сделать?
Идем в документацию Next.js и открываем раздел Advanced Features/Custom App.
Копируем оттуда весь код и создаем файл _app.js в папке /pages
// import App from 'next/app' function MyApp({ Component, pageProps })