ブログ構築の妄想

• Next.js v15
• Tailwind CSS
• Radix UI

https://vercel.com/templates?utm_source=next-site&utm_medium=navbar&utm_campaign=next_site_nav_templates&framework=next.js&type=blog&type=portfolio

Next.js Portfolio with Blog

https://vercel.com/templates/next.js/nextjs-portfolio
https://github.com/vercel/examples/tree/main/solutions/blog

このリポジトリ、next.configないな

package.jsonで気になったもの

• geist
  • Vercelのフォントらしい、Interやめたのか
  • 日本語フォントはどうしよう
• next-mdx-remote
  • MDXの変換用
• sugar-high
  • シンタックスハイライト

MDXの変換部分シンプルだけど型付けが全然されてないな
https://github.com/vercel/examples/blob/main/solutions/blog/app/components/mdx.tsx

utilを見ると、parseFrontmatterとかformatDateは割と泥臭い感じやな

ISO準拠してない日付のお尻に追加してる
https://github.com/vercel/examples/blob/01de9d244b4351e0003752439e95ac2635ac4c20/solutions/blog/app/blog/utils.ts#L56-L61

RegExp.prototype.exec()使ったことないな

フロントマターに対して正規表現でチェックして、ヒットした部分とそれ以降の部分で分割してるらしい

https://github.com/vercel/examples/blob/01de9d244b4351e0003752439e95ac2635ac4c20/solutions/blog/app/blog/utils.ts#L11-L17

forEach内部で加工してる

{
  key: 'summary',
  valueArr: [
    "'Discover why Vim, with its steep learning curve, remains a beloved tool among developers for editing code efficiently and effectively.'"
  ]
}
↓
{
  value: "'Discover why Vim, with its steep learning curve, remains a beloved tool among developers for editing code efficiently and effectively.'"
}
↓
{
  value: 'Discover why Vim, with its steep learning curve, remains a beloved tool among developers for editing code efficiently and effectively.'
}

rssはxmlを組み立てて返してるだけ
https://github.com/vercel/examples/blob/main/solutions/blog/app/rss/route.ts

og imageはnext/og
https://github.com/vercel/examples/blob/main/solutions/blog/app/og/route.tsx

https://vercel.com/templates/next.js/nextfolio-a-simple-next-js-portfolio
https://github.com/1msirius/Nextfolio

これもそこそこシンプルそう

package.jsonで気になったもの

• feed
• react-tweet
• react-wrap-balancer
  • へーshuding氏じゃん
• 多分数式表示のため
  • rehype-katex
  • remark-math
  • katex

window.matchMedia

https://github.com/1msirius/Nextfolio/blob/9ea2d7385e478d02cbec2d5972298e1d9b3f824c/app/components/theme-switch.tsx#L34

darkmodeの実装、意外とごちゃごちゃしがち

feedって種類があるんだ
https://github.com/1msirius/Nextfolio/blob/9ea2d7385e478d02cbec2d5972298e1d9b3f824c/app/feed/[format]/route.ts#L32-L46

react-tweet
https://github.com/1msirius/Nextfolio/blob/9ea2d7385e478d02cbec2d5972298e1d9b3f824c/app/components/mdx.tsx#L113

(property) StaticTweet: ({ id }: {
    id: string;
}) => Promise<React.JSX.Element>

へーidを渡すようなIFなんだ

next-mdx-remoteが優秀そう

https://vercel.com/templates/next.js/14-blog-server-components
https://github.com/hritik-6918/nextjs-blog-cms-wisp

wispの機能で記事を取得してる

next/ogってvercel以外でも普通に動くのかな

markdownのスタイル、どうやってるんかと思ったらgloba..cssだった
https://github.com/search?q=repo%3A1msirius%2FNextfolio prose&type=code

proseってなんだろうと思ったら↓だった
https://github.com/tailwindlabs/tailwindcss-typography

codeのスタイルは下記
https://github.com/huozhi/sugar-high?tab=readme-ov-file#highlight-with-css

• SSGしてS3 ← 最初はこっち？
• OpenNext（https://opennext.js.org/）← 気になる
• Amplify ←最近聞かないな
• AppRunner
• Docker書いてECS ←王道

https://tailwindcss.com/docs/font-smoothing

https://ui.shadcn.com

shadcnのサイトを真似しながらぼちぼち作っていくことにした

https://azukiazusa.dev/

https://honghong.me/

https://antfu.me/

https://www.raycast.com/

https://nextjs.org/

やっぱサイトを作るならこういうモダンなやつを作ってみたいな（？）
https://www.youtube.com/watch?v=FTH6Dn3AyIQ&t=239s

良すぎる
https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/

https://github.com/shadcn-ui/ui/blob/main/apps/www/components/toc.tsx

shadcn-uiのサイトのコードを読むのが一番いいのでは（？）