Project Overview
GitHub : https://github.com/leey00nsu/leey00nsu-next-blog-v2
Demo : https://blog2.leey00nsu.com
This is a technology blog built with Next.js. Articles written in the built-in web editor are automatically translated between Korean and English by AI, and are committed directly to a branch via the GitHub API to automate deployment.
A fully automated blog pipeline from writing to deployment is a key feature.
Key Features
- MDX-based blog (syntax highlighting, image metadata, etc.)
- Studio editor (Tiptap) for authoring frontmatter/body and uploading images
- GitHub API (Octokit) auto-commit for MDX/images
- i18n:
next-intl+ OpenAI-powered translation - AI image generation from selected text (requires
LEESFIELD_API_KEY) - Playwright-based portfolio PDF generation
Problem
- Overhead of multilingual content: Manually maintaining Korean and English versions leads to drift and omissions
- Friction to deployment: A manual write → translate → commit → deploy loop is repetitive and error-prone
- Image performance issues: Missing sizing/placeholder metadata can easily degrade LCP/CLS
- Access control: Editing capabilities need protection to prevent abuse
Solution
- Standardize the authoring flow with a web-based MDX editor
- Synchronize Korean/English content with OpenAI-powered translation
- Automate commits to a branch via GitHub API (Octokit) to streamline deployment
- Pre-generate image metadata (width/height/LQIP) to stabilize rendering and improve performance
- Restrict Studio access via GitHub OAuth (NextAuth) with an allowlist approach
- Automate portfolio PDF output with a Playwright-based pipeline
- Improve maintainability by structuring the codebase with Feature-Sliced Design (FSD)
Impact
- Lower ops cost: Less repetitive work thanks to automated translation and deployment
- Better consistency: Tighter coupling between docs, code, and deployment reduces missed updates
- Improved web performance: More stable image rendering contributes to better LCP/CLS
- Automated deliverables: Portfolio PDFs are generated automatically for easy sharing
Tech Stack
- Frontend: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui
- MDX: next-mdx-remote, remark/rehype
- i18n: next-intl
- Editor: Tiptap
- Auth: NextAuth
- AI/Automation: OpenAI SDK, Octokit (GitHub API)
- Test/Tooling: Vitest, Playwright, Storybook