Next.js App RouterでuseState / useEffectが動かないときは、Node.jsのバージョンを確認する
Next.js App Routerでサンプルアプリを動かしていたところ、useEffectとuseStateを使った非同期処理が動かない場面に遭遇しました。解決方法自体は、「Node.jsのバージョンをアップグレードする」だけでOKでしたが、また別PCやワークショップで遭遇するかもしれないので、覚書としてまとめます。
広告ここから
広告ここまで
目次
Next.js App Routerでサンプルアプリを動かしていたところ、useEffectとuseStateを使った非同期処理が動かない場面に遭遇しました。
解決方法自体は、「Node.jsのバージョンをアップグレードする」だけでOKでしたが、また別PCやワークショップで遭遇するかもしれないので、覚書としてまとめます。
動かそうとしたコードの例
サンプルアプリを作っている最中でしたので、かなりシンプルなコンポーネントでした。
"use client";
import { FC, useEffect, useState } from "react";
export const Client= () => {
const [posts, setPosts] = useState('')
useEffect(() => {
fetch('https://example.com/wp-json/wp/v2/posts', {
cache: 'no-cache'
})
.then(data => data.json())
.then(data => {
setPosts(data)
}).catch(console.log)
}, [])
return (
<pre><code>
{posts}
</code></pre>
)
}
クライアント側でのみfetchさせたいので、use clientを設定し、useEffectでAPIを呼び出します。
使っていたNode.jsのバージョン
useEffectの処理が動かなかった時点での、バージョンは16系でした。
% nodenv versions
* 16.13.1 nodenvを利用して、18系にアップグレードしたところ、無事動くようになりました。
% nodenv local 18.17.1