{"id":13516,"date":"2023-03-23T07:59:37","date_gmt":"2023-03-23T04:29:37","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/"},"modified":"2023-03-23T07:59:37","modified_gmt":"2023-03-23T04:29:37","slug":"rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/","title":{"rendered":"\u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0628\u0627 Next\u060c MDX \u0648 Contentlayer"},"content":{"rendered":"<div data-article-id=\"1411628\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%DA%86%D8%B1%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Ghost_%D8%B1%D8%A7_%D9%85%D8%AA%D9%88%D9%82%D9%81_%DA%A9%D8%B1%D8%AF%D9%85\" >\u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Ghost \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%D9%81%D9%86_%D8%A2%D9%88%D8%B1%DB%8C_%D9%87%D8%A7\" >\u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%D8%B4%D8%B1%D9%88%D8%B9_%D8%B4%D8%AF%D9%86\" >\u0634\u0631\u0648\u0639 \u0634\u062f\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_MDX\" >\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Contentlayer\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Contentlayer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%BE%D8%B3%D8%AA\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0633\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%AA%D9%85%D8%A7%D9%85_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8%D9%84%D8%A7%DA%AF\" >\u0646\u0645\u0627\u06cc\u0634 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/rebuilding-my-portfolio-with-next-mdx-and-contentlayer-11jl\/#%DB%8C%DA%A9_%D9%BE%D8%B3%D8%AA_%D9%88%D8%A7%D8%AD%D8%AF_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%DB%8C%D8%AF\" >\u06cc\u06a9 \u067e\u0633\u062a \u0648\u0627\u062d\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Ghost_%D8%B1%D8%A7_%D9%85%D8%AA%D9%88%D9%82%D9%81_%DA%A9%D8%B1%D8%AF%D9%85\"><\/span>\n<p>  \u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Ghost \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0632 \u0627\u06cc\u062f\u0647 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0622\u06cc\u200c\u067e\u062f\u0645\u060c \u0646\u0648\u0634\u06cc\u062f\u0646 \u06cc\u06a9 \u0644\u0627\u062a\u0647 \u06a9\u0627\u0631\u0627\u0645\u0644\u06cc \u062f\u0631 \u06cc\u06a9 \u06a9\u0627\u0641\u0647 \u0628\u0631\u0648\u06a9\u0644\u06cc\u0646\u060c \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u067e\u0633\u062a \u0641\u0646\u0627\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u062e\u0648\u0634\u0645 \u0622\u0645\u062f.  Ghost CMS \u0631\u0627\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0648\u062f (\u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u0646 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f).  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0632 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0647\u06cc\u0631\u0648\u06a9\u0648 \u0627\u0632 \u0645\u0627 \u062c\u062f\u0627 \u0634\u062f \u0648 \u0645\u0646 \u0628\u0647 Digital Ocean \u06a9\u0647 6 \u062f\u0644\u0627\u0631 \u0642\u06cc\u0645\u062a \u062f\u0627\u0631\u062f\u060c \u06af\u0631\u0627\u0646 \u0628\u0648\u062f.  \u0627\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a Ghost \u062e\u0631\u0627\u0628 \u0645\u06cc\u200c\u0634\u062f \u0648 \u0645\u0646 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u062c\u062f\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0647\u0631 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u06a9\u0647 \u062e\u0631\u0627\u0628 \u0634\u062f\u0647 \u0628\u0648\u062f\u060c \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u0634\u06a9\u0627\u0644 \u0637\u0648\u0644\u0627\u0646\u06cc \u0645\u062f\u062a \u0635\u0631\u0641 \u06a9\u0646\u0645.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u062a\u0635\u0627\u062f\u0641\u0627\u062a \u0648 \u067e\u0648\u0644 \u0628\u0627\u0639\u062b \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0645\u0636\u062d\u06a9 \u0646\u0648\u0634\u062a\u0646 \u062f\u0631 \u06cc\u06a9 \u06a9\u0627\u0641\u0647 \u0646\u0645\u06cc \u0634\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0646 \u0647\u0631\u06af\u0632 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0646\u062f\u0627\u062f\u0645.  \u0644\u0627\u062a\u0647 \u06a9\u0627\u0631\u0627\u0645\u0644 \u0646\u06cc\u0632 \u06af\u0631\u0627\u0646 \u0627\u0633\u062a.<\/p>\n<p>\u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u0627\u0632 Obsidian\u060c \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u0646\u0634\u0627\u0646\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u060c \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0648\u0628\u0644\u0627\u06af\u0645 \u06a9\u067e\u06cc \u06a9\u0646\u0645 \u0648 \u0628\u0647 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646 \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%86_%D8%A2%D9%88%D8%B1%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p>Next JS &#8212; \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0641\u0648\u0644 \u0627\u0633\u062a\u06a9 \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u0645\u0646<\/li>\n<li>\n<p>Tailwind CSS &#8212; \u0632\u06cc\u0631\u0627 \u0645\u0646 \u0646\u0645\u06cc \u062f\u0627\u0646\u0645 \u0686\u06af\u0648\u0646\u0647 CSS \u0631\u0627 \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645<\/li>\n<li>\n<p>MDX &#8212; \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React \u062f\u0631 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0645\u0646 (\u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0627\u0632 JSX \u0632\u06cc\u0627\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f\u060c \u0627\u0645\u0627 \u0647\u06cc \u0686\u0631\u0627 \u062d\u062f\u0627\u0642\u0644 \u0622\u0646 \u0631\u0627 \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f)<\/li>\n<li>\n<p>Contentlayer &#8212; \u067e\u0633\u062a \u0647\u0627\u06cc mdx \u0631\u0627 \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc json \u0627\u06cc\u0645\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\n<p>Vercel &#8212; \u0627\u0633\u062a\u0642\u0631\u0627\u0631<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B4%D8%B1%D9%88%D8%B9_%D8%B4%D8%AF%D9%86\"><\/span>\n<p>  \u0634\u0631\u0648\u0639 \u0634\u062f\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0646 \u0627\u06cc\u0646 \u0631\u0648\u0632\u0647\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 T3 CLI \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u0645 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645\u060c \u0632\u06cc\u0631\u0627 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0632 \u067e\u0634\u062a\u0647 \u0622\u0646 \u0644\u0630\u062a \u0645\u06cc\u200c\u0628\u0631\u0645 \u0648 \u0627\u0646\u0633\u062c\u0627\u0645 \u0628\u0627 \u0647\u0645 \u0631\u0627 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm create t3-app@latest\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0641\u0642\u0637 Tailwind \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0627 \u0628\u0647 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u06cc\u0645<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"kd\">type<\/span> <span class=\"nx\">NextPage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Head<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/head<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">Home<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextPage<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Head<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">title<\/span><span class=\"p\">&gt;<\/span>Create T3 App<span class=\"p\">&lt;\/<\/span><span class=\"nt\">title<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">meta<\/span> <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span> <span class=\"na\">content<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Generated by create-t3-app\"<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">link<\/span> <span class=\"na\">rel<\/span><span class=\"p\">=<\/span><span class=\"s\">\"icon\"<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/favicon.ico\"<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Head<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">main<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] pt-20\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-7xl font-bold text-white\"<\/span><span class=\"p\">&gt;<\/span>My Cool Blog<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">main<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Home<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_MDX\"><\/span>\n<p>  \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0645 \u0628\u0646\u0648\u06cc\u0633\u0645 <code>.mdx<\/code> \u0641\u0627\u06cc\u0644 \u0647\u0627\u060c \u0628\u0647 \u0686\u0646\u062f \u067e\u0644\u0627\u06af\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645<\/p>\n<ul>\n<li>@next\/mdx &#8212; \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627 Next<\/li>\n<li>@mdx-js\/loader &#8212; \u0628\u0633\u062a\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 @next\/mdx<\/li>\n<li>@mdx-js\/react &#8212; \u0628\u0633\u062a\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 @next\/mdx<\/li>\n<li>\u0645\u0627\u062f\u0647 \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc &#8212; \u0628\u0631\u0627\u06cc \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u0645\u0627\u062f\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646<\/li>\n<li>rehype-autolink-headings &#8212; \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0633\u0631\u0641\u0635\u0644 \u0647\u0627 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646\u062c\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>rehype-slug &#8212; \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0633\u0646\u0627\u062f\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0634\u0646\u0627\u0633\u0647 \u0646\u062f\u0627\u0631\u0646\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>rehype-pretty-code &#8211; \u06a9\u062f \u0631\u0627 \u0628\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u06a9\u0631\u062f\u0646 \u0646\u062d\u0648\u060c \u0634\u0645\u0627\u0631\u0647 \u062e\u0637\u0648\u0637 \u0648 \u063a\u06cc\u0631\u0647 \u0632\u06cc\u0628\u0627 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>remark-frontmatter &#8212; \u067e\u0644\u0627\u06af\u06cc\u0646 \u0628\u0631\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 frontmatter<\/li>\n<li>shiki &#8212; \u062a\u0645 \u0647\u0627\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>yarn add @next\/mdx @mdx-js\/loader @mdx-js\/react gray-matter rehype-autolink-headings rehype-slug rehype-pretty-code remark-frontmatter shiki\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Contentlayer\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Contentlayer<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Contentlayer \u06af\u0631\u0641\u062a\u0646 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af mdx \u0645\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0627\u06cc\u0645\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0622\u0646 \u0648 \u0627\u0641\u0632\u0648\u0646\u0647 Next js \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0622\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>yarn add contentlayer next-contentlayer\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062e\u0648\u062f \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f <code>next.config.mjs<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ next.config.mjs<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">withContentlayer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-contentlayer<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"cm\">\/** @type {import('next').NextConfig} *\/<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">nextConfig<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Configure pageExtensions to include md and mdx<\/span>\n  <span class=\"na\">pageExtensions<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">ts<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">tsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">jsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">md<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">mdx<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">reactStrictMode<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">swcMinify<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ Merge MDX config with Next.js config<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">withContentlayer<\/span><span class=\"p\">(<\/span><span class=\"nx\">nextConfig<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062e\u0648\u062f \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f <code>tsconfig.json<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"compilerOptions\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"baseUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\".\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"paths\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n      <\/span><span class=\"nl\">\"contentlayer\/generated\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"s2\">\".\/.contentlayer\/generated\"<\/span><span class=\"p\">]<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"include\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"s2\">\"next-env.d.ts\"<\/span><span class=\"p\">,<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"**\/*.tsx\"<\/span><span class=\"p\">,<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"**\/*.ts\"<\/span><span class=\"p\">,<\/span><span class=\"w\"> <\/span><span class=\"s2\">\".contentlayer\/generated\"<\/span><span class=\"p\">]<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>contentlayer.config.ts<\/code> \u0648 \u0645\u0627 \u0633\u0647 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f<\/p>\n<ol>\n<li>\u0637\u0631\u062d \u067e\u0633\u062a \u0645\u0627 \u0648 \u0645\u062d\u0644 \u0632\u0646\u062f\u06af\u06cc \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u067e\u0644\u0627\u06af\u06cc\u0646 \u0647\u0627\u06cc Remark \u0648 Rehype \u0645\u0627 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">defineDocumentType<\/span><span class=\"p\">,<\/span> <span class=\"nx\">makeSource<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">contentlayer\/source-files<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">rehypeAutolinkHeadings<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">rehype-autolink-headings<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">rehypePrettyCode<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">rehype-pretty-code<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">rehypeSlug<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">rehype-slug<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">remarkFrontmatter<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">remark-frontmatter<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">Post<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">defineDocumentType<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Post<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">filePathPattern<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`**\/*.mdx`<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">contentType<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">mdx<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">The title of the post<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">excerpt<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">The excerpt of the post<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">date<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">The date of the post<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">coverImage<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">The cover image of the post<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">ogImage<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">The og cover image of the post<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">computedFields<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">resolve<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">post<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">`\/blog\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">_raw<\/span><span class=\"p\">.<\/span><span class=\"nx\">flattenedPath<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">slug<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">resolve<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">post<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">_raw<\/span><span class=\"p\">.<\/span><span class=\"nx\">flattenedPath<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">}));<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">prettyCodeOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">theme<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">material-theme-palenight<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"nx\">onVisitLine<\/span><span class=\"p\">(<\/span><span class=\"na\">node<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">children<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"nx\">unknown<\/span><span class=\"p\">[]<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">node<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">node<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">text<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">value<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\"> <\/span><span class=\"dl\">'<\/span> <span class=\"p\">}];<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"nx\">onVisitHighlightedLine<\/span><span class=\"p\">(<\/span><span class=\"na\">node<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">properties<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">className<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[]<\/span> <span class=\"p\">}<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">node<\/span><span class=\"p\">.<\/span><span class=\"nx\">properties<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">highlighted<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"nx\">onVisitHighlightedWord<\/span><span class=\"p\">(<\/span><span class=\"na\">node<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">properties<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">className<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[]<\/span> <span class=\"p\">}<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">node<\/span><span class=\"p\">.<\/span><span class=\"nx\">properties<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">highlighted<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">word<\/span><span class=\"dl\">'<\/span><span class=\"p\">];<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">makeSource<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">contentDirPath<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">content<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">documentTypes<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">Post<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">mdx<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">remarkPlugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">remarkFrontmatter<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">rehypePlugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n      <span class=\"nx\">rehypeSlug<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">[<\/span><span class=\"nx\">rehypeAutolinkHeadings<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">behavior<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">wrap<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}],<\/span>\n      <span class=\"p\">[<\/span><span class=\"nx\">rehypePrettyCode<\/span><span class=\"p\">,<\/span> <span class=\"nx\">prettyCodeOptions<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">],<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u0627\u0632 git \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>gitignore<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code># contentlayer\n.contentlayer\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%BE%D8%B3%D8%AA\"><\/span>\n<p>  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>content<\/code><\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>content<\/code> \u062a\u0645\u0627\u0633 \u06af\u0631\u0641\u062a <code>first-post.mdx<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight markdown\"><code><span class=\"nn\">---<\/span>\n<span class=\"na\">title<\/span><span class=\"pi\">:<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">First<\/span><span class=\"nv\"> <\/span><span class=\"s\">Post\"<\/span>\n<span class=\"na\">excerpt<\/span><span class=\"pi\">:<\/span> <span class=\"s\">My first ever post on my blog<\/span>\n<span class=\"na\">date<\/span><span class=\"pi\">:<\/span> <span class=\"s1\">'<\/span><span class=\"s\">2022-02-16'<\/span>\n<span class=\"nn\">---<\/span>\n<span class=\"gh\"># Hello World<\/span>\n\nMy name is Roze and I built this blog to do cool things\n<span class=\"p\">\n-<\/span> Like talking about pets\n<span class=\"p\">-<\/span> And other cool stuff\n\n<span class=\"gu\">## Random Code<\/span>\n\n<span class=\"p\">```<\/span><span class=\"nl\">mdx {1,15} showLineNumbers title=\"Page.mdx\"\n<\/span><span class=\"sb\">import { MyComponent } from '..\/components\/...';\n\n# My MDX page\n\nThis is an unordered list\n\n- Item One\n- Item Two\n- Item Three\n\n&lt;section&gt;And here is _markdown_ in **JSX**&lt;\/section&gt;\n\nCheckout my React component\n\n&lt;MyComponent \/&gt;<\/span>\n<span class=\"p\">```<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u067e\u0633\u062a \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u062f\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0644\u0627\u06cc\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>yarn dev\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0628\u0628\u06cc\u0646\u06cc\u062f <code>.contentlayer<\/code> \u06a9\u0647 \u06cc\u06a9 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a <code>generated<\/code> \u067e\u0648\u0634\u0647 \u0627\u06cc \u06a9\u0647 \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0647\u0627 \u0648 \u0627\u0646\u0648\u0627\u0639 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%AA%D9%85%D8%A7%D9%85_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8%D9%84%D8%A7%DA%AF\"><\/span>\n<p>  \u0646\u0645\u0627\u06cc\u0634 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0645\u06cc\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>getStaticProps<\/code> \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0645\u0627 <code>content<\/code> \u067e\u0648\u0634\u0647 \u0686\u0648\u0646 contentlayer \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f <code>allPosts<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">allPosts<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/..\/.contentlayer\/generated<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"kd\">type<\/span> <span class=\"nx\">GetStaticProps<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">...<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getStaticProps<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GetStaticProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">posts<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">allPosts<\/span><span class=\"p\">.<\/span><span class=\"nx\">sort<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">date<\/span><span class=\"p\">).<\/span><span class=\"nx\">getTime<\/span><span class=\"p\">()<\/span> <span class=\"o\">-<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">date<\/span><span class=\"p\">).<\/span><span class=\"nx\">getTime<\/span><span class=\"p\">()<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">props<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">posts<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0647\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">Props<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">posts<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Post<\/span><span class=\"p\">[];<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Home<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextPage<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Props<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">posts<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      ...\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pt-20\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">posts<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">post<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">index<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"space-y-2 py-2 text-white\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-4xl font-semibold hover:text-yellow-200\"<\/span><span class=\"p\">&gt;<\/span>\n              <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">url<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span> \u2197\ufe0f<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">excerpt<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n      ...\n    <span class=\"p\">&lt;\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D9%BE%D8%B3%D8%AA_%D9%88%D8%A7%D8%AD%D8%AF_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  \u06cc\u06a9 \u067e\u0633\u062a \u0648\u0627\u062d\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0633\u062a \u0647\u0627 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u067e\u0633\u062a \u06a9\u0627\u0645\u0644 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u062f\u0631 <code>pages<\/code> \u062a\u0645\u0627\u0633 \u06af\u0631\u0641\u062a <code>blog<\/code> \u0648 \u0641\u0627\u06cc\u0644 \u062f\u0631\u0633\u062a \u06a9\u0646\u06cc\u062f <code>[slug].tsx<\/code><\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u062f\u06cc\u0645 <code>getStaticPaths<\/code> \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 <code>getStaticProps<\/code> \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0648 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u06cc\u06a9 \u067e\u0633\u062a \u0648\u0627\u062d\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getStaticPaths<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GetStaticPaths<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">paths<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">allPosts<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">post<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">url<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">paths<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fallback<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">IContextParams<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">ParsedUrlQuery<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">slug<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getStaticProps<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GetStaticProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">context<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">slug<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">context<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">IContextParams<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">post<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">allPosts<\/span><span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">post<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">slug<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">slug<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">post<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">notFound<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">props<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">post<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0627 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">Props<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">post<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Post<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">BlogPost<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextPage<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Props<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">post<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">&lt;&gt;&lt;\/&gt;;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">BlogPost<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u062f\u0631 BlogPost\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind Typography \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>yarn add <span class=\"nt\">-D<\/span> @tailwindcss\/typography\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0622\u0646 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>tailwind.config.cjs<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">theme<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ ...<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@tailwindcss\/typography<\/span><span class=\"dl\">'<\/span><span class=\"p\">),<\/span>\n    <span class=\"c1\">\/\/ ...<\/span>\n  <span class=\"p\">],<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u060c \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645\u061f  Contentlayer \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u062e\u0627\u0635 NextJS \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f <code>useMDX<\/code> \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f MDX \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useMDXComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next-contentlayer\/hooks<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">...<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">Component<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useMDXComponent<\/span><span class=\"p\">(<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">code<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">main<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] pt-20\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pb-10 text-7xl text-white\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">article<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"prose\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Component<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">article<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">main<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0645\u0627 <code>useMDX<\/code> \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f mdx \u0648 the \u062e\u0648\u062f \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645 <code>className=\"prose\"<\/code> \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc Tailwind Typography \u0631\u0627 \u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0645\u0627 \u067e\u0633\u062a \u0645\u0627 \u062e\u0634\u0646 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f.<\/p>\n<p><\/p>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 <code>globals.css<\/code><\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.prose<\/span> <span class=\"nd\">:is<\/span><span class=\"o\">(<\/span><span class=\"nt\">h1<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h2<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h3<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h4<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h5<\/span><span class=\"o\">,<\/span> <span class=\"nt\">h6<\/span><span class=\"o\">)<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n  <span class=\"err\">@apply<\/span> <span class=\"err\">no-underline<\/span> <span class=\"err\">text-white;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.prose<\/span> <span class=\"p\">{<\/span>\n  <span class=\"err\">@apply<\/span> <span class=\"err\">text-white;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u0628\u0647 \u067e\u0644\u0627\u06af\u06cc\u0646\u200c\u0647\u0627\u06cc \u06a9\u062f\u0645\u0627\u0646 \u0633\u0628\u06a9 \u062f\u0647\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">code<\/span><span class=\"o\">[<\/span><span class=\"nt\">data-line-numbers<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">padding-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding-right<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">code<\/span><span class=\"o\">[<\/span><span class=\"nt\">data-line-numbers<\/span><span class=\"o\">]<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">.line<\/span><span class=\"nd\">::before<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">counter-increment<\/span><span class=\"p\">:<\/span> <span class=\"n\">line<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"n\">counter<\/span><span class=\"p\">(<\/span><span class=\"n\">line<\/span><span class=\"p\">);<\/span>\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">inline-block<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">right<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#676e95<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">div<\/span><span class=\"o\">[<\/span><span class=\"nt\">data-rehype-pretty-code-title<\/span><span class=\"o\">]<\/span> <span class=\"o\">+<\/span> <span class=\"nt\">pre<\/span> <span class=\"p\">{<\/span>\n  <span class=\"err\">@apply<\/span> <span class=\"err\">!mt-0<\/span> <span class=\"err\">!rounded-tl-none;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">div<\/span><span class=\"o\">[<\/span><span class=\"nt\">data-rehype-pretty-code-title<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n  <span class=\"err\">@apply<\/span> <span class=\"err\">!mt-6<\/span> <span class=\"err\">!max-w-max<\/span> <span class=\"err\">!rounded-t<\/span> <span class=\"err\">!border-b<\/span> <span class=\"err\">!border-b-slate-400<\/span> <span class=\"err\">!bg-[#2b303b]<\/span> <span class=\"err\">!px-4<\/span> <span class=\"err\">!py-0.5<\/span> <span class=\"err\">!text-gray-300<\/span> <span class=\"py\">dark<\/span><span class=\"p\">:<\/span><span class=\"err\">!<\/span><span class=\"n\">bg-<\/span><span class=\"p\">[<\/span><span class=\"m\">#282c34<\/span><span class=\"p\">];<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062e\u06cc\u0644\u06cc \u0628\u0647\u062a\u0631 \ud83d\ude42<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/03\/1679545777_805_\u0628\u0627\u0632\u0633\u0627\u0632\u06cc-\u0646\u0645\u0648\u0646\u0647-\u06a9\u0627\u0631\u0647\u0627-\u0628\u0627-Next\u060c-MDX-\u0648-Contentlayer.png\" alt=\"\u0627\u0648\u0644\u06cc\u0646 \u067e\u0633\u062a \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0633\u0628\u06a9\" loading=\"lazy\" width=\"816\" height=\"878\" title=\"\"><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Ghost \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0645 \u0627\u0632 \u0627\u06cc\u062f\u0647 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0622\u06cc\u200c\u067e\u062f\u0645\u060c \u0646\u0648\u0634\u06cc\u062f\u0646 \u06cc\u06a9 \u0644\u0627\u062a\u0647 \u06a9\u0627\u0631\u0627\u0645\u0644\u06cc \u062f\u0631 \u06cc\u06a9 \u06a9\u0627\u0641\u0647 \u0628\u0631\u0648\u06a9\u0644\u06cc\u0646\u060c \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u067e\u0633\u062a \u0641\u0646\u0627\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u062e\u0648\u0634\u0645 \u0622\u0645\u062f. Ghost CMS \u0631\u0627\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0648\u062f (\u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u0646 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f). \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0632 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0647\u06cc\u0631\u0648\u06a9\u0648 \u0627\u0632 \u0645\u0627 \u062c\u062f\u0627 \u0634\u062f \u0648 \u0645\u0646 \u0628\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":13517,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-13516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/13516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=13516"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/13516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/13517"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=13516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=13516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=13516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}