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

basePath をコメントアウト

• next.config.js の設定

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

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

module.exports = nextConfig;

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

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

module.exports = nextConfig;

画像のパスを変更

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

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

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

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

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

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

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

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

• remark-gfm

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 ファイルを配置していました。

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

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

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

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

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

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