next.js13でpropsが渡せない!

next.js13の覚書です。

next.js13でpropsが渡せない!

Event handlers cannot be passed to client component props

Event handlers cannot be passed to client component propsというエラーがでました。

その解決策としてimportの前に

use client;

をつけるという記事が多くありましたが、個人的にこの方法ではうまくいきませんでした。

next.js13でpropsの渡し方

こちらの記事が参考になりました。

2023年6月追記: このセクションの記載も少し古くなったようです。「引数も返り値もシリアライズ可能な関数」に関しては SC から CC に渡せるようです（でも RFC どこ？）。もっとも、SC で DOM 操作や setState なんかは当然不可能ですから、フォームデータを送ってサーバ側でデータベースに保存するための「ハンドラ」関数を送る、みたいな使い方になります。

サーバ側で SC から CC をレンダーできますが「props として SC から CC に関数を渡せない」という重要な制約があります。props がネットワークを経由するんだから当然ですね。

https://qiita.com/naruto/items/c17c79ec5c2a0c7c4686

念のためですけど、

• SCとはクライアントサイド
• CCとはサーバーサイド

のことです。

基本的に渡せないようですけど、シリアライズ可能な関数に限定して渡せるようです。単純な文字列（string）やその他のプリミティブなデータ型（例：number, boolean）はSCからCCに渡せます。

今回はFirebaseの画像アップロードなどを作ろうと思っていたため、無理です。そのため、reduxを使った実装に切り替えました。

サーバーサイドからクライアントサイドの渡し方

他にサーバーサイドとクライアントサイドをやり取りする方法として次のようなものがあります。

• コンテクストを使う (Reactの基本)
• Reduxやその他の状態管理ライブラリの使用
• フェッチリクエストの利用

Reduxは難しいと言われる人もいますが、最終的にはパフォーマンスの問題や規模感が大きな開発になると、Reduxに行きつく人が多いです。後日、ソースコードを書き直すのが面倒なので、最初から難易度が高い方に行くことにしました。

npm install @reduxjs/toolkit react-redux

Redux Toolkitを使う場合、npm install reduxはいらないっぽいですね。

npm install @reduxjs/toolkit react-redux

https://redux-toolkit.js.org/tutorials/quick-start

react-reduxは、ReactアプリケーションとReduxの状態管理を統合するための公式ライブラリです。

reduxはreactのライブラリではありません。そのため、.tsに拡張子になることがあります。

next.js13のuseRouterのエラー

仕様が変わったようです。

// import { useRouter } from 'next/router';
import { useRouter } from 'next/navigation';

You need to import from next/navigation in the new version.

https://github.com/vercel/next.js/issues/41811

queryもなくなったため、useSearchParams()を使います。

import { useRouter, useSearchParams } from 'next/navigation';

const router = useRouter();
const searchParams = useSearchParams();
const id = searchParams.get('id');

next.js13のDynamic Routing(動的に変化するパス)の404

まずディレクトリ構造の問題があります。この構造はうまくやる方法もあるのかもしれませんが、404にハマるかもしれません。

user/[id].tsx

こうしたら簡単にできました。公式のリファレンスもこの書き方のようです。詳しく調べていませんが、next.js13はpage.tsxを使うというルールがあるため、それ絡みかもしれません。

user/[id]/page.tsx

ここまでくると、転送はできるようになります。あとは簡単です。

queryがなくなったためuseParamsを使います。

import { useParams } from 'next/navigation'

app/shop/[slug]/page.js

/shop/1

{ slug: '1' }

https://nextjs.org/docs/app/api-reference/functions/use-params

useParamsとuseSearchParamsの違いですが、useSearchParamsの方は?以降のパラメーターを取る方です。

/dashboard?a=1 ‘1’

https://nextjs.org/docs/app/api-reference/functions/use-search-params

Next.js 13のgenerateStaticParams とgetStaticPaths

Next.js 13では、/app ディレクトリと /pages ディレクトリで使用可能な機能が異なります。特に、静的パスの生成に関する関数は異なるのが重要な点です。

• /app ディレクトリでは、generateStaticParams を使用します。
• /pages ディレクトリでは、従来の getStaticPaths を使用します。

use client(クライアントサイドとサーバーサイドのレンダリング)

Next.js13からの仕様です。use clientをつけると、ブラウザとターミナルでログが確認できます。

'use client';

export default function Test() {
  console.log('Testページがレンダリングされました。');
  return <div>Hello</div>;
}

‘use client’をコメントアウトすると、ブラウザではログが表示されないです。サーバーサイドとなります。ターミナルにはログがでます。

// 'use client';

export default function Test() {
  console.log('Testページがレンダリングされました。');
  return <div>Hello</div>;
}