Заметки фронтендера: разбираем плюсы и минусы TypeScript и Next.js
Всем привет! На связи техлиды IT-компании Creative. И сегодня хотим поделиться своим опытом использования TS и Next.js. Какие знаковые фичи вы могли не знать? Что по перспективам? Собрали тезисно, чтобы вы не тратили много времени на чтение длинных статей. Поехали!
Кратко про TS
TypeScript (TS) — это строго типизированный язык программирования, основанный на JavaScript, или, если кратко, это JavaScript с синтаксисом для типов.
Благодаря статической типизации, в TypeScript проверка кода проходит прямо в редакторе, и для обнаружения многих ошибок не требуется запуск приложения.
Главная фича – обратная совместимость с JavaScript. TS даёт нам возможность плавного и безболезненного перехода на новый синтаксис, не трогая старые участки кода без необходимости. Разрабы поймут.
Что ещё?
- Экономия на тестах. При правильной настройке компилятор не допустит ошибочные использования функций и переменных. Статическая проверка типов поможет вам обойтись без части тестов, которые окажутся при таком раскладе избыточными.
ООП для развивающихся проектов. TS реализует полноценное объектно-ориентированное программирование (ООП), поддерживая разные концепции: классы, интерфейсы, наследование, полиморфизм, инкапсуляцию, модификаторы доступа, etc. Это облегчает создание хорошо организованного, масштабируемого кода, поэтому TS – отличный выбор для развивающихся проектов.
Не минусы, а рекомендации!
"поймут не только лишь все" или для TS нужно знать ещё и JS. Чуть выше порог входа, зато справедливо.
закладывайте доп время для описания всех типов, интерфейсов, внешних инструментов (библиотек), сигнатур каждого из методов каждого модуля. Конечно, всегда можно воспользоваться заглушкой в виде “any”, но это не самый идеальный вариант 😄.
Перспективы (наше мнение)
Проект TypeScript создан компанией Microsoft в далёком 2012-м, но прекрасно себя чувствует и в 2023-м. Каждый год мы видим рост комьюнити и кодовой базы библиотек, фреймворков, проектов. Поэтому фронтенд без TS мы увидим ещё не скоро, можно смело изучать и совершенствоваться.
Теперь – про Next.js
Next.js – это фреймворк, основанный на React. Он позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью доп функций предварительного рендеринга*.
*например, полноценного рендеринга на стороне сервера (SSR) и статической генерации страниц (SSG).
Простой роутинг, настроенный конфиг – и это не сон!
В Next.js реализована встроенная поддержка маршрутизации страниц, а также поддержка “из коробки” CSS-модулей, JSX и TS. Не нужно тратить много времени на настройку конфига – большинство необходимых возможностей уже готовы и включены.
Что нам нравится больше всего?
SSR для скорости и удобства. Server Side Rendering позволяет получать доступ ко всем необходимым данным для построения страницы на сервере. Готовая страница отправляется в браузер и сразу же отображается. SSR увеличивает скорость загрузки веб-страниц и повышает скорость отклика.
SSG для оптимизации генерации страниц. Next.js умеет генерировать готовые HTML-файлы единоразово при сборке приложения. Static Site Generation позволяет не тратить ресурсы на генерацию страниц со статичным контентом и уменьшить время ответа сервера.
Эффективное SEO. Использование SSR и SSG даёт преимущество в SEO по сравнению с одностраничными (SPA) приложениями, помогая сайту занимать более высокие позиции на страницах результатов поисковых систем. Это получается за счёт того, что поисковые роботы могут сканировать весь контент сайта.
Next.js умеет разбивать JS и CSS на куски, которые подгружаются только в момент открытия использующей их страницы. Также приятно, что есть возможность работы сервера в режиме API и прокси. NextJs поддерживает удобное создание endpoint для обработки запросов.
Нам нравится, что работа с контентом тега <head> страниц продумана до мелочей. Необходимые скрипты стили и мета-теги можно добавлять из любого компонента приложения. Классно настроена автоматическая оптимизация статики. Изображения (статика и динамика) сжимаются, гугл-шрифты скачиваются, кастомные шрифты оптимизируются. В общем, минусов мы не нашли 😄.
Перспективы (наше мнение)
Фреймворк активно поддерживается и обрастает новыми фичами с каждой новой версией. Например, были добавлены удобные редиректы и возврат кода 404, prefetch данных страницы, быстрая сборка с помощью Turbopack, etc. Конечно, не все фичи работают идеально с момента добавления, но активно дорабатываются к следующей версии.
Надеемся, вам было полезно. Будем рады вашим комментам, с удовольствием обсудим разницу мнений и ответим на вопросы.