Next.jsでブログを作った | 中田なたいの雑記

中田なたいです。自サイト改修の一環として、Next.jsのblog-starterを使ってブログを作ってみました。

blog-starterを導入する

1. リポジトリの作成、今回はyarnで環境構築

yarn create next-app --example blog-starter natai-blog
cd natai-blog
yarn dev

2. http://localhost:3000へアクセス

スタイルを自サイトに合わせる

blog-starterのスタイルが適用されているので変更します。

1. フォントを導入

M PLUS 1pを導入します。

const config: Config = {
  ...
  theme: {
    extend: {
+     fontFamily: {
+       sans: ["M PLUS 1p", "sans-serif"],
+     },
  ...
}

+ @import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap");

2. layout.tsxと_components/を変更する

ページのレイアウトを変更しつつ、ヘッダーなどのコンポーネントも調整します。
一部のComponentsはTailblocksから引っ張ってきました。

Tailblocks — Ready-to-use Tailwind CSS blocks

Ready-to-use Tailwind CSS blocks

https://tailblocks.cc

先程導入したフォントもここで適用します。

また、Iconコンポーネントを作成してヘッダーとフッターに表示しています。

import ExportedImage from "next/next-image-export-optimizer";
 
const Icon = () => {
  return (
    <div>
      <ExportedImage
        src="/assets/icon/icon.svg"
        alt="Icon"
        width={64}
        height={64}
      />
    </div>
  );
};
 
export default Icon;

詳細はこちらのコミットログを確認してください。

style: 自分のスタイルを適用 · natainakata/natainakata.github.io@994d976

Contribute to natainakata/natainakata.github.io development by creating an account on GitHub.

https://github.com/natainakata/natainakata.github.io/commit/994d976d3b451e54a99b744dcdbb081d51d0d7f2

style: 自分のスタイルを適用 · natainakata/natainakata.github.io@994d976

記事を置き換える

_postsディレクトリにはexample記事があるので削除。
この記事に置き換えました。

また、publicディレクトリへ自分のアイコンも配置しています (注:Iconコンポーネントとは別の画像)

記事部分のスタイルを修正

記事部分のスタイルがよろしくないので@tailwindcss/typographyを導入します。

元々存在したmarkdown-styles.module.cssは削除しました。

yarn add @tailwindcss/typography

module.exports = {
  ...
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
  ...
}

また、シンタックスハイライトを適用させたいのでrehype-pretty-codeも導入します。

yarn add rehype-pretty-code shiki

import { unified } from "unified";
import remarkRehype from "remark-rehype";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeStringify from "rehype-stringify";
 
export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypePrettyCode, {
      keepBackground: true,
    })
    .use(rehypeStringify)
    .process(markdown);
  return result.toString();
}

コードブロックのタイトルやインラインコードのスタイルも設定しました。

.prose figcaption[data-rehype-pretty-code-title] {
  @apply table bg-gray-700 text-white pt-1 pb-5 px-3 rounded-t-md text-sm;
  margin-bottom: -16px;
}
 
.prose figcaption[data-rehype-pretty-code-title] + figure {
  @apply mt-0;
}
 
.prose p code {
  @apply align-text-bottom rounded-md px-1 py-0.5;
}

これらを設定したら記事を表示するPostBodyコンポーネントへスタイルを適用します。

import "../styles/markdown.css";
 
type Props = {
  content: string;
};
 
export function PostBody({ content }: Props) {
  return (
    <div className="max-w-4xl mx-auto">
      <div
        className="prose lg:prose-xl md:prose-lg mx-auto"
        dangerouslySetInnerHTML={{ __html: content }}
      />
    </div>
  );
}