✍️
Nextraで静的サイトを作る
概要
ドキュメントサイトを静的に作ろうと思っていた時に、何かいいものはないかなと考えていた時に
教えていただいたのがNextraでした。
特徴
SSG
静的ジェネレーターですが、Nextを使用している事もあり、SSGを行う事ができます。
ブログテンプレート
ブログの作成とかにも使えそうですね。
実際、テンプレートのテーマも用意されていて、こちらを使うといい感じのテンプレートでブログを作る事もできるみたいです。
そしてできたのがこのような感じ。
結構かっこいいいですね😲
MDX
MDXというMD(Markdown)をJSX記法でラップした拡張子を使う事ができるのも大きな特徴です。
JSXのようにコンポーネントを使って、読み込む形でマークダウンを書けるのは
React使ってる人にとっては結構嬉しいことのように思います。
逆にJSXに慣れていない人にとっては少しハードルが高くなってしまいますが、
普通のmdファイルも使えるので、そちらに慣れてる人でも使えます。
ブログのテンプレートを入れる
Next Create Appでプロジェクトを作成後、以下をpackageに入れる。
yarn add nextra @mdx-js/react nextra-theme-docs
公式設定を設定する。
- theme.config.jsを作成
- next.config.jsを変更
- pages配下にmeta.jsonを作成
これだけです😂
あとは、普段のNextを使う感じでpages配下にページを作成し、拡張子をmdxにするだけです。
これで、pages配下のディレクトリを基に、サブパスが決まって、markdownが表示されるという感じになります。
pages/blog/test1
import { Heading } from '../components/Heading'
<Heading text={'テストです'}/>
pages/components/Heading
import React from 'react'
type props = {
text: string
}
export const Heading: React.VFC<props> = ({ text }) => {
return (
<h1>
{ text }
</h1>
)
}
上記の画面はこのような感じで表示しています。
JSX記法でmdを書けるのは嬉しいですね！
OSSのドキュメントを作る際や、ブログの作成などに使ってみるのはいいかもしれないです。
静的サイトジェネレータを考えてる方は選択肢の一つにしてもいいかもしれないですね！
参考
Discussion