mdx + tsx + nextjs の構成を考える

[jupemara]

• /src に全ファイルを移動できないか調査する
  • webpack のオーバライド的な?
• /pages/[id].tsx にテンプレートファイルを置く
• /contents に記事を置く
  • /contents/xxx.mdx みたいな記事のパターン
  • /contents/xxx/index.md みたいなパターン
  • っというよりかは画像置き場に悩んでるって感じかなー
• /public/images とかに仮に置いたとして、
  • ブログの中だけで使いたい画像があったときに探しに行くのがダルい
• やっぱり、 /contents/xxx.mdx があればそれを使う、 /contents/xxx/index.mdx がアレばそっちを使うという方式がいいな

つまり

• getStaticPaths の中で、ディレクトリを1階層だけ見に行って、index.mdx が存在していればそれを使う、xxx.mdx が存在していればそれをそのまま使う
• pages/[id].tsx の中で、各ページのコンテンツを getStaticProps で取得する

[jupemara]

mdx remark を使うアイデア remark の中で画像の最適化を行い => remark でパースした AST に対して変換をかけて => image optimization ( lazy load 的なことをできないか )

[jupemara]

import {MDXProvider} from '@mdx-js/react'
import {Header} from '../components/Header.js'

const components = {
  h1: Header
}

export default function App({Component, pageProps}) {
  return (
    <MDXProvider components={components}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}

こんな感じで指定できるくさいので、components に img => Image とか各種コンポーネントを食わせることができそうです。css のスタイルについても自前コンポーネント側にスタイルを食わせれば、scoped css というか scoped on components css が可能になりますね。

[jupemara]

っということで全体像を整理すると

• [x] コンテンツ(mdxファイル)のディレクトリを考える
  • src/articles に決定しました
• [x] getStaticProps とかのディレクトリを考える
  • 一旦 lib/repository/articles みたいな感じで lib の下に articles 系の repository として実装することにしました
• [ ] pages/index.tsx で getStaticProps で例えば title, lastUpdatedDate, thumbnail とかを取ってくる
  • [ ] frontmatter の中身決める
• [x] pages/[id].tsx でコンテンツの中身を取得する
  • [x] getStaticPaths で [id] の中身 = URLのパスを取得する
  • [x] この時、 xxx.mdx がアレばそれを xxxx として使い、 xxx/index.mdx があれば xxx として使う
  • [x] params.id を使って getStaticProps で実際のコンテンツを取得する
• [ ] スタイリング
• [ ] 広告を入れる: ( どこに入れるべきかも考えるべし )
• [ ] 自分の bio もちょっち入れる ( github , twitter , あたり?? )