Решил переходить на next js. React буду изучать также, особенно учитывая, что сам Next по сути и есть React. Но как минимум мне нужно переписать мою библиотеку компонентов ui-pack на react, ибо хочу как можно меньше взаимодействовать с БЭМ, Pug и иметь личный набор инструментов.

Так я нашел то, с чего можно начать писать компоненты, ведь у next js есть свои базовые компоненты.

Вот они:

- Link - компонент для ссылок между страницами сайта. Аналог <a> тега.

- Image - оптимизированный компонент для подгрузки изображений. Поддерживает форматы JPEG, PNG, WebP и SVG.

- Head - компонент для управления тегами <head> страницы, такими как title, meta и другими.

- Script - асинхронный JavaScript-тег для подключения внешних скриптов.

- Main - основной контейнер для рендеринга компонентов на странице.

- Layout - компонент-обертка для задания общего макета страниц.

- ErrorPage - страница ошибки по умолчанию.

- DynamicImage - компонент для отображения изображений с динамическими параметрами.

- Button - стандартная кнопка.

- Modal - модальное окно.

- LazyMotion - компонент для плавных анимаций.

Эти и другие компоненты позволяют быстро создавать интерфейсы и функционал сайтов на Next.js. Также можно использовать любые сторонние компоненты React.

Также полезная штука - infinite scroll. Раньше я использовал стандартный браузерный api - Intersection observer. А вчера наткнулся на эту библиотеку

React-infinite-scroller.

Вот примерный код:

import InfiniteScroller from 'react-infinite-scroller';

export default function Page() {
const [data, setData] = useState([]);

const fetchMoreData = () => {
// fetch new data
};

return (
<InfiniteScroller
pageStart={0}
loadMore={fetchMoreData}
hasMore={true}>
{data.map(item => (
<div key={item.id}>
{/* render item */}
</div>
))}
</InfiniteScroller>
);
}

Библиотека реализует бесконечный скролл следующим образом:

- При достижении конца страницы вызывается коллбэк loadMore
- В коллбэке загружаются новые данные
- Компонент перерисовывается с увеличенным массивом данных

Таким образом можно легко реализовать ленту контента с бесконечным скроллом в Next.js.

Основное различие между useState и useReducer в React:

- useState - это базовый хук для управления состоянием. Он позволяет хранить и обновлять одно значение состояния.

- useReducer - более мощный хук для управления состоянием. Он позволяет определить состояние, действия и логику обновления состояния в отдельной функции редьюсера.

В чем конкретно разница:

- useState работает с одним значением состояния, useReducer позволяет хранить объект состояния с несколькими полями.

- В useReducer можно разделить логику обновления состояния от представления, а useState тесно связан с компонентом.

- useReducer более подходит для сложных состояний приложения с несколькими взаимосвязанными значениями.

- useState обновляет состояние синхронно, useReducer позволяет асинхронные обновления с помощью действий.

В целом useReducer рекомендуется использовать для глобального или сложного состояния приложения, а useState подходит для простых локальных состояний компонентов.

На канале собираюсь писать не только о next js. Название - лишь подспорье, потому что на данный момент это моя любимая технология в разработке. Например, недавно начал изучать Astro и ощутил легкость, как попробовав после WP October CMS. Моя цель - дать те подробные объяснения и мелкие фишечки комфортной разработки, которые мне раньше не у кого было спросить. Моя цель дать специалистам, которые сталкиваются с реальными задачами и трудностями, решить свои вопросы быстро, чтобы освободить время на учёбу и развитие, потому что я прекрасно знаю, что такое учить js и параллельно пилить сайт на wordpress, где надо знать ещё и php, который в будущем, возможно, разработчику вообще не пригодится.