Next.js + Github Pages 간단 블로그 만들기

$ npx create-next-app@latest
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … Yes
✔ What import alias would you like configured? … ~/*

$ npm install gray-matter \
    unified \
    remark-gfm \
    remark-parse \
    remark-rehype \
    rehype-stringify \
    rehype-autolink-headings \
    rehype-slug \
    @leafac/rehype-shiki \
    shiki

import fs from 'fs';
import path from 'path';

import matter from 'gray-matter';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

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

function getPostFiles() {
  return fs.readdirSync(postsDirectory);
}

function getParser() {
  return unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(remarkGfm)
    .use(rehypeStringify)
    .use(rehypeStringify)
    .use(rehypeSlug)
    .use(rehypeAutolinkHeadings, {
      content: arg => ({
        type: 'element',
        tagName: 'a',
        properties: {
          href: `#${String(arg.properties?.id)}`,
          style: 'margin-right: 10px',
        },
        children: [{ type: 'text', value: '#' }],
      }),
    });
}

const parser = getParser();

// 특정 글의 데이터를 가져온다
export async function getPostById(id: string) {
  const realId = id.replace(/\.md$/, '');
  const fullPath = path.join(postsDirectory, `${realId}.md`);
  const { data, content } = matter(await fs.promises.readFile(fullPath, 'utf8'));

  const html = await parser.process(content);
  const date = data.date as Date;

  return {
    ...data,
    title: data.title as string,
    id: realId,
    date: `${date.toISOString().slice(0, 10)}`,
    html: html.value.toString(),
  };
}

// 모든 글의 데이터를 가져온다.
export async function getAllPosts() {
  const posts = await Promise.all(getPostFiles().map(id => getPostById(id)));
  // 날짜 내림차순 정렬
  return posts.sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
}

import Link from 'next/link';

import { getAllPosts } from '~/lib/api';

import styles from './page.module.css';

const Page = async () => {
  const posts = await getAllPosts();

  return (
    <div className={styles.container}>
      <h1>Today I Learned</h1>
      <div>
        {posts.map(({ id, date, title, html }) => (
          <article className={styles.post} key={id}>
            <h2 className={styles.postTitle}>
              <Link href={`/posts/${id}`}>
                {date}
              </Link>
              <Link href={`/posts/${id}`}>
                {title}
              </Link>
            </h2>
            <div
              className={styles.postContent}
              dangerouslySetInnerHTML={{ __html: html }}
            />
          </article>
        ))}
      </div>
    </div>
  );
};

export default Page;

import { getPostById, getAllPosts } from '~/lib/api';

type Props = {
  params: Promise<{ id: string }>
}
const Post = async ({ params }: Props) => {
  const { id } = await params;
  const { html, title, date } = await getPostById(id);
  return (
    <article>
      <h1>{title}</h1>
      <h4>{date}</h4>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  );
};

export default Post;

export async function generateStaticParams() {
  const posts = await getAllPosts();

  return posts.map(post => ({
    id: post.id,
  }));
}

export async function generateMetadata({ params }: Props) {
  const { id } = await params;
  const { title } = await getPostById(id);
  return {
    title,
  };
}

---
title: "TIL - Next.js 프로젝트 생성"
date: 2025-02-10
---

내용...

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  basePath: "",
  images: {
    unoptimized: true,
  },
};

export default nextConfig;