Next.js / Notion으로 나만의 블로그 개발 후기

import { Client } from '@notionhq/client';
import { NotionToMarkdown } from 'notion-to-md';
 
export const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});
 
const n2m = new NotionToMarkdown({
  notionClient: notion,
  config: {
    parseChildPages: false,
    convertImagesToBase64: false,
  },
});

export const getPublishedPosts = async ({
    tag = '전체',
    sort = 'latest',
    pageSize = 8,
    startCursor,
  }: getPublishedPostParams = {}) => {
    const response = await notion.dataSources.query({
      data_source_id: process.env.NOTION_DATASOURCE_ID!,
      filter: {
        and: [
          { property: 'Status', select: { equals: 'Published' } },
          ...(tag !== '전체'
            ? [{ property: 'Tags', multi_select: { contains: tag } }]
            : []),
        ],
      },
      sorts: [
        {
          property: 'Date',
          direction: sort === 'latest' ? 'descending' : 'ascending',
        },
      ],
      page_size: pageSize,
      start_cursor: startCursor,
    });
 
    return {
      posts: response.results.map(getPostMetadata),
      hasMore: response.has_more,
      nextCursor: response.next_cursor,
    };
  };

const response = await notion.dataSources.query({
  data_source_id: process.env.NOTION_DATASOURCE_ID!,
  filter: {
    and: [
      { property: 'Slug', rich_text: { equals: slug } },
      { property: 'Status', select: { equals: 'Published' } },
    ],
  },
});
 
const mdBlocks = await n2m.pageToMarkdown(response.results[0].id);
const { parent } = n2m.toMarkdownString(mdBlocks);
 
return { markdown: parent, post: getPostMetadata(response.results[0]) };

<MDXRemote
  source={markdown}
  components={{
    p: ({ children }) => {
      return <p className="not-prose relative leading-relaxed">{children}</p>;
    },
    br: () => <br className="my-2" />,
  ......
 />

import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Jihyeon Kim Blog',
    default: 'Jihyeon Kim Blog',
  },
  description: '........',
  keywords: [
    '프론트엔드',
    '웹개발',
    ......
  ],
  formatDetection: {
    email: false,
    telephone: false,
    address: false,
  },
  metadataBase: new URL(`${process.env.NEXT_PUBLIC_SITE_URL}`),
  alternates: {
    canonical: '/',
  },
  openGraph: {
    title: 'Jihyeon Kim Blog',
    description: 'Jihyeon Kim Blog',
    url: 'https://jhkim-work.com',
    siteName: 'Jihyeon Kim Blog',
    images: [
      {
        url: '/assets/images/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Blog OpenGraph Image',
      },
    ],
    locale: 'ko_KR',
    type: 'website',
  },
};

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const { post } = await getPost(slug);
 
  if (!post) {
    return {
      title: '포스트를 찾을 수 없습니다',
      description: '요청하신 블로그 포스트를 찾을 수 없습니다.',
    };
  }
 
  return {
    title: post.title,
    description: post.description || `${post.title} - Jihyeon Kim Blog`,
    keywords: post.tags,
    alternates: {
      canonical: `/posts/${post.slug}`,
    },
    openGraph: {
      title: post.title,
      description: post.description,
      url: `/posts/${post.slug}`,
      type: 'article',
      publishedTime: post.date,
      modifiedTime: post.modifiedDate,
      authors: post.author || 'JH',
      tags: post.tags,
    },
  };
}

import { MetadataRoute } from 'next';
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/_next/'], // API 경로와 Next.js 내부 경로는 차단
    },
    sitemap: `${process.env.NEXT_PUBLIC_SITE_URL}/sitemap.xml`,
  };
}