{"id":68783,"date":"2024-07-10T04:43:29","date_gmt":"2024-07-10T01:13:29","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-create-a-blog-using-nextjs-v14-and-mdx-a-comprehensive-guide-42g5\/"},"modified":"2024-07-10T04:43:29","modified_gmt":"2024-07-10T01:13:29","slug":"how-to-create-a-blog-using-nextjs-v14-and-mdx-a-comprehensive-guide-42g5","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-create-a-blog-using-nextjs-v14-and-mdx-a-comprehensive-guide-42g5\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 NextJS v14 \u0648 MDX: \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062a\u0648\u0633\u0639\u0647 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0628\u0633\u06cc\u0627\u0631 \u0645\u0648\u062b\u0631 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u062f\u0627\u0646\u0634 \u06a9\u0633\u0628 \u0634\u062f\u0647\u060c \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637\u0647 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0628\u0631\u0627\u06cc \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u0628\u0632\u0631\u06af\u062a\u0631 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u062e\u06cc\u0631\u0627\u064b\u060c \u0645\u0646 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0628\u0627 NextJS v14\u060c MDX \u0648 \u062f\u06cc\u06af\u0631 \u0644\u06cc\u0628\u200c\u0647\u0627 \u0627\u062f\u063a\u0627\u0645 \u06a9\u0631\u062f\u0645. \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0627\u062d\u0644\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0648\u0628\u0644\u0627\u06af \u062f\u0627\u0631\u0627\u06cc \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Next \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0645\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f. js \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632.<\/p>\n

\u0686\u0631\u0627 \u0648\u0628\u0644\u0627\u06af \u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0645<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u0627 \u062a\u062c\u0631\u0628\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc\u060c \u0627\u06cc\u0646 \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645 \u062a\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u0627\u0632 \u0628\u0647 \u0641\u0631\u0622\u06cc\u0646\u062f \u06a9\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0645 \u0648 \u062a\u0641\u06a9\u0631 \u0648 \u0627\u0642\u062f\u0627\u0645\u0627\u062a\u0645 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u062a\u0628\u062f\u06cc\u0644 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0628\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0644\u0645\u0648\u0633 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0644\u0627\u06cc\u0644\u0645 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0634\u0631\u062d \u062f\u0647\u0645. \u0645\u0646 \u06a9\u0647 \u062e\u0648\u062f\u0645 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0647\u0633\u062a\u0645\u060c \u0628\u06cc\u0634\u062a\u0631 \u0627\u0648\u0642\u0627\u062a \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc\u06cc \u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc\u200c\u06a9\u0646\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0627\u06cc\u062f\u0647 \u0635\u0631\u0641 \u062f\u0631 \u0630\u0647\u0646 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0648 \u062f\u0631 \u0648\u0627\u0642\u0639\u06cc\u062a \u0645\u0644\u0645\u0648\u0633 \u062f\u0631 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0646\u0633\u0628\u062a\u0627\u064b \u06a9\u0648\u062a\u0627\u0647\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0645\u0633\u062a\u0646\u062f\u0633\u0627\u0632\u06cc \u0627\u06cc\u0646 \u0633\u0641\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0647\u062f\u0641 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

