構成や使い方

記事の作成

/pages/内に mdx を拡張子として、Markdown を書く

ディレクトリを作成し、その中に mdx ファイルを作成していくと階層化できる

また、markdown 内に html や react コンポーネントを記述することもできる

## Hello MDX
 
import { useState } from 'react'
 
export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>
    {children}{count}
  </button>
}
 
<Counter>**Clicks**: </Counter>

import Hero from '@/components/hero'
 
<Hero />
 
Current year - {new Date().getFullYear()}

Frontmatter

SEO に有利な meta タグにタイトルや discription を挿入してくれる

公開する場合は、作成する記事に必ず明記した方が良い

---
title: Nextra 2
description: Nextra – Next.js Static Site Generator
---

Syntax highlight

Syntax Highlighting - Nextra (opens in a new tab)

Inline code

インラインコードにもシンタックスハイライトが付加できる

{:} を付加する

`let x = 1{:jsx}``background-color: red;{:css}`;

filename & highlight
- filename="My File" (filename に My File)
- showLineNumbers (行番号表示)
- ハイライト (App に該当し、2 行目をハイライト表示)

My File

```jsx filename="My File" showLineNumbers /App/ {2}
function App() {
  return <div>Hello</div>
}

copy buttun

コードブロックタイプの後に copy を付加するだけ

```js copy
console.log('hello, world')

callout

Callout Component - Nextra (opens in a new tab)

テーマには、callout や tabs が含まれているので利用可能

callout

⚠️

This API will be deprecated soon.

Callout

<Callout type="warning" emoji="⚠️">
  This API will be deprecated soon.
</Callout>

tabs

pNPM: Fast, disk space efficient package manager.

tabs

import { Tab, Tabs } from 'nextra-theme-docs'
 
<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tab>
    **pNPM**: Fast, disk space efficient package manager.
  </Tab>
  <Tab>
    **npm** is a package manager for the JavaScript programming language.
  </Tab>
  <Tab>
    **Yarn** is a software packaging system.
  </Tab>
</Tabs>

Image

https://nextra.site/docs/guide/image (opens in a new tab)
next/image も利用可能

import Image from "next/image";
 
<Image src="/demo.png" alt="Hello" width={500} height={500} />;

ただし、外部 URL を挿入する場合は、next.config.js でドメイン許可が必要

next.config.js

…
  images: {
   domains: ['s3.us-west-2.amazonaws.com','i.imgur.com']↲
  }
…

next/image を利用しない場合は、通常の markdown 形式で良い

![Hello](https://foo.bar/demo.png)

ちなみに、Public内のローカル画像を利用する場合は、自動でnext.jsのImageでラップされる

構成

_meta.json

_meta.json のファイルでは、一部を非常時にしたりナビゲーションバーへリンクタグ形式、ドロップダウン形式にもできる

フォルダ事に_meta.json を置いて管理出来る

_meta.json がない場合は、デフォルトでアルファベット順にソートされるので、任意の文字列や順番にしたい場合、左 nextra 項目内の_meta.json はこのようになっている

_meta.json

{
  "install": "インストール",
  "git": "Git管理",
  "howto": "構成と記事作成",
  "ssg": "SSG"
}

リンク

https://nextra.site/docs/guide/link (opens in a new tab)
相対マークダウンリンクは、自動的にNext.jsリンクに変換されるので、通常のMarkdown書式で良い

[インストール](./install)はこちら

このMarkdownがnext/linkへ変換されるので、意識しなくて良い

import Link from 'next/link'
 
<Link href="./install">インストール</Link> はこちら

インストールはこちら

Git管理 _meta.json