Edge рантайм. Один из главных функционалов компании Vercel — компании, которая разработала и развивает next.js. Тем не менее, её влияние по edge рантайму вышло далеко за рамки её фреймворков и утилит. Edge рантайм работает и в недавно купленном Vercel Svelte, и в nuxt, и в более чем 30 других фронтенд фреймворках. Эта статья будет посвящена edge рантайму — что это, как это используется в Vercel, какими возможностями дополняет next.js и какие решения сделал я, чтобы эти возможности расширить.

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

Прорабатывается ТЗ и задача отдаётся разработчикам. Затем новая версия тестируется и уходит конечным пользователям. На этом жизненный цикл идеи завершён. Теперь остаётся дождаться массива свежей аналитики и отпраздновать…

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

И именно ему будет посвящена данная статья. От идеи до конкретной реализации тестирования на next.js (которую можно повторить и на других технологиях).

Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.

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

Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.

В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.

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

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

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

Но все они устарели.

Ведь всё это время развивалось и экосистема реакта. Так, последняя версия next.js включила крупные обновления из react.js - cache, taint, новые хуки и, конечно же, серверные компоненты. Команда самого React.js, вероятно, представит эти изменения уже в мае.

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

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

Практически в каждом релизе я находил множество полезного и нужного как для личных проектов, так и для коммерческих. Тем не менее, 13-ю версию я обошёл стороной для коммерческих проектов, так как функционал показывал себя крайне нестабильным и недостаточным. Однако, сейчас этот функционал перенесён в категорию стабильных, App Router считается основным, а Pages Router скорее поддерживаемым для обратной совместимости и постепенного перехода.

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

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

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

25 октября команда Next проведёт презентацию, посвящённую новой, 13-ой версии. Данное обновление по традиции именуют крупнейшим. Оно может затронуть буквально всё — от очередных ускорений сборки до изменений в структуре приложения и новых абстракций.

Next.js — крупнейший фреймворк для разработки веб-приложений. Он был создан 6 лет назад, 25 октября 2016 года. За это время было выпущено 12 крупных релизов, делая веб всё быстрее и быстрее. Несмотря на громоздкость фреймворка, размеры каждого последующего релиза не становились меньше, хоть и замедлялись в темпах.

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

Nextjs — самый быстрорастущий фреймворк. После создания, в 2016 году, было выпущено уже 12 обновлений, каждое из которых называлось компанией “крупнейшим”. 25 октября Vercel (компания, владеющая Nextjs) представит новый, 13 релиз, который, конечно же, вновь станет “крупнейшим”. Тем не менее, в этой статье речь пойдёт не конкретно о нём, а о действительно новом для компании процессе.

В мае этого года Nextjs неожиданно выпустил в своём блоге RFC (request for comments). В нём речь идёт, в первую очередь, о новой абстракции — layouts, а также о множестве связанных изменений, нацеленных на ускорение, улучшение DX и стандартизацию путём создания новых конвенций. Это рабочее предложение однозначно заслуживает внимания в меру своей громоздкости для фреймворка и потому, что буквально описывает его будущий вид.

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

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

Если техническая часть первой статьи была посвящена клиентской части, второй – серверной, то в третьей я бы хотел рассказать о нелёгком пути, который проделывают стили до попадания на сайт и о попутчике, которого я создал им в помощь, дружелюбном и помогающем им на каждом шаге – от дизайна до вёрстки. Я назвал его Themeizer и в завершающей трилогию статье, хотел бы вас познакомить с ним, с его умениями и рассказать о процессе его зарождения.

Каждый год веб совершает огромные шаги в светлый мир будущего (или тёмный, смотря какой вы предпочитаете). Инструменты один за другим добавляют тёмные темы, а крупные гиганты обновляют и улучшают свои системы дизайна, чтобы они оставались актуальны в расширяющемся тёмном мире. Внедрение темной темы значительно улучшает пользовательский опыт и, как следствие, бизнес показатели. Например, недавно одна из крупнейших бразильских новостных компаний Terra, после добавления темной темы, увеличила количество посещённых за сеанс страниц на 170% и снизила показатель отказов на 60% (т.е. в 2,5 раза) [читать статью].

По собранным Android Authority (2514 опрошенных) данным и анализу Томаса Стейнера (243 опрошенных), более 80% пользователей используют тёмную тему. Конечно же, выборку сложно назвать однозначно правдивой, ведь опросы проходили на технических форумах, но в целом можно говорить о том, что темной темой пользуется добрая половина интернета.

Первая часть цикла по большей части была посвящена истории css-переменных – их созданию, развитию и становлению, а также содержала примеры темизации как на уровне планирования и дизайна, так и на уровне разработки клиентской части, включая различные способы темизации и смены тем [Темизация. История, причины, реализация]. В этой статье, поднимаясь на ступень выше, речь пойдёт о клиент-серверном взаимодействии и возможностях современных браузеров в контексте темизации.

Тот самый момент.

«Tomorrow will transform your career». Именно с таким заголовком пришло письмо с приглашением на конференцию. Неплохой заголовок для привлечения внимания. Конечно же, Vercel уже давно не та компания, которой нужно привлекать к себе внимание, тем не менее у них весьма завидное внимание к деталям, не говоря уже о том, что они привносят в наш мир.

Полученные командой Vercel инвестиции в C раунде (в размере $102млн) на продолжение создание веба будущего, поддержка команды google «Аврора» и большое комьюнити позволило выпустить столь крупный релиз всего через 4 месяца после предыдущего, не менее интересного, релиза.

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

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

Пару слов о технологии, если кто-то умудрился обойти ее стороной. Next – backend-фреймворк для… Инкрементальной сборки, Серверного рендеринга, статической генерации или гибридного варианта приложений, построенных на react. Созданием занималась компания zeit, имеющей к 2016г. утилиту now. Затем, в 2020 году, после инвестиций в 21 млн$, компания была переименована в vercel, а утилита now (переименованная также в vercel) переросла в веб-сервис с дополнительным функционалом для выкладки приложений, в первую очередь, построенных на next, но также nuxt, Gatsby, angular и многих других популярных инструментов.

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

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