React [Next.js] Font Awesomeを導入する方法 概要 Next.jsでFont Awesomeを使うための手順をまとめました。 インストール コアnpm install @fortawesome/fontawesome-svg-core Reactコンポーネントnpm install @fortawesome/react-fontawesome 以下のアイコンパッケージは必要な分だけインストール。 Solidnpm install @forta... 2023.05.08 React
React [Next.js] window, sessionStorage, localStorageなどが使用できない原因 概要 Next.jsでwindowなどブラウザオブジェクトにアクセスするとReferenceErrorとなってしまう。 console.log(window) // ReferenceError: window is not defined これはデフォルトでサーバサイドレンダリングが有効になっているからであり、if文でブラウザオブジェクトが存在するかどうかを判定することでエラーを回避することがで... 2023.05.06 React
React [Next.js] SSRを無効にする方法 概要 Nuxt.jsはデフォルトでサーバサイドレンダリングが有効になっているため、サーバサイドでは存在しないwindow, localStorage, sessionStorageなどのオブジェクトを参照しようとするとエラーになってしまう。 Nuxt.jsの場合はnuxt.config.tsでssr: falseを指定することでSSRを無効にすることができるが、Next.jsの場合はnext/dy... 2023.05.04 React
React [Next.js] CDN版のCSSやJavaScriptを使う方法 概要 Next.jsで外部のCSSやJavaScriptを使う場合、通常はnpmパッケージをインストールしたものをimportする。何らかの事情でCDN版を使いたい場合は、linkタグやscriptタグをNext.jsのルールに則った場所に記述する必要がある。 linkタグ pages/_document.js(拡張子はjsx, ts, tsxなど環境に依存)内に記述する。 import { He... 2023.05.02 React
React(書評) 「Next.jsでつくるフルスタックアプリwith TypeScript 後編」の感想・備忘録2 posted with ヨメレバAmazonで見るKindleで見る 「Next.jsでつくるフルスタックアプリwith TypeScript 後編」の感想・備忘録1の続き itemディレクトリのTypeScript化 pages/user/register.jsのTypeScript化 mv pages/item/create.js pages/item/create.tsx 修正内容はpage... 2023.03.22 React(書評)TypeScript(書評)
React(書評) 「Next.jsでつくるフルスタックアプリwith TypeScript 後編」の感想・備忘録1 posted with ヨメレバAmazonで見るKindleで見る 点数 76点 感想 前編と同様に、JavaScript版に補章だけが追加されていた。 JavaScript版 補章はただ型を指定しているだけなので、型指定がないとどうなるか、どうすると型チェックが実行されるか、なども書籍として本来は触れるべき点だと思う。 _app.jsのTypeScript化 mv pages/_app.js ... 2023.03.18 React(書評)TypeScript(書評)
React(書評) 「Next.jsでつくるフルスタックアプリwith TypeScript 前編」の感想・備忘録3 posted with ヨメレバAmazonで見るKindleで見る 「Next.jsでつくるフルスタックアプリwith TypeScript 前編」の感想・備忘録2の続き itemディレクトリのTypeScript化 pages/api/item/readall.jsのtypeScript化 mv pages/api/item/readall.js pages/api/item/readall.... 2023.03.15 React(書評)TypeScript(書評)
React(書評) 「Next.jsでつくるフルスタックアプリwith TypeScript 前編」の感想・備忘録2 posted with ヨメレバAmazonで見るKindleで見る 「Next.jsでつくるフルスタックアプリwith TypeScript 前編」の感想・備忘録1の続き userディレクトリのTypeScript化 pages/api/user/register.jsのtypeScript化 mv pages/api/user/register.js pages/api/user/regist... 2023.03.11 React(書評)TypeScript(書評)
React(書評) 「Next.jsでつくるフルスタックアプリwith TypeScript 前編」の感想・備忘録1 posted with ヨメレバAmazonで見るKindleで見る 点数 76点 感想 1〜5章は「Next.jsでつくるフルスタックアプリ前編」と全く同じ内容で、補章だけが追加されていた。 1〜5章はこちらと同じ内容 補章は「JavaScriptをTypeScriptに移行していく」という内容なので仕方がないことだが、少々分かりづらく退屈な内容だった。 環境構築 最初からTypeSciptを導... 2023.03.08 React(書評)TypeScript(書評)
React(書評) 「Next.jsでつくるフルスタックアプリ後編」の感想・備忘録2 posted with ヨメレバAmazonで見るKindleで見る 「Next.jsでつくるフルスタックアプリ後編」の感想・備忘録1の続き アイテムページ 編集ページの作成 mkdir pages/item/update touch pages/item/update/.jspages/item/.jsは既に存在するのでpages/item/update/.jsとする。 import { use... 2023.03.01 React(書評)