На странице собраны вопросы по Next.js — от проверки базовых принципов до практического применения и архитектурных решений. В подборке чаще встречаются темы: frontend, ui, web.
Преимущества CSS Grid и Flexbox CSS Grid — мощный двухмерный инструмент для построения интерфейсов Позволяет одновременно управлять строками и колонками Оптимален для сложных макетов с фиксированной или адаптивной сеткой
Почему Next.js выбирают вместо обычного React Фреймворк на основе React, дополненный готовыми инструментами Поддержка SSR (Server-Side Rendering) и SSG (Static Site Generation) для ускорения загрузки и улучшения SEO…
CSS-способы скрытия элементов и их последствия opacity: элемент становится визуально невидимым, но сохраняет место в потоке и может получать события (при прозрачности) visibility: hidden: элемент не виден и недоступен…
Зачем используют ref? React: прямой доступ к DOM или компонентам хранение мутабельных данных без повторного рендера управление фокусом, выделением, анимациями замена прямых манипуляций через чистый JS применяется с…
CSS-позиционирование: абсолютное позиционирование Сочетание top: 50% и left: 50% помещает элемент в точку с такими координатами относительно родительского контейнера однако привязывает к этой точке угол элемента, а не…
Каким образом Next.js оптимизирует изображения? Для оптимизации изображений Next.js предлагает встроенный компонент <Image>. Он автоматически применяет ленивую загрузку (lazy loading): файл запрашивается только после…
В Next.js для добавления скриптов используется компонент <Head> из next/document, который вставляет их в <head> Чтобы запустить скрипты до рендера, используют кастомный _document.js Внутри _document.js можно объявить…
Как в Next.js выполняется получение данных на сервере? Next.js — React-фреймворк, поддерживающий SSR и SSG Ранее для этого применяли getServerSideProps — серверную функцию, вызываемую для каждой страницы Функция…
Как вы работали с формами в React с помощью React Hook Form и Formik? состояние формы можно контролировать через hook или HOC React Hook Form уменьшает число перерендериваний и работает через рефы Formik предлагает…
Методы Next.js для получения данных во время рендеринга страниц getStaticProps: запускается на этапе сборки (build time) применяется для статического предрендеринга страниц используется, когда данные не обновляются…
Оптимизация загрузки сайтов оптимизация фронтенда и бэкенда минимизация и сжатие ресурсов (HTML, CSS, JS, изображения) критический путь рендеринга: критические CSS, defer и async для скриптов lazy loading изображений…
интеграция карт относится к задачам фронтенд-разработки и улучшает UX используют API популярных провайдеров: Google Maps, Yandex.Maps, Leaflet, Mapbox подключают JavaScript-библиотеку через CDN либо npm создают карту…