React

スポンサーリンク
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

Next.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...
React

Next.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....
React

react-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

create-react-appでSassを使う手順

create-react-appでSass(.scss)を使う手順を調べた結果メモ。 以下、手順です。 npm install sassでSassコンパイラーをインストールする プロジェクト内にある.cssファイルをすべて.scssに書き換...
スポンサーリンク