⑤記事の投稿（MDX）

Cursor

現在のフォルダ構成

content/
└── posts/
├── welcome.md
└── new-article.md. <– ここに新しく記事を作る

となっていた。mdファイルの状態では記事デザインのCSSを柔軟にカスタマイズできない

MD→MDXへの移行

ChatGPTに尋ねてCursorへの指示文を作成した

MDXへの移行が完了した

新規MDXファイルの作成

IDEに移動して「content/posts/」フォルダ内に新規MDXファイル（新規記事）を作成する

MDX用のCSS

例えば、「記事MDXファイルの中で <ImportantBox> と書いたら、実際のWebページではどういうHTML・CSSで表示するか」

ということを決めるならば、

src/mdx-components.tsx（MDXをHTMLに変換するファイル）

のファイル内に

import type { MDXComponents } from “mdx/types”

function ImportantBox( { children}: { children: React.ReactNode } ) {

return (

<div className=”important-box”>

<div className=”important-content”>

{children}

</div>

</div>

)

}

…

const components: MDXComponents = {

h1: ({ children}) => (

<h1>{children}</h1>

),

ImportantBox, <=== ここ忘れない

}

export function useMDXComponents ( … )

サイト全体のCSS

先ほどのmdx-components.tsxの変更で新しくできたimportant-boxというクラスに対して

src/app/globals.css

でCSSを指定する

ローカルで変更箇所を確認

CursorでTerminalを開き（Control＋Shift＋へ）、

npm run dev

してhttp://localhost:3000を開く

Vercel（本番環境）の変更反映

npm run build

でビルドエラーがないか確認し、その後で

npx vercel –prod

でVercelに反映させる

※　npm run buildは必須ではない。飛ばしてnpx vercel –prodしてもエラーがなければうまく行く

BACK