\ud83d\udd75\ufe0f\u200d\u2642\ufe0f \u0634\u0641\u0627\u0641\u06cc\u062a: \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0628\u06cc\u0634\u062a\u0631\u060c \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0642\u062f\u0627\u0645\u0627\u062a\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u0645\u0624\u062b\u0631 \u0628\u0648\u062f\u0646 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc\u0645 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u0645 \u062a\u0634\u0631\u06cc\u062d \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u0632 \u06cc\u06a9 \u0633\u0648\u060c \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0645\u0634\u062a\u0627\u0642\u060c \u0627\u063a\u0644\u0628 \u0627\u0648\u0642\u0627\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u06cc\u0646 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u0647\u0645\u06a9\u0627\u0631 \u0628\u0627 \u062a\u062c\u0631\u0628\u0647\u200c\u062a\u0631 \u06cc\u0627 \u0647\u0645\u200c\u0634\u0627\u06af\u0631\u062f\u06cc\u060c \u062d\u0633\u0628 \u0645\u0648\u0631\u062f\u060c \u062f\u0631 \u062d\u0627\u0644 \u062d\u0644 \u0645\u0634\u06a9\u0644 \u0627\u0633\u062a\u060c \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.
\n\ud83d\udca1 \u0627\u0644\u0647\u0627\u0645 \u0628\u062e\u0634: \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u0627\u0646\u06af\u06cc\u0632\u0647 \u0647\u0627 \u0648 \u062f\u0644\u0627\u06cc\u0644 \u067e\u0634\u062a \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u06cc\u06af\u0631\u0627\u0646 \u0631\u0627 \u062a\u0631\u063a\u06cc\u0628 \u06a9\u0646\u062f \u062a\u0627 \u0627\u06cc\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0646\u062f. \u062f\u0631\u06a9 “\u0686\u0631\u0627” \u067e\u0634\u062a \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0627\u063a\u0644\u0628 \u0633\u0648\u062e\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0639\u0628\u0648\u0631 \u0627\u0632 \u0686\u0627\u0644\u0634 \u0647\u0627 \u0648 \u0645\u062a\u0639\u0647\u062f \u0645\u0627\u0646\u062f\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.
\n\ud83d\udcda \u0645\u0633\u062a\u0646\u062f\u0627\u062a: \u062b\u0628\u062a \u0633\u0627\u0628\u0642\u0647 \u0633\u0641\u0631 \u062a\u0648\u0633\u0639\u0647 \u0627\u0645 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u067e\u06cc\u0634\u0631\u0641\u062a \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0645 \u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u062f\u0631\u0633 \u0647\u0627\u06cc \u0622\u0645\u0648\u062e\u062a\u0647 \u0634\u062f\u0647 \u0641\u06a9\u0631 \u06a9\u0646\u0645. \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0646\u0628\u0639 \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0645\u0631\u0627\u062c\u0639\u0627\u062a \u0622\u06cc\u0646\u062f\u0647 \u0648 \u0628\u0647\u0628\u0648\u062f \u0645\u0633\u062a\u0645\u0631 \u0627\u0633\u062a.
\n\ud83d\udde3\ufe0f \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u062c\u0627\u0645\u0639\u0647: \u0648\u0628\u0644\u0627\u06af \u0627\u0631\u062a\u0628\u0627\u0637 \u062f\u0648 \u0637\u0631\u0641\u0647 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0646\u0638\u0631\u0627\u062a \u062f\u0627\u0633\u062a\u0627\u0646 \u0647\u0627 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u06cc\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u060c \u0647\u0645\u06a9\u0627\u0631\u06cc \u0648 \u0647\u0645\u0631\u0627\u0647\u06cc \u0633\u0627\u06cc\u0631 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u062a\u0639\u0627\u0645\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n

\u0647\u062f\u0641 \u0645\u0646 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u06a9\u0631\u062f\u0646 \u0648 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u062a\u0645\u0627\u0645 \u0645\u0631\u0627\u062d\u0644 \u0634\u06a9\u0644\u200c\u06af\u06cc\u0631\u06cc \u0627\u06cc\u062f\u0647 \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0648\u0627\u0642\u0639\u06cc \u0648 \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06af\u06cc\u0632\u0647 \u062f\u0631 \u0627\u0641\u0631\u0627\u062f \u0628\u0631\u0627\u06cc \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u0627\u06cc\u062f\u0647\u200c\u0647\u0627\u06cc\u0634\u0627\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0631\u0627\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0686\u06cc\u0632\u06cc \u0628\u0647 \u062c\u0645\u0639\u06cc\u062a \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648 \u06a9\u0645\u06a9 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u0627\u0633\u062a.<\/p>\n

\u062e\u0628… \u0686\u0637\u0648\u0631 \u0627\u0646\u062c\u0627\u0645\u0634 \u062f\u0627\u062f\u0645\u061f<\/p>\n

\u0627\u0641\u0632\u0648\u062f\u0646 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627<\/p>\n

Next.js \u0627\u0632 MDX (Markdown \u0628\u0631\u0627\u06cc JSX) \u062e\u0627\u0631\u062c \u0627\u0632 \u062c\u0639\u0628\u0647 \u0628\u0627 \u0628\u0631\u062e\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0636\u0627\u0641\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0622\u0646 \u0627\u0633\u062a:<\/p>\n

\u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0645\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc MDX \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0645:<\/p>\n

npm install @mdx-js\/loader @mdx-js\/react @next\/mdx @tailwindcss\/typography <\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc next.config.js<\/p>\n

\u0628\u0627\u06cc\u062f \u0627\u0641\u0632\u0648\u0646\u0647 withMDX \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Next.js \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n

\/\/ next.config.js
\nconst withMDX = require(“@next\/mdx”)();<\/p>\n

const nextConfig = {
\n \/\/ Rest of the configuration
\n pageExtensions: [“js”, “jsx”, “mdx”, “ts”, “tsx”],
\n};<\/p>\n

