プログラミング ReactMarkdownでLinkや見出しにスタイルや要素を適用する方法。(独自コンポーネント) はじめに 環境 react-markdown: 9.0.1 ReactMarkdownでLinkや見出しにスタイルを適用する 以下のように、componentsに構造を定義することで、 独自な要素のスタイルなどを適用できます。 import... 2024.03.16 プログラミング
プログラミング 【Next.js】NextRouter was not mountedとエラーが出て、router.push(“/”)が使えない はじめに router.push("/")等で、画面遷移を実装しようとした時、 Unhandled Runtime Error Error: NextRouter was not mounted. とエラーが出ていしまいます。 環境 nex... 2024.03.04 プログラミング
プログラミング 【MUI,Next.js】MediaQueryの判別ユーティルティ作成した。備忘録 はじめに 環境 mui/material:^5.15.5 next: 14.0.3 typescript": ^5 MediaQueryの判別用ファイル import useMediaQuery from '@mui/material/us... 2024.02.25 プログラミング
プログラミング 【Next.js】MUIの要素にGoogleFontsを適用する方法(備忘録) MUI要素にGoogleFontsを適用する方法 GoogleFontsでフォントを選ぶ Google FontsでFontを選ぶ。 globals.cssにimportする globals.cssにfontをimportする。 @impo... 2024.02.03 プログラミング
プログラミング Embla-CarouselでAutoplayで自動化と時間指定をする方法。 はじめに Embla-Carouselとは、非依存型でシンプルなカルーセルライブラリです。 様々なオプションがあり、自由度高く設定することができます。 Embla-Carouselにはサンプルが多く転記し易いですが、バージョンによるオプショ... 2024.02.03 プログラミング
プログラミング Next.jsでmdxの要素にTailwind CSSのスタイルを適用させる方法のご紹介。 はじめに Mdxはマークダウン記法ができる、マークダウンの拡張形式です。 jsxを埋め込むことができ、柔軟にカスタマイズすることができます。 何かしらのUIやスタイルのフレームワークを使用している場合、マークダウンからレンダリングしてHTM... 2024.01.30 プログラミング
プログラミング Next.js AppRouterの動的ページでmdxを表示させる方法(SSG) はじめに インストールまでの手順 プロジェクト内で使えるように、インストールまでの手順は以下をご参照ください。 動的ページに直で記すとエラーが発生 TypeError: createContext only works in Client ... 2024.01.29 プログラミング
プログラミング Next.jsでmdxを使ってみた。@next/mdxのインストールから表示までの手順。 はじめに マークダウンのライブラリの選択肢は、今回紹介するNext/MDXの他にもあります。 Reactで、react-markdownを使用したことがありますが、個人的には好みではなく、 完全なマークダウンではなく、何かしら変数を組み合わ... 2024.01.29 プログラミング
プログラミング Next.jsでMUIのTypographyを設置すると「Element type is invalid」とエラーが出るときの対処法 エラー Next.jsにおいて、MUI要素であるTypographyを特定条件下で配置した際、以下のようなエラーが発生します。 Error: Element type is invalid. Received a promise that ... 2024.01.29 プログラミング
プログラミング Next.js AppRouterにて動的ページをビルドする(SSG) はじめに Next.js13.4の新機能でApp Routerが追加されました。 ファイルシステムベースのRouterのことで、Server Componentなど新機能に対応しています。 AppRouterでは、すべてのコンポーネントがS... 2024.01.28 2024.01.29 プログラミング