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