✍️

Nextraで静的サイトを作る

2022/01/22に公開約1,700字

概要

ドキュメントサイトを静的に作ろうと思っていた時に、何かいいものはないかなと考えていた時に
教えていただいたのがNextraでした。

https://nextra.vercel.app/

特徴

SSG

静的ジェネレーターですが、Nextを使用している事もあり、SSGを行う事ができます。

ブログテンプレート

ブログの作成とかにも使えそうですね。
実際、テンプレートのテーマも用意されていて、こちらを使うといい感じのテンプレートでブログを作る事もできるみたいです。

https://nextra.vercel.app/themes/blog

そしてできたのがこのような感じ。

結構かっこいいいですね😲

MDX

MDXというMD(Markdown)をJSX記法でラップした拡張子を使う事ができるのも大きな特徴です。
JSXのようにコンポーネントを使って、読み込む形でマークダウンを書けるのは
React使ってる人にとっては結構嬉しいことのように思います。

逆にJSXに慣れていない人にとっては少しハードルが高くなってしまいますが、
普通のmdファイルも使えるので、そちらに慣れてる人でも使えます。

ブログのテンプレートを入れる

Next Create Appでプロジェクトを作成後、以下をpackageに入れる。

yarn add nextra @mdx-js/react nextra-theme-docs

公式設定を設定する。

  1. theme.config.jsを作成
  2. next.config.jsを変更
  3. 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のドキュメントを作る際や、ブログの作成などに使ってみるのはいいかもしれないです。
静的サイトジェネレータを考えてる方は選択肢の一つにしてもいいかもしれないですね!

参考

https://zenn.dev/steelydylan/articles/what-is-nextra

https://zenn.dev/spring_raining/articles/3eb62ff93df1eb

http://kachibito.net/useful-resource/nextra

Discussion

ログインするとコメントできます