module.exports = withMDX(nextConfig);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc tailwindcss.config.ts<\/p>\n

\u0645\u0646 \u0627\u0632 tailwind \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0627\u0641\u0632\u0648\u0646\u0647 \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc tailwind \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645.<\/p>\n

\/\/ tailwindcss.config.ts
\nconst config = {
\n \/\/ Rest of the configuration
\n plugins: [require(“@tailwindcss\/typography”)],
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u062c\u0632\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 MDX \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\u0645\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 mdxComponents \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0646\u062d\u0648\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0647\u0631 \u0639\u0646\u0635\u0631 MDX \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645.<\/p>\n

\/\/ components\/MdxComponents.tsxx
\nimport Link from “next\/link”;
\nimport { MDXComponents } from “mdx\/types”;
\nimport { Ref, RefAttributes } from “react”;
\nimport { Code } from “bright”;
\nexport const mdxComponents: MDXComponents = {
\n pre: (props) => (
\n Code
\n theme={“github-dark”}
\n {…props}
\n style={{
\n margin: 0,
\n }}
\n \/>
\n ),
\n a: ({ children, ref, …props }) => {
\n return (
\n Link href={props.href || “.”} ref={ref as RefHTMLAnchorElement> | undefined} {…props}>
\n {children}
\n Link>
\n );
\n },
\n File: ({ children, path, …props }) => {
\n return (
\n div className=”bg-gray-950 pt-1 rounded-3xl”>
\n div className=”flex items-center ml-4 my-2 italic font-semibold”>{path}div>
\n {children}
\n div>
\n );
\n },
\n};<\/p>\n

export default mdxComponents;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0639\u0631\u06cc\u0641 \u0686\u06af\u0648\u0646\u06af\u06cc pre \u062a\u06af \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f\u060c \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 Code \u062c\u0632\u0621 \u0627\u0632 bright \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u06a9\u062f \u0628\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u0633\u0627\u0632\u06cc \u0646\u062d\u0648. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0639\u0631\u06cc\u0641 \u0686\u06af\u0648\u0646\u06af\u06cc a \u062a\u06af \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f\u060c \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 Link \u062c\u0632\u0621 \u0627\u0632 Next.js \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627. \u0645\u0627 \u0647\u0645 \u062f\u0627\u0631\u06cc\u0645 \u06cc\u06a9 \u0639\u0631\u0641 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 File \u062c\u0632\u0621 \u06a9\u0647 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0628\u0644\u0648\u06a9 \u06a9\u062f \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0645\u0624\u0644\u0641\u0647 File \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u06a9\u062f \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645!<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 MDX \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645!<\/p>\n

\/\/ components\/BlogCard.tsxx
\nimport { MDXRemote } from “next-mdx-remote\/rsc”;
\nimport remarkGfm from “remark-gfm”;
\nimport rehypeSlug from “rehype-slug”;
\nimport rehypeAutolinkHeadings from “rehype-autolink-headings”;
\nimport remarkA11yEmoji from “@fec\/remark-a11y-emoji”;
\nimport remarkToc from “remark-toc”;
\nimport mdxComponents from “.\/MdxComponents”;<\/p>\n

export default function BlogPost({ children }: { children: string }) {
\n return (
\n div className=”prose prose-invert min-w-full”>
\n MDXRemote
\n source={children}
\n options={{
\n mdxOptions: {
\n remarkPlugins: [
\n \/\/ Adds support for GitHub Flavored Markdown
\n remarkGfm,
\n \/\/ Makes emoji accessible ! adding aria-label
\n remarkA11yEmoji,
\n \/\/ generates a table of contents based on headings
\n [remarkToc, { tight: true }],
\n ],
\n \/\/ These work together to add IDs and linkify headings
\n rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
\n },
\n }}
\n components={mdxComponents}
\n \/>
\n div>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f MDXRemote \u062c\u0632\u0621 \u0627\u0632 next-mdx-remote\/rsc \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc MDX. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 MDXRemote \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 GitHub Flavored Markdown\u060c \u0627\u06cc\u0645\u0648\u062c\u06cc \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0648 \u062a\u0648\u0644\u06cc\u062f \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628. \u0627\u06cc\u0646 mdxComponents \u0634\u06cc \u0634\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc MDX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0645\u0646\u0637\u0642\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\u0645\u0627 \u0627\u0646\u0648\u0627\u0639 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0647\u0645\u0647 \u067e\u0633\u062a \u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\/\/ types.d.ts
\nexport type IBlogPost = {
\n date: string;
\n title: string;
\n description: string;
\n slug: string;
\n tags: string[];
\n body: string;
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u062e\u0648\u062f \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f .mdx \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u0633\u06cc\u0631 \/posts \u0627\u0633\u062a \u0648 \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f gray-matter \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0645\u0648\u0636\u0648\u0639 \u062c\u0644\u0648\u06cc\u06cc \u0647\u0631 \u0641\u0627\u06cc\u0644.\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u062a\u0648\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0647\u0645\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

\/\/ lib\/blog.ts
\nimport matter from “gray-matter”;
\nimport path from “path”;
\nimport fs from “fs\/promises”;
\nimport { cache } from “react”;
\nimport { IBlogPost } from “@\/types”;
\nexport const getPosts: () => PromiseIBlogPost[]> = cache(async () => {
\n const posts = await fs.readdir(“.\/posts\/”);<\/p>\n

return Promise.all(
\n posts
\n .filter((file) => path.extname(file) === “.mdx”)
\n .map(async (file) => {
\n const filePath = `.\/posts\/${file}`;
\n const postContent = await fs.readFile(filePath, “utf8”);
\n const { data, content } = matter(postContent);<\/p>\n

\/\/ Not published? No problem, don’t show it.
\n if (data.published === false) {
\n return undefined;
\n }<\/p>\n

return { …data, body: content } as IBlogPost;
\n })
\n .filter((e) => e)
\n ) as PromiseIBlogPost[]>;
\n});<\/p>\n

export async function getPost(slug: string) {
\n const posts = await getPosts();
\n return posts.find((post) => post?.slug === slug);
\n}<\/p>\n

export default getPosts;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 getPosts \u062a\u0627\u0628\u0639 \u0647\u0645\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u067e\u0648\u0634\u0647 \/posts \u0631\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0646\u062f\u060c \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631 MDX \u0631\u0627 \u0641\u06cc\u0644\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u060c \u0645\u0648\u0636\u0648\u0639 \u062c\u0644\u0648\u06cc\u06cc \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. gray-matter. \u0633\u067e\u0633 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u062d\u0627\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u0633\u062a \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u062f\u0646\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0627\u06cc\u0646 getPost \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u067e\u0633\u062a \u062e\u0627\u0635 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0633\u0644\u0627\u06af \u062e\u0648\u062f \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628\u0644\u0627\u06af \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0635\u0641\u062d\u0647 \u0627\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0647\u0645\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u06cc\u0645\u060c\u0645\u0646 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0645 \u06cc\u06a9 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0627\u062a \u0648\u0628\u0644\u0627\u06af \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u0645\u060c \u0627\u06af\u0631 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u06cc\u062f\u060c \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0622\u0646 \u0646\u062f\u0627\u0631\u06cc\u062f.<\/p>\n

\/\/ app\/(blog)\/blog\/page.tsxx
\n\/\/ Here’s where we will display all the blog posts
\nimport BlogCard from “@\/components\/BlogCard”;
\nimport getPosts from “@\/lib\/blog”;<\/p>\n

export default async function PostPage() {
\n const posts = await getPosts();<\/p>\n

return (<\/p>\n

h1 className=”text-5xl”>
\n The span className=”font-bold”>Blogspan>.
\n h1>
\n div className=”flex flex-col space-y-10 mt-4 p-5″>
\n div>
\n ol className=”group\/list”>
\n {posts.map((post, i) => (
\n li
\n className={`mb-12 animate-ease-in animate-delay-500 ${i % 2 == 0 ? “animate-fade-right” : “animate-fade-left”}`}
\n key={i}
\n >
\n {\/* Remember to always define a key when doing a map function.*\/}
\n BlogCard {…post} key={i} \/>
\n li>
\n ))}
\n ol>
\n div>
\n div>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 PostPage \u0645\u0624\u0644\u0641\u0647 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 getPosts \u062a\u0627\u0628\u0639 \u0648 \u0646\u0642\u0634\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0648\u06cc \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 a BlogCard \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u0627\u06cc\u0646 BlogCard \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0639\u0646\u0648\u0627\u0646 \u067e\u0633\u062a\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\u0648 \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0633\u062a \u062e\u0627\u0635 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n

\/\/ app\/(blog)\/[slug]\/page.tsxx
\nimport BlogPost from “@\/components\/BlogPost”;
\nimport getPosts, { getPost } from “@\/lib\/blog”;<\/p>\n

import { notFound } from “next\/navigation”;
\nexport async function generateStaticParams() {
\n const posts = await getPosts();
\n return posts.map((post) => ({ slug: post?.slug }));
\n}
\nexport default async function PostPage({
\n params,
\n}: {
\n params: {
\n slug: string;
\n };
\n}) {
\n const post = await getPost(params.slug);
\n if (!post) return notFound();
\n return BlogPost>{post?.body}BlogPost>;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 PostPage \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0633\u062a \u062e\u0627\u0635 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0633\u0644\u06af \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 URL \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u067e\u0633\u062a \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f\u060c \u0635\u0641\u062d\u0647 404 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 notFound \u062a\u0627\u0628\u0639 \u0627\u0632 next\/navigation. \u0627\u06cc\u0646 BlogPost \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0633\u062a \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 MDXRemote \u062c\u0632\u0621.<\/p>\n

\u06cc\u06a9 \u0646\u0642\u0634\u0647 \u0633\u0627\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u0646\u0642\u0634\u0647 \u0633\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 (SEO) \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u0648 \u0628\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0631\u0627 \u06a9\u0634\u0641 \u0648 \u0641\u0647\u0631\u0633\u062a \u06a9\u0646\u0646\u062f. \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u062f\u0648\u0646 \u0633\u0631\u0648\u0631 \u062f\u0631 Next.js \u06cc\u06a9 \u0646\u0642\u0634\u0647 \u0633\u0627\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n

\/\/ app\/sitemap.ts
\nimport { getPosts } from “@\/lib\/blog”;<\/p>\n

export default async function sitemap() {
\n \/\/ Define the routes that should be included in the sitemap
\n const routes = [“”, “\/blog”].map((route) => ({
\n url: `https:\/\/ginos.codes${route}`,
\n lastModified: new Date().toISOString().split(“T”)[0],
\n }));<\/p>\n

\/\/ Get all posts and create a sitemap route for each one
\n const posts = await getPosts();
\n const blogs = posts.map((post) => ({
\n url: `https:\/\/ginos.codes\/blog\/${post.slug}`,
\n lastModified: new Date(post.date).toISOString().split(“T”)[0],
\n }));<\/p>\n

return […routes, …blogs];
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 sitemap \u062a\u0627\u0628\u0639 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0646\u0642\u0634\u0647 \u0633\u0627\u06cc\u062a \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0648 \u0635\u0641\u062d\u0647 \u0648\u0628\u0644\u0627\u06af \u0627\u0633\u062a. \u0633\u067e\u0633 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0646\u0642\u0634\u0647 \u0633\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 URL \u067e\u0633\u062a \u0648 \u0622\u062e\u0631\u06cc\u0646 \u062a\u0627\u0631\u06cc\u062e \u0627\u0635\u0644\u0627\u062d.<\/p>\n

\u0646\u062a\u06cc\u062c\u0647<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u0631\u0648\u0646\u062f \u06a9\u0627\u0645\u0644 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 NextJS v14 \u0648 MDX \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u06cc\u0645. \u0627\u0632 \u0646\u0635\u0628 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0627\u06cc\u062c\u0627\u062f \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0633\u062a\u200c\u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af\u060c \u0647\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u0632\u06cc\u0628\u0627\u06cc\u06cc\u200c\u0634\u0646\u0627\u062e\u062a\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a. \u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0648\u0628\u0644\u0627\u06af\u06cc \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u0646 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a\u060c \u0628\u0644\u06a9\u0647 \u0633\u0626\u0648 \u067e\u0633\u0646\u062f \u0646\u06cc\u0632 \u0628\u0627\u0634\u062f.<\/p>\n

\n

\u062a\u0648\u0633\u0639\u0647 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0628\u0633\u06cc\u0627\u0631 \u0645\u0648\u062b\u0631 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u062f\u0627\u0646\u0634 \u06a9\u0633\u0628 \u0634\u062f\u0647\u060c \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637\u0647 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0628\u0631\u0627\u06cc \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u0628\u0632\u0631\u06af\u062a\u0631 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u062e\u06cc\u0631\u0627\u064b\u060c \u0645\u0646 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0628\u0627 NextJS v14\u060c MDX \u0648 \u062f\u06cc\u06af\u0631 \u0644\u06cc\u0628\u200c\u0647\u0627 \u0627\u062f\u063a\u0627\u0645 \u06a9\u0631\u062f\u0645. \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0627\u062d\u0644\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0648\u0628\u0644\u0627\u06af \u062f\u0627\u0631\u0627\u06cc \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Next \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0645\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f. js \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n