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

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

目次

blog-starter を検証してみる

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

Image

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

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

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

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

_document.js

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

何なの、これ？

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

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

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 lang="ja"></html>

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

_app.js

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

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

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

@tailwind base;
@tailwind components;
@tailwind utilities;

slug の取得方法

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

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

md ファイル

GatsbyJS と NextJS の 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 を使うと…

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

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