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...2023.04.23React
ReactNext.jsのapp directoryでProviderを設定する Next.js13のβ機能であるapp directoryを試しています。 以前のバージョンでは、_app.tsxにProvider系(たとえばReact QueryのQueryClientProviderだったり、RecoilのRecoi...2023.04.04React
React【Next.js】widgets.jsを使ってTweet埋め込みをした際にNotFoundError やろうとしたこと Next.jsで「記事データ(.html)からSSGで静的ブログを作成する」というのをやろうとした。 やり方としては、rehypeやrehype-reactを使って、HTML→ReactElementに変換して、変換...2021.11.172021.11.19React
ReactNext.jsでJamStackな静的ブログを作った→MarkdownじゃなくてHTMLで記事を管理することにした 作ったブログ: ソース: Markdownが苦手 「Next.js 静的ブログ」などでググると、Markdownで記事を管理している方法ばかりヒットします。 具体的に言うと、MarkdownをHTMLに変換して、それを react-ma...2021.11.132021.11.16React
React【Next.js】サブディレクトリにデプロイする Next.jsでは、パスがデフォルトで/になっているらしい。 なので、例えばソース内で <img src="/image/a.jpg"> みたいに書いた状態で、example.com/sub/にアプリをデプロイすると、example.co...2021.09.132021.09.14React
React【Next.js】WEBフォントを追加する<HEAD>コンポーネントを使います。 例として、Google FontsのNoto Sans JPを追加するコードについて紹介します。 全ページに追加する _document.jsxに書けば、全ページに反映できます。 _documen...2021.08.31React
Reactreact-transition-groupの使い方メモ 記憶をなくした時のためのメモ。 react-transition-groupとは? Reactでアニメーションを管理するためのライブラリです。 ただし、react-transition-group自体はアニメーション機能は提供していません...2021.06.282021.08.09React
React【React】コンポーネントの中で定義したコンポーネントを呼び出す? 以下のようにAコンポーネントの中で定義したBコンポーネントをAコンポーネントから呼び出す場合と、 function A() { function B() { return <h1>Bだよ</h1>; }; return ...2021.06.272021.08.08React
React【React】関数と関数コンポーネントのメリット・デメリット 例えば、以下のように書いて function Component() { return <h1>Hello</h1>; } コンポーネントを利用したい場所で<Component>と書いてコンポーネントとして使う方法がありますが それと...2021.06.232022.04.03React
Reactcreate-react-appでSassを使う手順 create-react-appでSass(.scss)を使う手順を調べた結果メモ。 以下、手順です。 npm install sassでSassコンパイラーをインストールする プロジェクト内にある.cssファイルをすべて.s...2021.05.272021.08.08React