JavaScriptNext.jsReact

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

参考にした記事など

ブックマークや限定記事（予定）など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

アカウントを作成する
広告ここから
広告ここまで

Related Category posts