NextJS faq and troubleshooting Тут буду описывать проблемы, с которыми столкнулся при разработке на next и какие решения нашел

Global CSS cannot be imported from within node_modules.

Причина.

С этой ошибкой можно столкнуться, если вы используете third party пакеты, которые поставляют стили отдельным файлом, но при этом импорт такого файла уже присутствует в бандле. Как пример, можно взять библиотеку Реакт компонентов React Spectrum. Каждый ее компонент представляет из себя отдельный npm пакет, который поставляет свои стили

![[node-modules-css-import-example.png]]

Решение

Нужно указать в конфиге next.config.js что пакет, который содержит такие импорты тоже подлежит транпиляции, сделать это можно с помощью опции transpilePackages - если хотите, чтобы траспилировались все пакеты скоупа (как в случае с react-spectrum), можно указать *

Пример конфига:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["@package-scope/*"], // <-- Эта строчка исправляет проблему для любого из npm пакетов, которые входят в @package-scope
}

module.exports = nextConfig

Update

В Последних версиях Next, кажется начиная с версии 13 хак со звездочкой не работает, так что нужно явно прописать список транспилируемых пакетов, Для примера можно глянуть на то, как это советуют делать ребята из react-spectrum для своей библиотеки компонентов.

TypeError: Cannot read properties of null (reading 'useContext')

Такое поведение я лично встретил при серверном рендеринге (SSR) на NextJS >= 13 версии с директорией app. На такое можно наткнуться и не только в third party библиотеках, но в собственной, а также в компонентах внутри вашего репозитория - в последнем случае достаточно добавить в проблемных компонентах директиву use client, подробнее можно почитать тут . Причина в том, что разработчики next'а считают что только клиентские компоненты могут использовать хуки (Что бл..ть???), вот схемка, которая это наглядно иллюстрирует их видение.

Пример: Мы используем библиотеку компонентов, которая предоставляет провайдер, который в свою очередь через контекст предоставляет всем нижележащим в дереве компонентам всякое полезное (текущую тему, набор врекпоинтов, еще что-то).

Компоненты могут брать данные из этого контекста с помощью хука useContext - и вот тут-то NextJS начинает сыпать ошибками на SSR. Хотя я ожидаю (и считаю что вполне законно), что на сервере компоненты тоже должны беспрепятственно получить доступ к контексту, точно также как это происходит при рендере в браузере

Решение

Можно решить эту проблему с двух сторон:

  • Если проблема возникает во внешней библиотеке, можно воспользоваться этим решением со stack overflow
  • Если проблема происходит в вашей библиотеке, которую вы пытаетесь заиспользовать в NextJS и у вас есть доступ до конфигов сборщика - в этом случае вы можете добавить директиву use client в начало банлда самостоятельно, например в esbuild можно добавить ее вот так . Для Rollup есть вот такое готовое решение В webpack можно написать свой простенький plugin