
## basePath をコメントアウト

- [next.config.js の設定](https://flabaka.com/nextjs-config-js/)

以前 next.config.js に basePath を設定した記事を書きました。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/blog',
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;
```

ドメイン名/blog にアクセスさせる為に basePath を設定していたんですが、不要になるので basePath の設定をコメントアウト。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  //basePath: "/blog",
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;
```

## 画像のパスを変更

```markdown
---
hero_image: './about.png'
---
```

Gatsby の時は、mdx ファイルと同一階層に（eyecatch）画像を置いていたので、この様な記述になっていました。

```markdown
---
hero_image: '../assets/about.png'
---
```

ビルド後の書き出し先フォルダ（デフォルトだと out）内の assets フォルダに画像は集められるみたいなので、相対パスでの設定に変更。

## markdown のテーブル記法を正しく表示させる

以前の設定のままだと、markdown のテーブル記法が正しく表示されなくなっていました。

```javascript
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import rehypeStringify from 'rehype-stringify';

export default async function markdownToHtml(markdown) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(markdown);
  return result.toString();
}
```

- [ Markdown の table が正しくパースされない #10 ](https://github.com/gh640/nextjs-blog-example-ja/issues/10)

remark-gfm を使えば良さそうです。

- [remark-gfm](https://github.com/remarkjs/remark-gfm)

```javascript
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';

export default async function markdownToHtml(markdown) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(markdown);
  return result.toString();
}
```

こんな感じにしてあげると、正常に表示される様になりました。

## 個別記事へのパスの設定

以前作成した NextJS ブログでは、pages フォルダ以下に posts フォルダを作成し、そこに個別記事の[slug].js ファイルを配置していました。

```javascript
<Link href={`/posts/${post.path}`}>{post.title}</Link>
```

個別記事へのリンクは上記の様に設定して、ドメイン名/blog/posts/個別記事へのパスになっていました。

Gatsby のブログでは、ドメイン名/個別記事へのパスの設定になっていたので、NextJS もそれに倣う様にしてみました。

1. pages フォルダ直下に、[slug].js ファイルを移動
2. 個別記事へのリンク設定を変更

```javascript
<Link href={`/${post.path}`}>{post.title}</Link>
```

これで 個別記事へのパスが、Gatsby の設定と合致する様になりました。


NextJSに移行する際に修正した箇所あれこれ


## Gatsby5 にしてから…

Gatsby5 にしてから、ビルドに時間が掛かる様になりました。

記事を一つ投稿（markdown ファイル + eyecatch 画像）しようとするだけで、数十分掛かる…といった感じです。

```shell
（略）
info bootstrap finished - 13.497s
success write out requires - 0.006s
success Building production JavaScript and CSS bundles - 1.338s
Building HTML renderer
```

Building production JavaScript and CSS bundles まではスムーズに行くのですが、 HTML renderer で時間が取られる。

それが終了して、Running gatsby-plugin-sharp.IMAGE_PROCESSING…の段階に入ると、また時間が取られます。

```shell
（略）
success Execute page configs - 1.604s
success Caching Webpack compilations - 0.001s
Running gatsby-plugin-sharp.IMAGE_PROCESSING…
（略）
warn This query took more than 15s to run — which might indicate you're querying
too much or have some unoptimized code:
File path: /XXXXXX/src/pages/{mdx.frontmatter__slug}.j
s?__contentFilePath=/XXXXXX/blog/github-personal-acces
s-tokens/index.mdx
URL path: /github-personal-access-tokens/
```

動的に作成されるページの分だけ、上記のコードが繰り返し表示され、ビルドが全然終わらない。

ビルド時に最適化された画像を作成しているとは思うんですが、画像の点数もサイズだってそんなに多くないのに…

## Gatsby5 の新機能

Gatby5 の新機能は、以下の記事に書かれています。

- [v5 Release Notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0/)

GraphQL も記事に書かれているコマンドを実行して、新しい書き方に変更済みです。

- [GraphQL schema: Changes to sort and aggregation fields](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/#graphql-schema-changes-to-sort-and-aggregation-fields)

変更後の GraphQL のコードも、チュートリアル等に書かれているサンプルコードとほぼ一緒なので、GraphQL 自体には問題なさそう。

（Gatsby Cloud を使っていないので、効果はあまり期待出来ないけど）Gatsby Slice も使った上でビルドしてみても、同じ様に時間が掛かる…

node のバージョンを色々変更（v18.0.0〜v18.14.0）してみても、結果は同じ。

## NextJS で試してみる

以前に NextJS で markdown ファイルを読み込んで表示させるブログを作成していたので、試しに Gatsby のブログ記事を NextJS に持って行って、画像のパスなどを修正して、ビルドしてみると…

十数秒でビルドが終わった…

えっ、何で？

ちょっと前にサーバーの OS を CentOS から RockyLinux に変更したけど、Gatsby にだけ影響あるとかは考えにくいし…

Gatsby Cloud を使えば、ビルドもサクッと終わるのかもしれないんですけど…

yarn install も NextJS だと（プラグインとかそんなに使っていないので）サクッと終わったし、これなら NextJS でいいんじゃないかと。

なので、暫くは NextJS に切り替えてやってみようかと思っています。


GatsbyからNextJSに移行してみた


## Static HTML Export

デプロイ先を Vercel ではなく、Static HTML Export で HTML を書き出して、契約しているサーバー上にアップロードして、アクセスしてみたら…

（ローカル環境では問題なかったのに）CSS は適用されていないし、個別ページに遷移してみたら、404 エラーに…

その時の next.config.js ファイルは、以下の様な設定でした。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;
```

## assetPrefix

NextJS で CSS が適用されないとかでググってみると、asssetPrefix を設定するといいよ〜という記事がいくつかあったので、早速試してみる事に。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: "/blog",
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;
```

これでアクセスしてみたら、CSS は適用されたんですが、個別ページに遷移してみると、また 404 エラーに…

個別ページの URL を確認してみると、（ドメイン名/posts/個別記事のパス/）となっていました。

本当はドメイン名の後に、/blog が入るんですが、それが抜けてしまっている…

こうなって欲しい！→（ドメイン名/blog/posts/個別記事のパス/）

assetPrefix を設定すると、ルートの URL も変わってくれるという記事もみたんですが、NextJS のバージョンが上がった際に変更でもあったのか、自分の環境だと上手く行きませんでした。

ちなみに assetPrefix を以下の様に設定する記事も見たのですが、CSS は適用されても、個別ページに遷移したら同じく 404 エラーになりました。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: "./",
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;
```

## basePath

- [Base Path](https://nextjs.org/docs/api-reference/next.config.js/basepath)

リファレンスを見ていたら、basePath を使えば良さそうかな？　と思ったので、試してみました。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/blog",
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;
```

これでアクセスしてみると、CSS もきちんと適用されているし、個別ページにアクセスしてみても、404 エラーは出ませんでした。

という訳で、assetPrefix の記述は削除しました。

```html
<script
  src="/blog/_next/static/chunks/webpack-XXXXXXXXXXXXXXX.js"
  defer=""
></script>
```

basePath の指定をすると、script タグの src の\_next フォルダへのパスに、/blog が自動的に付与されていました。

## images

個別ページにアクセスしてみた際、アイキャッチ画像や favicon も表示されていませんでした。（ちなみに favicon は、トップページでも表示されていない…）

リファレンス（BasePath のページ）を見てみると、next/image コンポーネントを使っている時は、src に basePath に設定した値を付与する必要があるみたいですが、今回は next/image コンポーネントは使っていない（Static HTML Export）ので、src に basePath は設定していません。

favicon の設定は components フォルダ内に meta.js ファイルを作成し、そこに以下のような記述をし、layout.js 側で読み込んでいます。

```js
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicons/favicon-16x16.png"
/>
```

トップページや個別ページで（meta.js を）各々読み込んで、相対パスで設定するのもなぁ…と思ったので、

```js
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="https://flabaka.com/blog/favicons/favicon-16x16.png"
/>
```

絶対パスに変更してみると、favicon もきちんと適用されました。

```markdown
hero_image: "/assets/nextjs_config_js.png"
```

アイキャッチへのパスは、markdown に設定してあります。

Static HTML Export で書き出されたフォルダ構成を見てみると、パスを以下の様にすれば良さそうでした。

```markdown
hero_image: "../../assets/nextjs_config_js.png"
```

ですが、この値を og:image の設定にも使っているので、こちらも絶対パスに変更しました。

ひとまずこれで CSS や画像関連は表示される様になりましたが、他にいい方法はないか今後も探って行きたいと思います。


next.config.jsの設定


## NextJS でブログ

公式のチュートリアルが一通り終わったので、NextJS + TailWindCSS で簡単なブログを作ってみました。

デプロイ先は Vercel にしようかな？　と思ったんですが、頻繁に更新するものではないので、SSG（Static Site Generation）で十分かな？　と。

静的ファイルを作成し、契約しているサーバーに配置する事にしました。

## Static HTML Export

- [Static HTML Export](https://nextjs.org/docs/advanced-features/static-html-export)

上記ページを参考に、Static HTML Export を行いました。

```js
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
```

すると、エラーが…

## next/image

記事を表示するページで、以下の様な記述をしていました。

```jsx
import Image from "next/image";
（略）
return(
  <Image src={画像へのパス} alt={alt属性} layout="fixed" width={幅} height={高さ} />
)
```

Image コンポーネントが使えないみたいなので、調べてみると色々やり方はあるみたいですが、ひとまず img タグに置き換える事に…

```jsx
（略）
return(
  <img src={画像へのパス} alt={alt属性} width={幅} height={高さ} />
)
```

これで export し直すと、静的ファイルを書き出す事が出来ました。


NextJSとTailWindCSSでブログを作ってみる


## GatsbyJS とは別の方法を探ってみる

NextJS のブログに目次（TableOfContents）をつけてみようかなということで…

GatsbyJS のブログでは、以下の様に目次を作成しました。

- [Gatsby の記事に目次を作成してみる](https://flabaka.com/table-of-contents/)

remark プラグインを使った方法は GatsbyJS で試したので、別の方法はないかと探ってみると、以下の記事が出てきました。

- [Tocbot](https://tscanlin.github.io/tocbot/)
- [Next.js × MDX ブログに tocbot でいい感じの Table of Contents を作る](https://blog.kimizuy.dev/posts/using-tocbot)

## Tocbot を使ってみる

tocbot をインストール

```jsx
yarn add tocbot
```

（記事を参考にしながら）components フォルダ以下にファイルを作成

```jsx
import { useEffect } from "react";
import tocbot from "tocbot";

export default function Toc() {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc",
      contentSelector: ".blogContents",
      headingSelector: "h2, h3",
    });

    return () => tocbot.destroy();
  }, []);

  return (
    <>
      <h4>目次</h4>
      <div className="toc"></div>
    </>
  );
}
```

目次を表示させたい箇所で、先に作成したコンポーネントを読み込んであげます。

```jsx
import Toc from "../../components/toc";
（略）
<article className="blogContents">
  <DateFormatter dateString={post.date} />
  <h1>{post.title}</h1>
  <Toc />
</article>
```

その際、コンポーネント側で設定した contentSelector: ".blogContents"というクラスを設定してあげる必要があります。

## 注意点

コンポーネント側で headingSelector に h2〜h4 までを設定

```jsx
tocbot.init({
  tocSelector: ".toc",
  contentSelector: ".blogContents",
  headingSelector: "h2, h3, h4",
});
```

return の箇所には、h4 で目次という見出しを設定し、その下の div で囲まれた中に目次のリストを表示させようとしていました。

```jsx
return (
    <>
      <h4>目次</h4>
      <div className="toc"></div>
    </>
```

ちなみに読み込む markdown のファイルは、下記の様になっています。

```markdown
## GatsbyJS とは別の方法は？

## Tocbot を使ってみる

## 注意点
```

yarn dev すると、下記の様に表示されてしまいました…

> 目次
>
> 1.  目次
> 1.  GatsbyJS とは別の方法は？
> 1.  Tocbot を使ってみる
> 1.  注意点

markdown 側には目次という項目は設定していないんですが、headingSelector に h4 を設定している事で、（h4 タグで囲った）見出しとして表示させたいものが、自動的に目次の項目として認識されてしまっている様です…

```jsx
tocbot.init({
  tocSelector: ".toc",
  contentSelector: ".blogContents",
  headingSelector: "h2, h3",
});
```

目次は TOC の項目に含みたくないので、headingSelector から h4 を削除すると、意図した表示になりました。

> 目次

> 1. GatsbyJS とは別の方法は？
> 1. Tocbot を使ってみる
> 1. 注意点


NextJSブログにTocbotを使って、目次（TableOfContents）を作成してみる


## yarn dev では…

NextJS と TailWindCSS でブログを作っているんですが、ある程度形になったので build してみようか…と

で、yarn build してみたら、エラーが…

yarn dev ではエラーは出なかったのに、何故？

## Page Without Valid React Component

```jsx
Build optimization failed: found page without a React Component as default export in
pages/lib/api

See https://nextjs.org/docs/messages/page-without-valid-component for more info.
```

エラーを見ると、pages フォルダ以下にある lib フォルダ内の api ファイルに問題があるっぽい。

まずはこのページを見てねと書かれているリンク先を、確認してみる。

- [Page Without Valid React Component](https://nextjs.org/docs/messages/page-without-valid-component)

> If the file is not meant to be a page, and instead, is a shared component or file, move the file to a different folder like components or lib.

これが原因っぽい。そもそも何で pages フォルダ以下に lib フォルダを配置したのかも、意味不明ですね。

lib フォルダを components フォルダと同一階層に移動させたら、このエラーは消えました。

## next-sitemap

サイトマップを作成しようかと思い、以下を導入してみました。

- [next-sitemap（Github）](https://github.com/iamvishnusankar/next-sitemap)

いくつか記事を読んでみたところ、next-sitemap.js ファイルを作成し、それに必要な項目を記入し、build すれば OK っぽい。

で、ビルドしてみたら…

```jsx
Unable to find next-sitemap.config.js or custom config file.

IMPORTANT: Default config file has been renamed to `next-sitemap.config.js`

If you are using custom config file, make sure to invoke `next-sitemap --config <custom-config-file>.js`

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
```

どうやら、ファイル名が駄目っぽい。

next-sitemap.js から、next-sitemap.config.js に変更し、再度ビルドしてみると…

今度は問題なく、ビルド出来ました。

## feed

これは yarn build の際ではなく、yarn dev の際にエラーになったものですが…

- [feed（npm）](https://www.npmjs.com/package/feed)

こちらを使って feed を作成してみたんですが、markdown ファイルをパースするには、marked もインストールするようなので、こちらもインストール。

- [marked（npm）](https://www.npmjs.com/package/marked)

```jsx
import marked from "marked"
（略）
content: marked(post.content),
```

いくつかの記事を参考に、こんな感じでコードを作成し、yarn dev してみたところ…

```jsx
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_3__.default) is not a function
```

怒られました。

marked のコードを見てみると…

```jsx
//export default function じゃない…
export function marked(src: string, options?: marked.MarkedOptions): string;
```

そりゃエラー出るよねってことで…

```jsx
import { marked } from "marked";
```

コードを修正し、yarn dev してみると、エラーは出ませんでした。

- [Marked Documentation](https://marked.js.org/)

上記ページの Node.js の箇所を見てみると、`{ marked }`になっていました。

## Vercel にデプロイ？

NextJS は、Vercel にデプロイするのが、いいんですかね？

個人利用ならお金も掛からないっぽいし、とりあえず使ってみるのもアリなのかも？

それとも契約しているサーバ上で動かそうかなぁ…


yarn buildしたら、エラーが出る


## blog-starter を検証してみる

- [blog-starter（Github）](https://github.com/vercel/next.js/tree/canary/examples/blog-starter)

GitHub で公開されている blog-starter （NextJS）がどう作られているか、検証してみました。

## Image

アイキャッチなどの画像は、public フォルダ内に配置され、md ファイルからパスを指定しています。

同じ様に画像を配置しておけば、markdown 記法を使っての画像配置も問題なさそう。

```markdown
//アイキャッチ画像
picture: "/assets/blog/hello-world/XXX.jpeg"

//markdown 記法での画像配置
![alt属性](/assets/blog/hello-world/XXXXXX.jpg)
```

## \_document.js

公式のチュートリアルをやった際、\_app.js ファイルはあったけど、blog-starter には、\_document.js ファイルなるものがありました。

何なの、これ？

- [Custom Document（NextJS）](https://nextjs.org/docs/advanced-features/custom-document)

なるほど、こう使うのか…

ひとまず、lang 属性だけ設定してみました。

```jsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="ja">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

yarn dev すると…

```html
<html lang="ja"></html>
```

lang 属性が設定出来ました！

## \_app.js

blog-starter は、TailWindCSS を使っているので、\_app.js ファイルに以下の様に global に CSS を読み込む設定をしておく。

```jsx
import "../styles/index.css";
```

index.css には、以下を記述しておく。

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## slug の取得方法

\_posts フォルダ内に md ファイルが入っていて、md ファイルのファイル名から slug を取得していました。

ちなみに GatsbyJS の mdx のチュートリアルでは、フォルダ名から slug を取得。mdx のファイル名は 全て index.mdx でした。

## md ファイル

GatsbyJS と NextJS の Markdown ファイルの書式を統一しておけば、どちらかに移行する場合に、データのやり取りが楽になりそうかな〜と。

画像のパスは仕方ないにしろ、その他の項目を一緒にしておくと良さそう！

```markdown
---
title:
date:
summary:
tags:
hero_image:
hero_image_alt:
---
```

## getStaticPaths

> If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated.

> When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.

pages フォルダ内の[slug].js ファイル内から、getStaticPaths を呼び出す。

pages フォルダ内の index.js ファイル内で、getStaticPaths を使うと…

```jsx
error - Error: getStaticPaths is only allowed for dynamic SSG pages and was found on '/tags'.
Read more: https://nextjs.org/docs/messages/non-dynamic-getstaticpaths-usage
```

こんな感じで怒られます。


NextJSのblog-starter を検証してみる


## まずはチュートリアルをやってみる

- [Create a Next.js App（NextJS）](https://nextjs.org/learn/basics/create-nextjs-app)

チュートリアルは npx だったけど、yarn を使ってやってみる

```javascript
yarn create next-app nextjs-blog
cd nextjs-blog
yarn dev
```

## Link

GatsbyJS の時は、URL の指定は to="/posts/1"とかだったけど、NextJS は href="/posts/1"になる。

```jsx
import Link from "next/link";

export default function Home() {
  return (
    <Layout>
      <section>
        （略）
        <Link href={`/posts/${id}`}>
          <a>{title}</a>
        </Link>
        （略）
      </section>
    </Layout>
  );
}
```

## Image

public フォルダ内に images フォルダを作り、そこに画像を入れておく。

```jsx
import Image from "next/image";

const Hoge = () => (
  <Image src="/images/hoge.png" height={144} width={144} alt="XXXXXXXX" />
);
```

## Metadata

Layout.js ファイル内に Head コンポーネントを配置し、meta データの設定を行う。

```jsx
import Head from "next/head";

export default function Layout({ children }) {
  return (
    <Head>
      <title>タイトル</title>
      <link rel="icon" href="/favicon.ico" />
      <meta name="description" content="説明文" />
    </Head>
  );
}
```

## CSS（Global Style）の設定

CSS の Global Style を設定したい場合は、pages 以下に\_app.js ファイルを作成する。

styles フォルダを（プロジェクトの）トップレベルに作成し、そのフォルダ内に global.css を作成し、\_app.js 内で読み込む。

```jsx
import "../styles/global.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

## 固定ページの作成

固定ページ（About、404 など）を作成する時は、pages フォルダ内に配置する。

```jsx
// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}
```

## md ファイルの作成

posts フォルダを（プロジェクトの）トップレベルに作成し、そのフォルダ内に md ファイルを作成する。

```markdown
---
title: "NextJSのチュートリアルをやってみる"
date: "2022-06-21"
---
```

Markdown ファイルから meta 情報をパースするために、gray-matter ライブラリ をインストールする。

```jsx
yarn add gray-matter
```

lib フォルダを（プロジェクトの）トップレベルに作成し、そのフォルダ内に posts.js ファイルを作成する。

```jsx
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '');

    （略）
```

index.js ファイルに、以下を追記する。

```jsx
import { getSortedPostsData } from "../lib/posts";

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}
```

allPostsData を受け取って、map で展開する。

```jsx
export default function Home({ allPostsData }) {
  return (
    <Layout>
      <section>
        <h2>Blog</h2>
        <ul>
          {allPostsData.map(({ id, date, title }) => (
            <li key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}
```

## 動的ファイルの作成

動的にページを作成する時は、pages ディレクトリ内に posts フォルダを作成し、そこに[id].js ファイルを配置する。

Markdown に書かれた内容を読み込む為に、remark ライブラリをインストールする。

```jsx
yarn add remark remark-html
```

lib/posts.js ファイルに以下を追記する。

```jsx
import { remark } from "remark";
import html from "remark-html";

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);

  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ""),
      },
    };
  });
}

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}
```

pages/posts/[id].js ファイルに、以下を追記。

```jsx
import { getAllPostIds, getPostData } from "../../lib/posts";

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}
```

markdown ファイルのファイル名から.md の拡張子を削除したものを URL のパス名として取り出し、それを使って個別記事にアクセス可能にしている。

getStaticPaths と getStaticProps については、以下に詳しく書かれています。

- [getStaticPaths（NextJS）](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths)
- [getStaticProps（NextJS）](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)

## Date Format

日付のフォーマットを行うので、date-fns ライブラリをインストールする。

```jsx
yarn add date-fns
```

components フォルダ内に、date.js ファイルを作成し、以下を記述する。

```jsx
import { parseISO, format } from "date-fns";

export default function Date({ dateString }) {
  const date = parseISO(dateString);
  return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>;
}
```

pages/posts/[id].js ファイルの記述を変更する。

```jsx
import Date from "../../components/date";

export default function Post({ postData }) {
  return (
    <Layout>
      {/* Replace {postData.date} with this */}
      <Date dateString={postData.date} />
    </Layout>
  );
}
```

日付のフォーマットを変更したい場合は、以下を参考にする。

- [format(date-fns)](https://date-fns.org/v2.16.1/docs/format)


タイトル	投稿日時
NextJSに移行する際に修正した箇所あれこれ	2023-03-25
GatsbyからNextJSに移行してみた	2023-03-24
next.config.jsの設定	2022-09-02
NextJSとTailWindCSSでブログを作ってみる	2022-08-30
NextJSブログにTocbotを使って、目次（TableOfContents）を作成してみる	2022-07-15
yarn buildしたら、エラーが出る	2022-07-08
NextJSのblog-starter を検証してみる	2022-06-30
NextJSのチュートリアルをやってみる	2022-06-21

NextJSの記事、8件あります