プログラミング Next.jsのSSG構成でDynamic Routesの使用時に例外ページでエラーが発生するときの暫定措置
開発環境において、Next.jsのApp Routerでダイナミックなルーティングを行う際、 存在しないページへアクセスした場合に404画面に遷移させる方法があります。 そのロジックを組むとエラーが発生してしまう事象が発生しているので エラ...
プログラミング
プログラミング プログラミング ReactMarkdownでLinkや見出しにスタイルや要素を適用する方法。（独自コンポーネント）
はじめに 環境 react-markdown: 9.0.1 ReactMarkdownでLinkや見出しにスタイルを適用する 以下のように、componentsに構造を定義することで、 独自な要素のスタイルなどを適用できます。 import...
プログラミング MUIのTextFieldで枠線（fieldset）を消す方法。
はじめに MUIのTextFieldを使用すると、Borderが適用されて、このBorderを無効化したい場合があります。例えば、TextFieldをrenderInput内で使用して、スタイルはラッパー側を適用したい場面など。 そういった...
プログラミング 【Next.js】NextRouter was not mountedとエラーが出て、router.push(“/”)が使えない
はじめに router.push("/")等で、画面遷移を実装しようとした時、 Unhandled Runtime Error Error: NextRouter was not mounted. とエラーが出ていしまいます。 環境 nex...
プログラミング Django REST framework × MySQLでよく使うコマンド集（覚書）
Django REST framework 依存パッケージのインストール pip install -r requirements.txt データベースのマイグレーション python manage.py makemigrations app...
プログラミング MUIのAppBarでfixedを使用すると要素が重なり、stickyだと固定されないときに確認すること。
はじめに MUIのAppBarを固定させたい時、positionをfixedにすることで実現することができます。 しかし、fixedを使用すると、元々reativeで下にあった要素が上がり重なってしまいます。 AppBarのheightはド...
プログラミング 【MUI,Next.js】MediaQueryの判別ユーティルティ作成した。備忘録
はじめに 環境 mui/material:^5.15.5 next: 14.0.3 typescript": ^5 MediaQueryの判別用ファイル import useMediaQuery from '@mui/material/us...
プログラミング DataGridのヘッダーから「…(テンテンテン)」や上矢印のメニューをなくす方法。
はじめに DataGridのヘッダーから「...(テンテンテン)」や上矢印のメニューをなくす方法を記します。 このテンテンテンは、Kebab Menu (ケバブメニュー）と呼ぶそうです。 環境 @mui/x-data-grid”: “6.1...
プログラミング DataGridのセルにてWidthが一定以上小さくならないときに確認すること（備忘録）
はじめに Data Gridで表を作成するとき、セルのサイズなど指定することができますが、 Widthを一定以上小さくしようとプロパティを設定しても小さくならないです。 そのときに確認するべきことを記します。 環境 @mui/x-data-...
プログラミング MUIのDataGridでshowCellRightBorderを使うとエラーが出る。対処法。
はじめに DataGridを使っていて、セルにBorderを適用させたかったのですが、用意されていたプロパティ「showCellRightBorder」を設定しても割り当てられないとエラーが発生してしまいます。 <DataGrid rows...
プログラミング MUIのDataGridで初期表示時に特定の列を非表示にする(React)
はじめに 環境 mui/x-data-grid: 6.19.4 特定の列を非表示にする方法 DataGrid要素内のプロパティ「columnVisibilityModel」で、非表示にしたい列を指定することで 初期非表示にすることができます...
プログラミング MUIのDataGridで標準の日本語と任意の文字列をマージさせる方法（備忘録）
はじめに MUIのx-data-gridは、多機能なデータテーブルのコンポーネントです。 フィルター等機能も簡単につけられます。 しかし、標準で英語になっているため日本語に変更する方法と、 一部任意の文字列に変更したい場合の手順を記します。...
プログラミング MUIでの「AppBar」をスクロール時に隠す方法（備忘録）
はじめに 環境 react: "^17.0.0 || ^18.0.0", @mui/material：^5.15.9 @emotion/react：^11.11.3 @emotion/styled：^11.11.0 実装 下にスクロールした...
プログラミング 【Next.js】MUIの要素にGoogleFontsを適用する方法（備忘録）
MUI要素にGoogleFontsを適用する方法 GoogleFontsでフォントを選ぶ Google FontsでFontを選ぶ。 globals.cssにimportする globals.cssにfontをimportする。 @impo...
プログラミング Embla-CarouselでAutoplayで自動化と時間指定をする方法。
はじめに Embla-Carouselとは、非依存型でシンプルなカルーセルライブラリです。 様々なオプションがあり、自由度高く設定することができます。 Embla-Carouselにはサンプルが多く転記し易いですが、バージョンによるオプショ...
プログラミング Next.jsでmdxの要素にTailwind CSSのスタイルを適用させる方法のご紹介。
はじめに Mdxはマークダウン記法ができる、マークダウンの拡張形式です。 jsxを埋め込むことができ、柔軟にカスタマイズすることができます。 何かしらのUIやスタイルのフレームワークを使用している場合、マークダウンからレンダリングしてHTM...
プログラミング Next.js AppRouterの動的ページでmdxを表示させる方法（SSG)
はじめに インストールまでの手順 プロジェクト内で使えるように、インストールまでの手順は以下をご参照ください。 動的ページに直で記すとエラーが発生 TypeError: createContext only works in Client ...
プログラミング Next.jsでmdxを使ってみた。@next/mdxのインストールから表示までの手順。
はじめに マークダウンのライブラリの選択肢は、今回紹介するNext/MDXの他にもあります。 Reactで、react-markdownを使用したことがありますが、個人的には好みではなく、 完全なマークダウンではなく、何かしら変数を組み合わ...
プログラミング Next.jsでMUIのTypographyを設置すると「Element type is invalid」とエラーが出るときの対処法
エラー Next.jsにおいて、MUI要素であるTypographyを特定条件下で配置した際、以下のようなエラーが発生します。 Error: Element type is invalid. Received a promise that ...
プログラミング Next.js AppRouterにて動的ページをビルドする（SSG)
はじめに Next.js13.4の新機能でApp Routerが追加されました。 ファイルシステムベースのRouterのことで、Server Componentなど新機能に対応しています。 AppRouterでは、すべてのコンポーネントがS...