React

React

[Nextjs]pm2環境で起動したNext.jsで500 Internal Server Errorが発生したのでエラーログを確認したい

小ネタです。pm2を利用して、Nextjsを起動すると「500 Internal Server Error」が発生しました。エラーログを探すのに苦労したので、備忘として記録エラーログの場所エラーログは以下の場所に配置されていました。~/.p...
React

[Next.js]Next.jsでリダイレクトを設定する

Next.js9.5以降はnext.config.jsにリダイレクトの設定を記述することが可能です。通常のリダイレクト設定以下の通りの記述をすることでリダイレクトの設定をすることが可能です。module.exports = { async...
React

[Next.js]next.config.jsに記載したenvが反映されなくてハマった話

Next.jsにはnext.config.jsに環境変数を記述することが出来ます。これを使用すると、development環境とproduction環境で参照する値を変更することが出来るので、便利です。先日、nextjsで環境変数を定義する...
React

hooks時代のreact 〜useEffect編〜

react16.8以降、関数コンポーネントでもクラスコンポーネントでも実現出来た、ステート管理、ライフサイクル管理がhooksを使用する事で可能となりました。本記事はその中でもuseEffectについて紹介したいと思います。useEffec...
React

[小ネタ]reactのmaterial-uiでヘッダー分のマージンを追加してコンテンツがかぶらないようにする

reactのmaterial-uiを使用している時にヘッダーとコンテンツがかぶっていたのでその対策として、マージンを追加する必要があった。公式サイトにはなぜか書いていなかったような気がしたので、以下に記載する。例えば、以下のレイアウトimp...
React

hooks時代のreact 〜useState編〜

react16.8以降、関数コンポーネントでもクラスコンポーネントでも実現出来た、ステート管理、ライフサイクル管理がhooksを使用する事で可能となりました。本記事はその中でもuseStateについて紹介したいと思います。useStateを...
React

ReactではsetStateは即座に反映されない

ReactではsetStateで変更された内容はどうやら、renderされるまで反映されないらしい。試しに以下のコードを試してみる。class SetStateSample extends React.Component { constr...