Next.js GitHub Pages 정적 배포하기

1/* @/app/categories/[category]/page.tsx */
2
3import { getCategoryList, getPostListByCategory } from "@/entities/post";
4import { convertDateFormat } from "@/shared/lib/utils";
5import Link from "next/link";
6import { FaFolderOpen } from "@react-icons/all-files/fa/FaFolderOpen";
7
8export async function generateMetadata({
9  params,
10}: {
11  params: Promise<{ category: string }>;
12}) {
13  const { category } = await params;
14  const decodedCategory = decodeURIComponent(category);
15
16  return {
17    title: decodedCategory,
18    description: `${category} 페이지`,
19  };
20}
21
22export default async function Page({
23  params,
24}: {
25  params: Promise<{ category: string }>;
26}) {
27  const { category } = await params;
28  const decodedCategory = decodeURIComponent(category);
29  const postList = await getPostListByCategory(decodedCategory);
30
31  return (
32    <main className="flex w-full flex-col gap-8 dark:bg-black">
33      <h1 className="flex flex-row items-baseline gap-2 text-[2rem] font-bold">
34        <FaFolderOpen className="text-custom-gray text-2xl" />
35        {decodedCategory}
36        <span className="text-custom-gray pl-2 text-xl font-light">
37          {postList.length}
38        </span>
39      </h1>
40      <ul className="marker:text-custom-gray list-disc pl-4">
41        {postList.map((post) => (
42          <li key={post.postPath}>
43            <div className="flex flex-row items-center gap-2 py-2 pr-4">
44              <Link
45                className="text-custom-blue text-lg underline-offset-4 hover:text-teal-500 hover:underline dark:text-blue-300"
46                href={`/posts/${post.postPath}`}
47              >
48                {post.title}
49              </Link>
50              <span className="flex-1 border border-dashed border-gray-300" />
51              <time className="text-custom-gray">
52                {convertDateFormat(post.date)}
53              </time>
54            </div>
55          </li>
56        ))}
57      </ul>
58    </main>
59  );
60}
61
62export async function generateStaticParams() {
63  const categoryList = await getCategoryList();
64
65  return categoryList.map((category) => ({
66    category: category.title,
67  }));
68}
69
70export const dynamicParams = false;

1/* next.config.ts */
2
3const nextConfig: NextConfig = {
4  /* config options here */
5  output: "export",
6  basePath: "/mdx-blog",
7  images: {
8    unoptimized: true,
9  },
10
11  /* ... */
12};

1# workflow 이름 설정
2name: Deploy Next.js site to Pages
3
4# workflow를 트리거하는 이벤트 설정
5on:
6  push:
7    branches: ["main"]
8
9# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
10permissions:
11  contents: read
12  pages: write
13  id-token: write
14
15# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
16# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
17concurrency:
18  group: "pages"
19  cancel-in-progress: false
20
21# 실행할 jobs 설정
22jobs:
23  # Build job
24  build:
25    # Ubuntu 환경에서 실행
26    runs-on: ubuntu-latest
27
28    steps:
29      - name: Checkout code
30        uses: actions/checkout@v6
31
32      - name: Install Node.js
33        uses: actions/setup-node@v6
34        with:
35          # Node.js 버전 설정
36          node-version: 24
37
38      - name: Install dependencies
39        run: npm install
40
41      - name: Setup Pages
42        id: setup_pages
43        uses: actions/configure-pages@v5
44
45      - name: Build with Next.js
46        run: npm run build
47
48      - name: Upload artifact
49        uses: actions/upload-pages-artifact@v4
50        with:
51          path: ./out
52
53  # Deployment job
54  deploy:
55    needs: build
56    environment:
57      name: github-pages
58      url: ${{ steps.deployment.outputs.page_url }}
59    runs-on: ubuntu-latest
60    steps:
61      - name: Deploy to GitHub Pages
62        id: deployment
63        uses: actions/deploy-pages@v4

1# workflow 이름 설정
2name: Deploy Next.js site to Pages

1# workflow를 트리거하는 이벤트 설정
2on:
3  push:
4    branches: ["main"]

1# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
2permissions:
3  contents: read
4  pages: write
5  id-token: write

1# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
2# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
3concurrency:
4  group: "pages"
5  cancel-in-progress: false

1# 실행할 jobs 설정
2jobs:
3  # Build job
4  build:
5    # Ubuntu 환경에서 실행
6    runs-on: ubuntu-latest
7
8    steps:
9      - name: Checkout code
10        uses: actions/checkout@v6
11
12      - name: Install Node.js
13        uses: actions/setup-node@v6
14        with:
15          # Node.js 버전 설정
16          node-version: 24
17
18      - name: Install dependencies
19        run: npm install
20
21      - name: Setup Pages
22        id: setup_pages
23        uses: actions/configure-pages@v5
24
25      - name: Build with Next.js
26        run: npm run build
27
28      - name: Upload artifact
29        uses: actions/upload-pages-artifact@v4
30        with:
31          path: ./out
32
33  # Deployment job
34  deploy:
35    needs: build
36    environment:
37      name: github-pages
38      url: ${{ steps.deployment.outputs.page_url }}
39    runs-on: ubuntu-latest
40    steps:
41      - name: Deploy to GitHub Pages
42        id: deployment
43        uses: actions/deploy-pages@v4

1# 실행할 jobs 설정
2jobs:
3  # Build job
4  build:
5    runs-on: ubuntu-latest
6
7    # ...
8
9  # Deployment job
10  deploy:
11    needs: build
12    environment:
13      name: github-pages
14      url: ${{ steps.deployment.outputs.page_url }}
15    runs-on: ubuntu-latest
16    steps:
17      - name: Deploy to GitHub Pages
18        id: deployment
19        uses: actions/deploy-pages@v4

1# Ubuntu 환경에서 실행
2runs-on: ubuntu-latest

1steps:
2  - name: Checkout code
3    uses: actions/checkout@v6

1- name: Install Node.js
2  uses: actions/setup-node@v6
3  with:
4    # Node.js 버전 설정
5    node-version: 24

1- name: Install dependencies
2  run: npm install

1- name: Setup Pages
2  id: setup_pages
3  uses: actions/configure-pages@v5

1- name: Build with Next.js
2  run: npm run build

1- name: Upload artifact
2  uses: actions/upload-pages-artifact@v4
3  with:
4    path: ./out

1# Deployment job
2deploy:
3  needs: build
4  environment:
5    name: github-pages
6    url: ${{ steps.deployment.outputs.page_url }}
7  runs-on: ubuntu-latest
8  steps:
9    - name: Deploy to GitHub Pages
10      id: deployment
11      uses: actions/deploy-pages@v4