Next.js 블로그 만들기 (14.1 최신 버전 + tailwind)

npx create-next-app@latest

What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*

npx shadcn-ui@latest init

Would you like to use TypeScript (recommended)? yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › yes

---
title: "Next.js 블로그 만들기 (14.1 최신 버전 + tailwind)"
date: 2024-02-26
desc: FE 개발자라면 티스토리 말고 개인 블로그 하나쯤은,,
thumbnail: /posts/nextjs_blog/setup/thumbnail.jpg
---
 
#### 환영 
 
안녕하세요. 이 글은 mdx파일로 작성되었습니다.

npm install --save gray-matter

import fs from 'fs';
import matter from 'gray-matter';
 
const parsePost = async (postPath: string) => {
  const file = fs.readFileSync(postPath, 'utf8');
  const { data, content } = matter(file);
};

{
  title: 'Next.js 블로그 만들기 (14.1 최신 버전 + tailwind)',
  date: 2024-02-26T00:00:00.000Z,
  desc: 'FE 개발자라면 티스토리 말고 개인 블로그 하나쯤은,,',
  thumbnail: '/posts/nextjs_blog/setup/thumbnail.jpg'
}

#### 환영
 
안녕하세요. 이 글은 mdx파일로 작성되었습니다.

import fs from 'fs';
import path from 'path';
import dayjs from 'dayjs';
import matter from 'gray-matter';
import readingTime from 'reading-time';
 
const BASE_PATH = '/src/posts';
const POSTS_PATH = path.join(process.cwd(), BASE_PATH);
 
// MDX 파일 파싱 : abstract / detail 구분
const parsePost = async (postPath: string): Promise<Post> => {
  const postAbstract = parsePostAbstract(postPath);
  const postDetail = await parsePostDetail(postPath);
  return { ...postAbstract, ...postDetail };
};
 
// MDX Abstract
// url, cg path, cg name, slug
export const parsePostAbstract = (postPath: string) => {
  // category1/title1/content
  const filePath = postPath
    .slice(postPath.indexOf(BASE_PATH))
    .replace(`${BASE_PATH}/`, '')
    .replace('.mdx', '');
 
  // category1, title1
  const [category, slug] = filePath.split('/');
 
  // /blog/category1/title1
  const url = `/blog/${categoryPath}/${slug}`;
 
  return { url, category, slug };
};
 
// MDX Detail
const parsePostDetail = async (postPath: string) => {
  const file = fs.readFileSync(postPath, 'utf8');
  const { data, content } = matter(file);
  const grayMatter = data as PostMatter;
  const readingMinutes = Math.ceil(readingTime(content).minutes);
  const dateString = dayjs(grayMatter.date).locale('ko').format('YYYY년 MM월 DD일');
  return { ...grayMatter, dateString, content, readingMinutes };
};
 

npm install glob @types/glob

import { sync } from 'glob';
import path from 'path';
 
const BASE_PATH = '/src/posts';
const POSTS_PATH = path.join(process.cwd(), BASE_PATH);
 
// 모든 MDX 파일 조회
export const getPostPaths = (category?: string) => {
  const folder = category || '**';
  const paths: string[] = sync(`${POSTS_PATH}/${folder}/**/*.mdx`);
  return paths;
};
 
// 모든 포스트 목록 조회
export const getPostList = async (category?: string): Promise<Post[]> => {
  const paths: string[] = getPostPaths(category);
  const posts = await Promise.all(paths.map((postPath) => parsePost(postPath)));
  return posts;
};

const PostListPage = async ({ category }) => {
  const postList = await getPostList(category);
  const categoryList = await getCategoryDetailList();
 
  return (
    <section>
      <CategoryList list={categoryList} />
      <section>
        <ul>
          {postList.map((post) => (
            <PostCard key={post.url + post.date} post={post} />
          ))}
        </ul>
      </section>
    </section>
  );
};

const PostDetail = async ({ params: { category, slug } }) => {
  const post = await getPostDetail(category, slug);
 
  return (
    <div>
      <PostHeader post={post} />
      <PostBody post={post} />
    </div>
  );
};

npm install next-mdx-remote

import { MDXRemote } from 'next-mdx-remote/rsc';
 
const PostBody = ({ post }) => {
  return (
    <MDXRemote source={post.content}/>
  );
};

import { MDXRemote } from 'next-mdx-remote/rsc';
import { MdxComponents } from '../mdx';
 
import remarkA11yEmoji from '@fec/remark-a11y-emoji';
import rehypePrettyCode from 'rehype-pretty-code';
import rehypeSlug from 'rehype-slug';
import remarkBreaks from 'remark-breaks';
import remarkGfm from 'remark-gfm';
 
const PostBody = ({ post }) => {
  return (
    <MDXRemote 
      source={post.content}
      components={MdxComponents}  
      options={{
        mdxOptions: {
          remarkPlugins: [remarkGfm, remarkA11yEmoji, remarkBreaks],
          rehypePlugins: [
            [
              rehypePrettyCode,
              {theme: {dark: 'github-dark-dimmed', light: 'github-light'}},
            ],
            rehypeSlug,
          ],
        },
      }}
    />
  );
};

import { Callout } from './Callout';
 
const MdxComponents: MDXComponents = {
  a: ExternalLink as any,
  img: Image as any,
  blockquote: Callout,
  Callout,
};