React 【Next.js】You may need an appropriate loader to handle this file type, なエラー
Next.jsで以下のようなエラーが出ました。error - ../backend/src/member/dto/hoge.tsModule parse failed: Unexpected token (24:6)You may need...
React
React React Next.jsのapp directoryでProviderを設定する
Next.js13のβ機能であるapp directoryを試しています。以前のバージョンでは、_app.tsxにProvider系（たとえばReact QueryのQueryClientProviderだったり、RecoilのRecoil...
React 【Next.js】widgets.jsを使ってTweet埋め込みをした際にNotFoundError
やろうとしたこと Next.jsで「記事データ（.html）からSSGで静的ブログを作成する」というのをやろうとした。 やり方としては、rehypeやrehype-reactを使って、HTML→ReactElementに変換して、変換したR...
React Next.jsでJamStackな静的ブログを作った→MarkdownじゃなくてHTMLで記事を管理することにした
作ったブログ：ソース：Markdownが苦手「Next.js 静的ブログ」などでググると、Markdownで記事を管理している方法ばかりヒットします。具体的に言うと、MarkdownをHTMLに変換して、それを react-markdown...
React 【Next.js】サブディレクトリにデプロイする
Next.jsでは、パスがデフォルトで/になっているらしい。なので、例えばソース内で<img src="/image/a.jpg">みたいに書いた状態で、example.com/sub/にアプリをデプロイすると、example.com/im...
React 【Next.js】WEBフォントを追加する
<HEAD>コンポーネントを使います。例として、Google FontsのNoto Sans JPを追加するコードについて紹介します。全ページに追加する_document.jsxに書けば、全ページに反映できます。_document.jsxi...
React react-transition-groupの使い方メモ
記憶をなくした時のためのメモ。react-transition-groupとは？Reactでアニメーションを管理するためのライブラリです。ただし、react-transition-group自体はアニメーション機能は提供していません。rea...
React 【React】コンポーネントの中で定義したコンポーネントを呼び出す？
以下のようにAコンポーネントの中で定義したBコンポーネントをAコンポーネントから呼び出す場合と、function A() { function B() { return <h1>Bだよ</h1>; }; return ( <div> <h1...
React create-react-appでSassを使う手順
create-react-appでSass（.scss）を使う手順を調べた結果メモ。以下、手順です。 npm install sassでSassコンパイラーをインストールする プロジェクト内にある.cssファイルをすべて.scssに書き換え...