プログラミング Next.jsのSSG構成でDynamic Routesの使用時に例外ページでエラーが発生するときの暫定措置
開発環境において、Next.jsのApp Routerでダイナミックなルーティングを行う際、存在しないページへアクセスした場合に404画面に遷移させる方法があります。そのロジックを組むとエラーが発生してしまう事象が発生しているのでエラー内容...
Next.js
プログラミング プログラミング ReactMarkdownでLinkや見出しにスタイルや要素を適用する方法。（独自コンポーネント）
はじめに環境 react-markdown: 9.0.1ReactMarkdownでLinkや見出しにスタイルを適用する以下のように、componentsに構造を定義することで、独自な要素のスタイルなどを適用できます。import Reac...
プログラミング 【Next.js】NextRouter was not mountedとエラーが出て、router.push(“/”)が使えない
はじめにrouter.push("/")等で、画面遷移を実装しようとした時、Unhandled Runtime ErrorError: NextRouter was not mounted.とエラーが出ていしまいます。環境 next: 14...
プログラミング 【MUI,Next.js】MediaQueryの判別ユーティルティ作成した。備忘録
はじめに環境 mui/material:^5.15.5 next: 14.0.3 typescript": ^5MediaQueryの判別用ファイルimport useMediaQuery from '@mui/material/useMe...
プログラミング 【Next.js】MUIの要素にGoogleFontsを適用する方法（備忘録）
MUI要素にGoogleFontsを適用する方法GoogleFontsでフォントを選ぶGoogle FontsでFontを選ぶ。globals.cssにimportするglobals.cssにfontをimportする。@import ur...
プログラミング Embla-CarouselでAutoplayで自動化と時間指定をする方法。
はじめにEmbla-Carouselとは、非依存型でシンプルなカルーセルライブラリです。様々なオプションがあり、自由度高く設定することができます。Embla-Carouselにはサンプルが多く転記し易いですが、バージョンによるオプション等の...
プログラミング Next.jsでmdxの要素にTailwind CSSのスタイルを適用させる方法のご紹介。
はじめにMdxはマークダウン記法ができる、マークダウンの拡張形式です。jsxを埋め込むことができ、柔軟にカスタマイズすることができます。何かしらのUIやスタイルのフレームワークを使用している場合、マークダウンからレンダリングしてHTMLを生...
プログラミング Next.js AppRouterの動的ページでmdxを表示させる方法（SSG)
はじめにインストールまでの手順プロジェクト内で使えるように、インストールまでの手順は以下をご参照ください。動的ページに直で記すとエラーが発生TypeError: createContext only works in Client Comp...
プログラミング 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 re...
プログラミング Next.js AppRouterにて動的ページをビルドする（SSG)
はじめにNext.js13.4の新機能でApp Routerが追加されました。ファイルシステムベースのRouterのことで、Server Componentなど新機能に対応しています。AppRouterでは、すべてのコンポーネントがServ...