becolomochi

<h2 id="contentlayer" data-line="0" class="code-line">
<a class="header-anchor-link" href="#contentlayer" aria-hidden="true"></a> Contentlayer</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line"><a href="https://contentlayer.dev/" target="_blank" rel="nofollow noopener noreferrer">https://contentlayer.dev/</a></li>
<li data-line="3" class="code-line">mdファイルからページを生成する</li>
<li data-line="4" class="code-line">型定義も生成できる</li>
<li data-line="5" class="code-line">2024/8現在はNext13まで対応（14はNG）</li>
<li data-line="6" class="code-line">生成するのに時間がかかる</li>
</ul>
<h3 id="%E6%9B%B8%E3%81%8D%E6%96%B9" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8D%E6%96%B9" aria-hidden="true"></a> 書き方</h3>
<div class="code-block-container"><pre class="language-md"><code class="language-md code-line" data-line="10"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My First Post
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-12-24</span></span>
<span class="token punctuation">---</span></span>

Ullamco et nostrud magna commodo nostrud ...
</code></pre></div>

<h2 id="next%2Fmdx" data-line="0" class="code-line">
<a class="header-anchor-link" href="#next%2Fmdx" aria-hidden="true"></a> Next/MDX</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line"><a href="https://nextjs.org/docs/pages/building-your-application/configuring/mdx" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/docs/pages/building-your-application/configuring/mdx</a></li>
<li data-line="3" class="code-line">Nextの公式プラグイン</li>
<li data-line="4" class="code-line">mdxで書ける
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">ここを記事部分に転用する</li>
</ul>
</li>
</ul>
<h3 id="%E6%9B%B8%E3%81%8D%E6%96%B9" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8D%E6%96%B9" aria-hidden="true"></a> 書き方</h3>
<div class="code-block-container"><pre><code class="code-line" data-line="9">export const meta = {
  title: "My First Post",
  date: "2021-12-24",
}

Ullamco et nostrud magna commodo nostrud ...
</code></pre></div>

<h2 id="%E8%A8%98%E4%BA%8B%E9%83%A8%E5%88%86%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E8%A8%98%E4%BA%8B%E9%83%A8%E5%88%86%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3" aria-hidden="true"></a> 記事部分のタイポグラフィ</h2>
<p data-line="2" class="code-line">tailwind便利そう<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__902f44b8320da" src="https://embed.zenn.studio/card#zenn-embedded__902f44b8320da" data-content="https%3A%2F%2Fgithub.com%2Ftailwindlabs%2Ftailwindcss-typography" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/tailwindlabs/tailwindcss-typography" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/tailwindlabs/tailwindcss-typography</a></p>
