\n \ucd5c\uadfc \uba87 \ub144\uac04 \ube14\ub85c\uadf8\uc640 \ucf58\ud150\uce20 \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc5d0\uc11c \ub9c8\ud06c\ub2e4\uc6b4(Markdown)\uc758 \uc0ac\uc6a9\uc774 \uae09\uc99d\ud588\uc2b5\ub2c8\ub2e4.
\n \ub9c8\ud06c\ub2e4\uc6b4\uc740 \uac04\ud3b8\ud558\uace0 \uc9c1\uad00\uc801\uc778 \ubb38\ubc95\uc744 \uc81c\uacf5\ud558\uc5ec, \uc0ac\uc6a9\uc790\uac00 \ud14d\uc2a4\ud2b8\ub97c \uc27d\uac8c \ud3ec\ub9f7\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4.
\n \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Next.js\ub97c \uae30\ubc18\uc73c\ub85c \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.
\n \ub610\ud55c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8 \uc791\uc131 \ubc0f \uc5d0\ub514\ud130 \uae30\ub2a5 \ucd94\uac00\uc5d0 \ud544\uc694\ud55c \uae30\uc220 \uc2a4\ud0dd\uacfc \uad6c\uc131 \uc694\uc18c\uc5d0 \ub300\ud574\uc11c\ub3c4 \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n
\n Next.js\ub294 React \uae30\ubc18\uc758 \uc815\uc801 \uc6f9\uc0ac\uc774\ud2b8 \ubc0f \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR) \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4.
\n Next.js\ub294 SEO \uce5c\ud654\uc801\uc774\uba70, \ud398\uc774\uc9c0 \ucd5c\uc801\ud654 \ubc0f \ucf54\ub4dc \uc2a4\ud50c\ub9ac\ud305\uc744 \uc790\ub3d9\uc73c\ub85c \ucc98\ub9ac\ud558\uc5ec \uc131\ub2a5\uc744 \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.
\n \uc774\uc678\uc5d0\ub3c4 API \ub77c\uc6b0\ud305, \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654, \uc815\uc801 \uc0dd\uc131 \ub4f1 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c\uc790\ub4e4\uc774 \uc0dd\uc0b0\uc131\uc744 \ub192\uc77c \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\ub824\uba74 Node.js \ubc0f npm\uc774 \uc124\uce58\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.
\n \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n
npx create-next-app my-blog<\/code><\/pre>\n2. \ub9c8\ud06c\ub2e4\uc6b4 \ubc0f \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130<\/h2>\n
\n \ub9c8\ud06c\ub2e4\uc6b4\uc740 \ud14d\uc2a4\ud2b8 \uae30\ubc18\uc758 \uacbd\ub7c9 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4\ub85c, HTML\uacfc \uc720\uc0ac\ud55c \ud615\uc2dd\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubb38\uc11c\uc758 \uad6c\uc870\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \ub9c8\ud06c\ub2e4\uc6b4\uc744 \ud65c\uc6a9\ud558\uba74 \ube14\ub85c\uadf8 \uae00 \uc791\uc131 \uc2dc \ud3ec\ub9f7\ud305\uc774 \uac04\ud3b8\ud558\uace0 \ube60\ub974\uac8c \uc9c4\ud589\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc774\ubc88 \uc139\uc158\uc5d0\uc11c\ub294 \uac04\ub2e8\ud55c \ub9c8\ud06c\ub2e4\uc6b4 \ubb38\uc11c\ub97c \uc791\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\ub9c8\ud06c\ub2e4\uc6b4 \uc608\uc2dc<\/h3>\n\n# \uc81c\ubaa9 1\n## \uc81c\ubaa9 2\n### \uc81c\ubaa9 3\n\n\uc774\uac83\uc740 \ub450 \ubc88\uc9f8 \ub2e8\ub77d\uc785\ub2c8\ub2e4.\n\n- \ub9ac\uc2a4\ud2b8 \ud56d\ubaa9 1\n- \ub9ac\uc2a4\ud2b8 \ud56d\ubaa9 2\n- \ub9ac\uc2a4\ud2b8 \ud56d\ubaa9 3\n\n[\ub9c1\ud06c \ud14d\uc2a4\ud2b8](http:\/\/example.com)\n\n**\uac15\uc870\ub41c \ud14d\uc2a4\ud2b8**\n <\/code><\/pre>\n3. Next.js\uc5d0 \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130 \ucd94\uac00\ud558\uae30<\/h2>\n
\n Next.js \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130\ub97c \ucd94\uac00\ud558\uae30 \uc704\ud574 \uc5ec\ub7ec \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\uace0 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.
\n \ub2e4\uc74c\uc740 \uc6b0\ub9ac\uac00 \uc0ac\uc6a9\ud560 \uc8fc\uc694 \ud328\ud0a4\uc9c0 \ubaa9\ub85d\uc785\ub2c8\ub2e4.\n <\/p>\n
\n- react-markdown:<\/strong> \ub9c8\ud06c\ub2e4\uc6b4\uc744 React \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/li>\n
- react-quill:<\/strong> WYSIWYG \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n
- remark-gfm:<\/strong> GitHub \uc2a4\ud0c0\uc77c \ub9c8\ud06c\ub2e4\uc6b4\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
\ud328\ud0a4\uc9c0 \uc124\uce58<\/h3>\n
\n \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n <\/p>\n
npm install react-markdown react-quill remark-gfm<\/code><\/pre>\n\uc5d0\ub514\ud130 \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
\n React \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9c8\ud06c\ub2e4\uc6b4 \uc5d0\ub514\ud130\ub97c \ub9cc\ub4e4\uace0, \uc774\ub97c Next.js\uc5d0 \ud1b5\ud569\ud569\ub2c8\ub2e4.
\n components\/MarkdownEditor.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n <\/p>\n\nimport React, { useState } from 'react';\nimport ReactQuill from 'react-quill';\nimport 'react-quill\/dist\/quill.snow.css'; \/\/ \uc2a4\ud0c0\uc77c \ucd94\uac00\n\nconst MarkdownEditor = () => {\n const [text, setText] = useState('');\n\n return (\n \n <\/reactquill>\n \n \ubbf8\ub9ac\ubcf4\uae30<\/h2>\n <\/reactmarkdown>\n <\/div>\n <\/div>\n );\n};\n\nexport default MarkdownEditor;\n <\/code><\/pre>\n\ud398\uc774\uc9c0\uc5d0\uc11c \uc5d0\ub514\ud130 \uc0ac\uc6a9\ud558\uae30<\/h3>\n
\n \uc774\uc81c \uc791\uc131\ud55c \uc5d0\ub514\ud130 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.
\n pages\/index.js<\/code> \ud30c\uc77c\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n <\/p>\n\nimport MarkdownEditor from '..\/components\/MarkdownEditor';\n\nexport default function Home() {\n return (\n \n \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8 \uc791\uc131<\/h1>\n <\/markdowneditor>\n <\/div>\n );\n}\n <\/code><\/pre>\n4. \ub9c8\ud06c\ub2e4\uc6b4 \ud30c\uc77c \uc800\uc7a5 \ubc0f \ubd88\ub7ec\uc624\uae30<\/h2>\n
\n \uc791\uc131\ud55c \ub0b4\uc6a9\uc740 \uc5b4\ub518\uac00\uc5d0 \uc800\uc7a5\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc774\ubc88 \uc139\uc158\uc5d0\uc11c\ub294 \ub9c8\ud06c\ub2e4\uc6b4 \ud30c\uc77c\uc744 \uc800\uc7a5\ud558\uace0 \ubd88\ub7ec\uc624\ub294 \ub85c\uc9c1\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.
\n \ud30c\uc77c \uc2dc\uc2a4\ud15c \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\ud30c\uc77c \uc2dc\uc2a4\ud15c \uc0ac\uc6a9\ud558\uae30<\/h3>\n\nimport fs from 'fs';\nimport path from 'path';\n\nconst filePath = path.join(process.cwd(), 'posts', 'my-post.md');\n\nconst savePost = (content) => {\n fs.writeFileSync(filePath, content);\n};\n\nconst loadPost = () => {\n return fs.readFileSync(filePath, 'utf8');\n};\n <\/code><\/pre>\n\uc694\uccad \ud578\ub4e4\ub7ec \uad6c\ucd95\ud558\uae30<\/h3>\n
\n Next.js\uc758 API \ub77c\uc6b0\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \ub370\uc774\ud130 \uc694\uccad\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n pages\/api\/posts.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 POST, GET \uc694\uccad\uc744 \ucc98\ub9ac\ud558\ub294 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n <\/p>\n\nexport default function handler(req, res) {\n if (req.method === 'POST') {\n savePost(req.body.content);\n res.status(200).json({ message: '\ud3ec\uc2a4\ud2b8 \uc800\uc7a5 \uc644\ub8cc' });\n } else {\n const content = loadPost();\n res.status(200).json({ content });\n }\n}\n <\/code><\/pre>\n5. \uc804\uccb4 \uad6c\ud604 \uc608\uc2dc<\/h2>\n
\n \uc704\uc758 \ubaa8\ub4e0 \ucf54\ub4dc\ub97c \ubaa8\uc544 \uc644\uc131\ub41c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8 \uc791\uc131\uae30 \uc5d0\ub514\ud130\ub97c \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ucd5c\uc885 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.\n <\/p>\n
\n\/\/ components\/MarkdownEditor.js\nimport React, { useState, useEffect } from 'react';\nimport ReactQuill from 'react-quill';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport 'react-quill\/dist\/quill.snow.css';\n\nconst MarkdownEditor = () => {\n const [text, setText] = useState('');\n\n useEffect(() => {\n const loadPost = async () => {\n const response = await fetch('\/api\/posts');\n const data = await response.json();\n setText(data.content);\n };\n\n loadPost();\n }, []);\n\n const savePost = async () => {\n await fetch('\/api\/posts', {\n method: 'POST',\n body: JSON.stringify({ content: text }),\n headers: {\n 'Content-Type': 'application\/json',\n },\n });\n };\n\n return (\n \n <\/reactquill>\n