Требует ли MUI, чтобы все страницы были CSR при использовании нового каталога приложений в NextJS 13?

Question

Я только что запустил свое первое приложение NextJS и следовал этому руководству , чтобы добавить MUI. Единственная разница, которую я вижу, это то, что я использую экспериментальныйappкаталог NextJS 13.

Следуя руководству, я получаю сообщение об ошибке сервераUncaught TypeError: React.createContext is not a functionчто в основном довольно ясно, поскольку контекстный API доступен только для клиентских компонентов и поэтому может быть довольно легко «решен», поместив каталог поверх ошибочного компонента.

К сожалению, похоже, что это требуется для каждого компонента, который использует любую часть MUI. Например, я также должен был бы в моем корнеlayout.tsxесли я хочу обернуть все свое приложениеThemeProviderи т. д.

Мои вопросы следующие:

1. Я действительно должен'use client;'везде я хотел бы использовать MUI или есть какой-то другой способ?
2. Если 1 верно: не делает ли это MUI совершенно бесполезным в сочетании с NextJS, поскольку он предотвращает использование всех преимуществ SSR, SSG, ISR и т. д., или у меня есть какое-то недопонимание (я очень новичок в NextJS в общий...)?
3. Если 1 и 2 верны: существуют ли другие рекомендуемые фреймворки или библиотеки пользовательского интерфейса, которые предоставляют хороший набор «готовых к использованию» (и готовых к использованию) элементов управления, компонентов и т. д., которые лучше работают с NextJS без этих ограничений?

К вашему сведению, у меня установлены следующие версии банкомата:

• next@13.0.6
• @mui/material@5.10.17

Обновлять

Я должен был более внимательно прочитать бета-документацию NextJS, прежде чем публиковать вопрос:

Похоже, что нет никакого способа обойти этот банкомат, как указано здесь, в документах , и снова здесь, в билете .

Итак, это отвечает на вопрос 1, так как, похоже, нет пути'use client';на данный момент.

Тем не менее, я все равно был бы очень признателен за ответы и мнения по вопросам 2 и 3.

Answer 1

Столкнулся с той же проблемой, используя

      "@emotion/react": "^11.11.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.13.1",
"@types/react": "18.2.0",
"@types/react-dom": "18.2.4",
"next": "13.4.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.4",

И используя приведенную ниже «новую» парадигму с nextjs13.

      app
|-page.tsx

Возвращаясь обратно к

      pages
|-index.tsx

и размещение там моего кода MUI, похоже, пока работает.

Answer 2

Не используйте экспериментальную версию приложения, она будет глючить, так как я даже не могу использовать Canvas в своем приложении.