Nuxt2からNext.js13に乗り換えました。覚書です。
Contents
Next.js13におけるProviderとラップ
TypeError: (0 , _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect) is not a function
reduxはProviderが必要です。
reduxのコードを書いていたらエラーがでました。リンク先をみると、next.jsをアップデートしてと書いてありました。しかし、個人的にその方法では解決しませんでした。
Providerでラップする必要があります。Provider.tsxというファイルを作ります。
'use client';
import { Provider } from 'react-redux';
import { store } from '../redux/store';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<Provider store={store}>
{children}
</Provider>
);
}layout.tsxで読み込みます。
import { Providers } from './providers'コードを追加します。
return (
<html lang="en">
<body className={inter.className}>
<Providers>
{children}
</Providers>
</body>
</html>
)もちろんlayout.tsxに直接書いて1つのファイルにまとめることもできますが、今後のことを考えて切り出しました。
このエラーは消えて解決済となりましたが、次のエラーがでました。
トップページが表示されましたが、reduxを使っている個別ページが表示されません。
Unhandled Runtime Error Error: could not find react-redux context value; please ensure the component is wrapped in a Provider
Unhandled Runtime Error
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>reduxにおいてuseDispatch();を使っているところは、”use client”;が必須のようです。 なぜならuseDispatch();はクライアントの動作だから!
'use client';App Router 内のコンポーネントはデフォルトで Server Component として扱われます。しかし、このコンポーネントはクライアントサイドでの動作が必要なので、'use client'; を使ってクライアントコンポーネントとして明示しています。
スポンサーリンク
Next.js13で_app.tsxがない
ぐぐると_app.tsxとでてきますが、そんなものはありません。もうちょっとちゃんと調べてみると_app.tsxおよび_document.tsxはlayout.tsxに統一されたようです。
コメント