Icon
Natai Nakata

Next.jsでブログを作った

Cover Image for Next.jsでブログを作った
中田なたい
中田なたい

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

blog-starterを導入する

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

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

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

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

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

1. フォントを導入

M PLUS 1pを導入します。

tailwond.config.ts
const config: Config = {
  ...
  theme: {
    extend: {
+     fontFamily: {
+       sans: ["M PLUS 1p", "sans-serif"],
+     },
  ...
}
src/app/globals.css
+ @import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap");

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

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

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

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

src/app/_conponents/Icon.tsx
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;

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

記事を置き換える

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

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

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

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

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

shell
yarn add @tailwindcss/typography
tailwind.config.ts
module.exports = {
  ...
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
  ...
}

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

shell
yarn add rehype-pretty-code shiki
src/lib/markdownToHtml.ts
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();
}

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

src/styles/markdown.css
.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コンポーネントへスタイルを適用します。

src/app/_components/post-body.tsx
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>
  );
}

これでひとまず見れる形にはなりました。

今後実装したいもの

  • リンクカード
  • 今の自サイトとの統合
  • 記事へのタグ付け

最後に

以上がblog-starterをベースとしたブログの作成でした。 参考になれば幸いです。

参考記事