Next.jsのルーティングイベントの発火の覚書

データ量が多くページ遷移をするときにかなり時間がかかってしまうようなケースが存在する その場合routerの状態を監視してイベントを付与するのがよい Next.jsにおいてはルーティング情報がuseRouterなどから取れる そのためNextのLinkタグを使った遷移をするとイベントを監視することもできる const router = useRouter(); // ルーティングイベント発生時にイベント発火…

Next.js router.queryがundefinedになる問題

withRouterやuseRouterを使用するとファーストレンダリングでundefinedになる問題が発生する これは公式ドキュメントにも書いてます。 自動静的最適化によって静的に最適化されたページは、ルートパラメータが提供されないままハイドレーションされます。 ハイドレーションの後、Next.jsはアプリケーションの更新をトリガーにして、クエリオブジェクトにルートパラメータを提供します。 といった事象が起きているため、ファーストレンダリング時にundefinedが発生して2回目のレンダリングからクエリが取得ができるようになります。 以下のようにすれば2回目のレンダリングで取得することが可能です。 const router = useRouter()…

Recoilを使ってみよう

5月頃になりますが、Reduxの代わりになるRecoilというパッケージがfacebook社の方からリリースされました。現在シェア率も伸びていて、日本では知名度がありませんが、海外ではRecoilがReduxを上回ったようです。 今後日本でも流れが来そうですね。 自分自身まだ技術検証をしていなかったのでチュートリアルを消化するついでにReduxとの比較もしていこうと思います。 先にRecoilのGet Startedのチュートリアルをさらっとやってみます。 Recoilの実装 $ create-react-app app $…
1 2 3 6 7