ついこの間Next11がリリースされましたね。 Next11では、デフォルトでWebpack5になりました。(引き続きオプションによってWebpack4が使用できます。) アップデートする際に、webpackに関するエラーが出たので備忘録として記録しておきます。 next.config.js…

TypescriptやJavaScriptで開発をしていると、async awaitをよく使います。コールバック関数のネストを防ぎ、コードのリーダビリティを保ちながらコードを書くことが出来るため有用なシンタックスです。 awaitの注意点 async functionでは、awaitを使う事がで…

この記事ではTypeScriptを使います。 Reactでよく使う実装にArray.mapでのループがあります。 ループというのは繰り返しのことで一つのReactエレメントを繰り返してリスト表示させることができる機能です。 リストって何？ リストとは配列のことで、順番に要…

NextJsで読み込まれたライブラリは、サーバサイドでもレンダリングできるようになっていますが、稀にSSRに対応していないライブラリがあります。ベースがjQueryになっているようなライブラリだとよくあります。 原因は内部でwindowを呼んでいることで、windo…

ReactはHooksが導入される前から書いていました。同時はconstでコンポーネントを定義するのではなく、class構文で書いていました。今ネットで検索してもclass構文で、stateへのセットもthis.setStateでした。 パフォーマンス改善と利便性のために、construct…

NextJsではWebpackを使用しているため、モジュールがWebpackに対応していないとCritical dependency: the request of a dependency is an expression というエラーが発生します。 NextJsでは、Sequelize や knex などでエラーが発生します。 これを回避する…

前提 この記事ではTypeScriptを使用しています。 17.0.1 のReactを使用しています。 Nextjs 10での動作確認をしています。 はじめに ReactにはReact.FCという型定義があります。 こちらは、React.FunctionComponentが略された型で同じ型です。開発では殆どが…

TL;DR useMemoを使って一切再レンダリングされないコンポーネントを作成する コンポーネント内のDOM更新は dispatchEventを利用する 絶対に再レンダリングさせたくない jQueryなどで直接DOM操作しているライブラリをReactから呼び出して使うと、すこし困った…