• コーディング

【Next.js】Unhandled Runtime Errorの解消について

  • #Next.js

こんにちは！
まついちです。

Udemyの教材でReact.jsの勉強をしています。
ローカル環境で作業していた際に表題のエラーに遭遇しました。
今回はこのエラー解消についてご紹介します。

エラー表示

Unhandled Runtime Error

Error: Functions cannot be passed directly to Client Components
unless you explicitly expose it by marking it with "use server". 
{subtle: function, left-accent: ..., top-accent: ..., solid: ...}

未処理のランタイムエラー

エラー: 「サーバーを使用」とマークして明示的に公開しない限り、関数をクライアント コンポーネントに直接渡すことはできません。
{subtle: function, left-accent: …, top-accent: …, solid: …}

対応

該当ファイルの先頭行に"use client";を追加してあげると解消しました。

こちらのページが参考になりました。

Next13からコンポーネントのレンダリングはデフォルトでサーバーサイドで行うようになったようです。
なので、こちらにも記載があるように、ファイルに’use client’と明示する必要がありました。

【Next 13】Unhandled Runtime Error というエラーの対処法について

修正前

import { Button, ChakraProvider } from '@chakra-ui/react';
import theme from './theme/theme';

export default function Home() {
  return (
    <ChakraProvider theme={theme}>
      <Button colorScheme='teal'>ボタン</Button>
    </ChakraProvider>
  )
}

修正後


"use client";//追加

import { Button, ChakraProvider } from '@chakra-ui/react';
import theme from './theme/theme';

export default function Home() {
  return (
    <ChakraProvider theme={theme}>
      <Button colorScheme='teal'>ボタン</Button>
    </ChakraProvider>
  )
}

まとめ

初心者にはこういったエラーでもあたふたしてしまいます。
けれども、何事も小さな一歩が大事ですね。
こういったナレッジを残していただけるのはすごい有難いなと感じた1日でした。

  • 松浦 一彦

  • 約11年間、事業者会社、制作会社でWEBデザイン、WEBディレクション、GA/GTMを使用したアクセス解析などを経験。
    2022年3月よりフリーランスとして独立。
    現在は業務委託として複数の企業のプロジェクトに参加する傍ら、受託案件を受けたり、自身のブログを運用しています。

    • スキルUI/UX改善、サイト分析、WEBサイト&LPデザイン、コーディング、ディレクション、動画編集、WordPress構築
    • 言語HTML、CSS、Javascript/jQuery、PHP
    • ツールPhotoshop、illustrator、Premiere、After Effect、XD、Figma、Googleアナリティクス

関連記事