{"id":99706,"date":"2025-03-02T06:52:15","date_gmt":"2025-03-02T03:22:15","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/"},"modified":"2025-03-02T06:52:15","modified_gmt":"2025-03-02T03:22:15","slug":"building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/","title":{"rendered":"\u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0645\u062f\u0631\u0646 \u0628\u0627 Next.JS \u060c MDX \u0648 Tailwind CSS"},"content":{"rendered":"<div data-article-id=\"2305458\" id=\"article-body\">\n<p>\u0686\u0631\u0627 \u0648\u0642\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0628\u0644\u0627\u06af \u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0635\u0627\u0641 \u0648 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0627\u0633\u062a\u0631\u0633 \u0646\u0633\u0628\u062a \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u061f <code>Next.js<\/code>\u0628\u0627 <code>MDX<\/code>\u0648\u062a <code>Tailwind CSS<\/code> \u06cc\u06a9 \u062a\u06cc\u0645 \u0631\u0648\u06cc\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0647\u0645 \u062f\u0631 \u0647\u0645\u0627\u0646 \u0632\u0645\u0627\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0647\u0645 \u0634\u06cc\u06a9 \u0627\u0633\u062a. Next.JS \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u060c MDX \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u067e\u0633\u062a \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u060c \u0648 Tailwind CSS \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f. <\/p>\n<p>\u0628\u0627 \u0647\u0645 \u060c \u0622\u0646\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f \u0636\u0645\u0646 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0633\u0631\u06cc\u0639 \u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0628\u0635\u0631\u06cc \u0648\u0628\u0644\u0627\u06af \u060c \u0631\u0648\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u062d\u062a\u0648\u0627 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0644\u0627\u0648\u0647 \u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <strong>\u0686\u0627\u067e \u0646\u06af\u0627\u0631\u06cc<\/strong> \u0648\u062a <strong>\u0633\u0628\u06a9\/\u062a\u0627\u0631\u06cc\u06a9<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0641\u0642\u0637 \u062e\u0648\u0628 \u0646\u06cc\u0633\u062a\u0646\u062f-\u0622\u0646\u0647\u0627 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u062c\u0630\u0627\u0628 \u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u06cc\u0627 \u0642\u0635\u062f \u0631\u0634\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f \u060c \u0627\u06cc\u0646 \u067e\u0634\u062a\u0647 \u0634\u0645\u0627 \u0631\u0627 \u067e\u0648\u0634\u0627\u0646\u062f\u0647 \u0627\u0633\u062a. \u0622\u0645\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0647\u0633\u062a\u06cc\u062f\u061f \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0639\u0627\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<hr\/>\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\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#1_%DA%86%D8%B1%D8%A7_%D8%A7%DB%8C%D9%86_%D9%BE%D8%B4%D8%AA%D9%87_%D9%81%D9%86%D8%A7%D9%88%D8%B1%DB%8C%D8%9F\" >1. \u0686\u0631\u0627 \u0627\u06cc\u0646 \u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc\u061f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%AC%D8%AF%DB%8C%D8%AF_nextjs_%D8%B3%D8%AA%D9%88%D9%86_%D9%81%D9%82%D8%B1%D8%A7%D8%AA_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%B4%D9%85%D8%A7\" >\u062c\u062f\u06cc\u062f next.js: \u0633\u062a\u0648\u0646 \u0641\u0642\u0631\u0627\u062a \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%AC%D8%AF%DB%8C%D8%AF_MDX_%D8%AC%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D8%AD%D8%AA%D9%88%D8%A7_%D8%A8%D8%A7_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%B1%D9%88%D8%A8%D8%B1%D9%88_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF\" >\u062c\u062f\u06cc\u062f MDX: \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0628\u0627 \u062a\u0639\u0627\u0645\u0644 \u0631\u0648\u0628\u0631\u0648 \u0645\u06cc \u0634\u0648\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%AC%D8%AF%DB%8C%D8%AF_Tailwind_CSS_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A8%D8%AF%D9%88%D9%86_%D9%85%D8%AD%D8%AF%D9%88%D8%AF%DB%8C%D8%AA\" >\u062c\u062f\u06cc\u062f Tailwind CSS: \u0637\u0631\u0627\u062d\u06cc \u0628\u062f\u0648\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%AC%D8%AF%DB%8C%D8%AF_%D8%B1%D9%88%DB%8C_%D9%85%D8%AD%D8%AA%D9%88%D8%A7_%D8%AA%D9%85%D8%B1%DA%A9%D8%B2_%DA%A9%D9%86%DB%8C%D8%AF_%D8%8C_%D9%86%D9%87_%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%DA%AF%DB%8C\" >\u062c\u062f\u06cc\u062f \u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f \u060c \u0646\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc<\/a><\/li><\/ul><\/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\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#2_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%D8%AD%DB%8C%D8%B7_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%AE%D9%88%D8%AF\" >2 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_nodejs_%D9%88_%DB%8C%DA%A9_%D9%85%D8%AF%DB%8C%D8%B1_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: node.js \u0648 \u06cc\u06a9 \u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%A8%D8%B9%D8%AF%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_MDX_%D9%88_Tailwind_CSS_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc MDX \u0648 Tailwind CSS \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%AA%D8%A3%DB%8C%DB%8C%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 4: \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u062f \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#4_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_MDX_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7\" >4. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX \u0628\u0631\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_nextconfigjs_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%BE%D8%B4%D8%AA%DB%8C%D8%A8%D8%A7%D9%86%DB%8C_MDX\" >\u0645\u0631\u062d\u0644\u0647 1: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc next.config.js \u0628\u0631\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc MDX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DB%8C%DA%A9_%D9%BE%D8%B3%D8%AA_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%B1%D8%A7_%D8%A8%D8%A7_%D9%81%D8%B1%D9%85%D8%AA_MDX_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u06cc\u06a9 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a MDX \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_React_%D8%B1%D8%A7_%D8%AF%D8%B1_Markdown_%D8%AC%D8%A7%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u0627\u062c\u0632\u0627\u06cc React \u0631\u0627 \u062f\u0631 Markdown \u062c\u0627\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%DA%86%D8%B1%D8%A7_%D8%AA%D8%B9%D8%A8%DB%8C%D9%87_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_React_%D9%85%D9%87%D9%85_%D8%A7%D8%B3%D8%AA\" >\u0686\u0631\u0627 \u062a\u0639\u0628\u06cc\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u0645\u0647\u0645 \u0627\u0633\u062a<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#5_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A8%D8%A7_Tailwind_CSS\" >5. \u0637\u0631\u0627\u062d\u06cc \u0628\u0627 Tailwind CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_tailwindconfigjs\" >\u0645\u0631\u062d\u0644\u0647 1: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc tailwind.config.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%AE%D9%88%D8%A7%D9%86%D8%A7%DB%8C%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C_%D8%AA%D9%85%DB%8C%D8%B2_%D8%AA%D9%82%D9%88%DB%8C%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u062a\u0645\u06cc\u0632 \u062a\u0642\u0648\u06cc\u062a \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9_%D8%B1%D8%A7_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A7%D8%B2_%D9%86%D8%B3%D8%A8%D8%AA_%D9%87%D8%A7%DB%8C_%DA%A9%D9%86%D8%AA%D8%B1%D8%A7%D8%B3%D8%AA_%D8%AF%D8%B1_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3_%D8%A7%D8%B7%D9%85%DB%8C%D9%86%D8%A7%D9%86_%D8%AD%D8%A7%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 4: \u0627\u0632 \u0646\u0633\u0628\u062a \u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0627\u0633\u062a \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%DA%86%D8%B1%D8%A7_Tailwind_CSS_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B1%D8%A7_%D8%A8%DB%8C_%D8%AF%D8%B1%D8%AF%D8%B3%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\" >\u0686\u0631\u0627 Tailwind CSS \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0628\u06cc \u062f\u0631\u062f\u0633\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#6_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%AE%D9%88%D8%AF\" >6 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B3%D8%A7%D8%B2%D9%85%D8%A7%D9%86%D8%AF%D9%87%DB%8C_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8%D9%84%D8%A7%DA%AF\" >\u0645\u0631\u062d\u0644\u0647 1: \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D9%88_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D9%BE%D9%88%DB%8C%D8%A7\" >\u0645\u0631\u062d\u0644\u0647 2: \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0633\u062a \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%84%DB%8C%D8%B3%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7_%D8%AF%D8%B1_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D8%B5%D9%84%DB%8C\" >\u0644\u06cc\u0633\u062a \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_%D8%A7%D9%86%D9%81%D8%B1%D8%A7%D8%AF%DB%8C_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D9%BE%D9%88%DB%8C%D8%A7\" >\u0627\u0631\u0627\u0626\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%DA%86%D8%B1%D8%A7_%D9%85%D8%B3%DB%8C%D8%B1%DB%8C%D8%A7%D8%A8%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%A7%D9%87%D9%85%DB%8C%D8%AA_%D8%AF%D8%A7%D8%B1%D8%AF\" >\u0686\u0631\u0627 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0647\u0645\u06cc\u062a \u062f\u0627\u0631\u062f<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#7_%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4_%D8%AA%D8%AC%D8%B1%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\" >7. \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%A8%D8%B1%D8%AC%D8%B3%D8%AA%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D9%86%D8%AD%D9%88_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D9%84%D9%88%DA%A9_%D9%87%D8%A7%DB%8C_%DA%A9%D8%AF\" >\u0628\u0631\u062c\u0633\u062a\u0647 \u0633\u0627\u0632\u06cc \u0646\u062d\u0648 \u0628\u0631\u0627\u06cc \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u06a9\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%A6%D9%88_%D8%A8%D8%A7_%D8%A8%D8%B1%DA%86%D8%B3%D8%A8_%D9%87%D8%A7%DB%8C_%D8%A7%D8%A8%D8%B1%D8%AF%D8%A7%D8%AF%D9%87\" >\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0633\u0626\u0648 \u0628\u0627 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0627\u0628\u0631\u062f\u0627\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9_%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%DB%8C_%D9%88_%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D8%AA%D8%AD%D9%84%DB%8C%D9%84%DB%8C\" >\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0648 \u0627\u062f\u063a\u0627\u0645 \u062a\u062d\u0644\u06cc\u0644\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86_%D8%B1%D9%88%D8%B4%D9%87%D8%A7\" >\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u0647\u0627<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#8_%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%AE%D9%88%D8%AF\" >8. \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D9%85%D8%AD%D9%84%DB%8C_%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DA%A9%D8%AF_%D8%B1%D8%A7_%D8%A8%D9%87_%DB%8C%DA%A9_%D9%85%D8%AE%D8%B2%D9%86_GIT_%D9%81%D8%B4%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u06a9\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u062e\u0632\u0646 GIT \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%85%D8%AE%D8%B2%D9%86_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%A8%D8%B3%D8%AA%D8%B1_%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1_%D9%88%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u0645\u062e\u0632\u0646 \u0631\u0627 \u0628\u0647 \u0628\u0633\u062a\u0631 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1_%D9%85%D8%AF%D8%A7%D9%88%D9%85_%D9%88_%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1\" >\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u062f\u0627\u0648\u0645 \u0648 \u0633\u0627\u062e\u062a \u062e\u0648\u062f\u06a9\u0627\u0631<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#9_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C\" >9. \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#10_%D9%86%DA%A9%D8%A7%D8%AA_%D9%BE%D8%A7%D8%AF%D8%A7%D8%B4_%D8%A8%D8%AE%D8%B4_%D8%A7%D8%AE%D8%AA%DB%8C%D8%A7%D8%B1%DB%8C\" >10. \u0646\u06a9\u0627\u062a \u067e\u0627\u062f\u0627\u0634 (\u0628\u062e\u0634 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D9%BE%D8%B4%D8%AA%DB%8C%D8%A8%D8%A7%D9%86_%DA%AF%DB%8C%D8%B1%DB%8C_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1\" >\u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u06af\u06cc\u0631\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%DA%A9%D8%A7%D9%88%D8%B4_%D8%AF%D8%B1_%D8%AA%D9%86%D8%B8%DB%8C%D9%85%D8%A7%D8%AA_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_Tailwind\" >\u06a9\u0627\u0648\u0634 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 Tailwind<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/nabfollower.com\/blog\/building-a-modern-blog-with-nextjs-mdx-and-tailwind-css-a24\/#%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%DA%AF%D8%B2%DB%8C%D9%86%D9%87_%D9%87%D8%A7%DB%8C_CMS_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D8%B4%D8%A7%D8%B1%DA%A9%D8%AA_%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%BA%DB%8C%D8%B1_%D9%81%D9%86%DB%8C\" >\u0627\u062f\u063a\u0627\u0645 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc CMS \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u063a\u06cc\u0631 \u0641\u0646\u06cc<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_%DA%86%D8%B1%D8%A7_%D8%A7%DB%8C%D9%86_%D9%BE%D8%B4%D8%AA%D9%87_%D9%81%D9%86%D8%A7%D9%88%D8%B1%DB%8C%D8%9F\"><\/span>\n<p>  <strong>1. \u0686\u0631\u0627 \u0627\u06cc\u0646 \u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc\u061f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0639\u0627\u0644\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a. \u062f\u0633\u062a\u0647 \u06a9\u0648\u0686\u06a9 \u0645\u0648\u0633\u06cc\u0642\u06cc \u062c\u0627\u0632 <strong>\u0628\u0639\u062f. js<\/strong>\u0628\u0627 <strong>MDX<\/strong>\u0648\u062a <strong>Tailwind CSS<\/strong> \u062a\u0646\u0638\u06cc\u0645 \u0635\u0627\u0641 \u0648 \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%AF%DB%8C%D8%AF_nextjs_%D8%B3%D8%AA%D9%88%D9%86_%D9%81%D9%82%D8%B1%D8%A7%D8%AA_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  \u062c\u062f\u06cc\u062f <strong>next.js: \u0633\u062a\u0648\u0646 \u0641\u0642\u0631\u0627\u062a \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>\u0628\u0639\u062f. js<\/strong> \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0631\u0627 \u0628\u0627 <strong>\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR)<\/strong> \u0648\u062a <strong>\u062a\u0648\u0644\u06cc\u062f \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 (SSG)<\/strong>\u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0632\u0645\u0627\u0646 \u0628\u0627\u0631 \u0633\u0631\u06cc\u0639 \u0648 \u0633\u0626\u0648 \u0628\u0647\u062a\u0631. \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0622\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0627\u0632\u0645\u0627\u0646 \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0646\u0633\u06cc\u0645 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f \u060c \u0646\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%AF%DB%8C%D8%AF_MDX_%D8%AC%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D8%AD%D8%AA%D9%88%D8%A7_%D8%A8%D8%A7_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%B1%D9%88%D8%A8%D8%B1%D9%88_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF\"><\/span>\n<p>  \u062c\u062f\u06cc\u062f <strong>MDX: \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0628\u0627 \u062a\u0639\u0627\u0645\u0644 \u0631\u0648\u0628\u0631\u0648 \u0645\u06cc \u0634\u0648\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>MDX<\/strong> \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u067e\u0633\u062a \u0647\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u060c \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u060c \u062f\u06a9\u0645\u0647 \u0647\u0627 \u06cc\u0627 \u0639\u0646\u0627\u0635\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u062f\u0648\u0646 \u0632\u062d\u0645\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0647\u0645 \u0622\u0645\u0648\u0632\u0646\u062f\u0647 \u0648 \u0647\u0645 \u062c\u0630\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%AF%DB%8C%D8%AF_Tailwind_CSS_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A8%D8%AF%D9%88%D9%86_%D9%85%D8%AD%D8%AF%D9%88%D8%AF%DB%8C%D8%AA\"><\/span>\n<p>  \u062c\u062f\u06cc\u062f <strong>Tailwind CSS: \u0637\u0631\u0627\u062d\u06cc \u0628\u062f\u0648\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Tailwind CSS<\/strong> \u0627\u0632 \u06cc\u06a9 \u0631\u0648\u0634 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0648\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0637\u0631\u062d \u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u0648 \u0632\u06cc\u0628\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f. \u0639\u0646\u0627\u0635\u0631 \u0633\u0628\u06a9 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0634\u0645\u0627 &#8211; \u062e\u0648\u0627\u0647 \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u062a\u0645\u06cc\u0632 \u06cc\u0627 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0628\u0627\u0634\u062f. \u0645\u0636\u0645\u0648\u0646 \u0622\u0646 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u062b\u0627\u0628\u062a \u0648 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062e\u0648\u062f \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%AF%DB%8C%D8%AF_%D8%B1%D9%88%DB%8C_%D9%85%D8%AD%D8%AA%D9%88%D8%A7_%D8%AA%D9%85%D8%B1%DA%A9%D8%B2_%DA%A9%D9%86%DB%8C%D8%AF_%D8%8C_%D9%86%D9%87_%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%DA%AF%DB%8C\"><\/span>\n<p>  \u062c\u062f\u06cc\u062f <strong>\u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f \u060c \u0646\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u067e\u0634\u062a\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f. Next.JS \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f \u060c MDX \u067e\u0633\u062a \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0648 Tailwind \u06cc\u06a9 \u0637\u0631\u0627\u062d\u06cc \u062c\u0644\u0627 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0647\u0645 \u060c \u0622\u0646\u0647\u0627 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0633\u0631\u06cc\u0639 \u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0636\u062f \u0622\u06cc\u0646\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"2_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%D8%AD%DB%8C%D8%B7_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%AE%D9%88%D8%AF\"><\/span>\n<p>  <strong>2 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u063a\u0648\u0627\u0635\u06cc \u0628\u0647 \u0642\u0633\u0645\u062a \u0645\u0647\u06cc\u062c \u0633\u0627\u062e\u062a \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f &#8211; \u0631\u0627\u062d\u062a \u062a\u0631 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_nodejs_%D9%88_%DB%8C%DA%A9_%D9%85%D8%AF%DB%8C%D8%B1_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 1: node.js \u0648 \u06cc\u06a9 \u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u060c \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f <strong>node.js<\/strong>\u060c \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0645\u06cc \u0634\u0648\u062f <code>npm<\/code> (\u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u06af\u0631\u0647) \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636. \u0627\u0632 \u0637\u0631\u0641 \u062f\u06cc\u06af\u0631 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <strong>\u062c\u0646\u062c\u0627\u0644<\/strong> \u06cc\u0627 <strong>PNPM<\/strong> \u0627\u06af\u0631 \u06cc\u06a9 \u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u0633\u0631\u06cc\u0639\u062a\u0631 \u06cc\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u06cc\u062f.<\/p>\n<ul>\n<li>\n<strong>node.js \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong>: \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc Node.js \u0628\u0631\u0648\u06cc\u062f \u0648 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u062d\u06cc\u0646 \u0646\u0635\u0628 \u060c \u0622\u0646 \u0631\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f <code>npm<\/code> \u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc<\/strong>: \u0627\u06af\u0631 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u06cc\u062f \u0627\u0632 \u0646\u062e \u06cc\u0627 PNPM \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u060c \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> yarn   <span class=\"c\"># For Yarn<\/span>\nnpm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> pnpm   <span class=\"c\"># For pnpm<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628 \u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>node <span class=\"nt\">-v<\/span> <span class=\"o\">&amp;&amp;<\/span> npm <span class=\"nt\">-v<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0646\u0633\u062e\u0647 \u0647\u0627\u06cc Node.js \u0648 NPM (\u06cc\u0627 \u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0634\u0645\u0627) \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%A8%D8%B9%D8%AF%DB%8C_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 2: \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0648\u062c\u0648\u062f Node.js \u062f\u0631 \u0645\u062d\u0644 \u060c \u0648\u0642\u062a \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f Next.js \u0631\u0627 \u062f\u0627\u0631\u0628\u0633\u062a. \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx create-next-app@latest my-blog\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u062a\u0639\u0648\u06cc\u0636 \u06a9\u0631\u062f\u0646 <code>my-blog<\/code> \u0628\u0627 \u0646\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u0628\u0627 \u0686\u0646\u062f \u0633\u0624\u0627\u0644 \u062f\u0631 \u0645\u0648\u0631\u062f TypeScript \u060c Eslint \u0648 \u0633\u0627\u06cc\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0632 \u0634\u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u060c \u0627\u062d\u0633\u0627\u0633 \u0631\u0627\u062d\u062a\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0647\u0627 \u0631\u0627 \u0628\u067e\u0630\u06cc\u0631\u06cc\u062f \u06cc\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0631\u062c\u06cc\u062d\u0627\u062a \u062e\u0648\u062f \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645 \u060c \u0628\u0647 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>my-blog\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062c\u062f\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc: \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm run 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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0628\u0627\u0632\u062f\u06cc\u062f <code>http:\/\/localhost:3000<\/code> \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u060c \u0648 \u0628\u0627\u06cc\u062f \u0635\u0641\u062d\u0647 Welcome \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 Next.js \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u0648\u0641\u0642\u06cc\u062a!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_MDX_%D9%88_Tailwind_CSS_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 3: \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc MDX \u0648 Tailwind CSS \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <strong>MDX<\/strong> \u0648\u062a <strong>Tailwind CSS<\/strong>\u0628\u0634\u0631<\/p>\n<ol>\n<li>\n<strong>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc MDX \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong>\n<\/li>\n<\/ol>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 MDX \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u060c \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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @next\/mdx @mdx-js\/loader\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627 \u0628\u0647 Next.js \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u062a\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0634\u0648\u0646\u062f <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647<\/p>\n<ol>\n<li><strong>CSS Tailwind \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong><\/li>\n<\/ol>\n<p>Tailwind CSS \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0645\u06cc \u0628\u06cc\u0634\u062a\u0631 \u062f\u0627\u0631\u062f \u060c \u0627\u0645\u0627 \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f &#8211; \u0627\u06cc\u0646 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Tailwind \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u0622\u0646 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>tailwindcss postcss autoprefixer\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0628\u0639\u062f \u060c \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Tailwind \u0631\u0627 \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx tailwindcss init\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u062f\u0648 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f: <code>tailwind.config.js<\/code> \u0648\u062a <code>postcss.config.js<\/code>\u0628\u0634\u0631 \u0628\u0639\u062f\u0627\u064b \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%AA%D8%A3%DB%8C%DB%8C%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 4: \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u062f \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0633\u0631\u06cc\u0639\u0627\u064b \u0627\u0632 \u0622\u0646\u0686\u0647 \u062a\u0627\u06a9\u0646\u0648\u0646 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>node.js \u0646\u0635\u0628 \u0634\u062f\u0647 \u0648 \u06cc\u06a9 \u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647.<\/li>\n<li>\u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f Next.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/li>\n<li>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0632 MDX \u0648 Tailwind CSS.<\/li>\n<\/ul>\n<p>\u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc \u0628\u0631\u0648\u06cc\u062f \u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 MDX \u0648 Tailwind CSS \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0647\u0645\u0627\u0647\u0646\u06af \u0628\u0627 \u0647\u0645 \u0647\u0645\u06a9\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0622\u0646 \u060c \u0644\u062d\u0638\u0647 \u0627\u06cc \u0631\u0627 \u0645\u0631\u062a\u06a9\u0628 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0648\u0644\u06cc\u0647 \u062e\u0648\u062f \u0628\u0647 GIT (\u0627\u06af\u0631 \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0646\u0633\u062e\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f):<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>git init\ngit add <span class=\"nb\">.<\/span>\ngit commit <span class=\"nt\">-m<\/span> <span class=\"s2\">\"Initial setup with Next.js, MDX, and Tailwind CSS\"<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0628\u0627 \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u060c \u0634\u0645\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0645\u062f\u0631\u0646 \u0648 \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0633\u062a\u06cc\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645!<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"4_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_MDX_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7\"><\/span>\n<p>  <strong>4. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX \u0628\u0631\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u062a\u0627 \u062a\u0645\u0627\u0645 \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u062f. MDX \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0633\u0627\u062f\u06af\u06cc Markdown \u0631\u0627 \u0628\u0627 \u0642\u062f\u0631\u062a \u0627\u062c\u0632\u0627\u06cc React \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_nextconfigjs_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%BE%D8%B4%D8%AA%DB%8C%D8%A8%D8%A7%D9%86%DB%8C_MDX\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 1: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc <code>next.config.js<\/code> \u0628\u0631\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc MDX<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0639\u062f\u06cc \u062e\u0648\u062f. js \u060c \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>next.config.js<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f \u062a\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">withMDX<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@next\/mdx<\/span><span class=\"dl\">'<\/span><span class=\"p\">)({<\/span>\n  <span class=\"na\">extension<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.<\/span><span class=\"sr\">mdx<\/span><span class=\"se\">?<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">withMDX<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">pageExtensions<\/span><span class=\"p\">:<\/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\">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\">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=\"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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0628\u0647 Next.js \u0645\u06cc \u06af\u0648\u06cc\u062f <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0635\u0641\u062d\u0627\u062a \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0645\u0639\u062a\u0628\u0631. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u060c \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc MDX \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DB%8C%DA%A9_%D9%BE%D8%B3%D8%AA_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%B1%D8%A7_%D8%A8%D8%A7_%D9%81%D8%B1%D9%85%D8%AA_MDX_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 2: \u06cc\u06a9 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a MDX \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0648\u0644\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u062f\u0627\u062e\u0644 <code>pages<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>posts<\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f \u0633\u067e\u0633 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>my-first-post.mdx<\/code> \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631:<\/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\">My<\/span><span class=\"nv\"> <\/span><span class=\"s\">First<\/span><span class=\"nv\"> <\/span><span class=\"s\">Blog<\/span><span class=\"nv\"> <\/span><span class=\"s\">Post\"<\/span>\n<span class=\"na\">date<\/span><span class=\"pi\">:<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">2023-10-01\"<\/span>\n<span class=\"nn\">---<\/span>\n\n<span class=\"gh\"># Welcome to My Blog<\/span>\n\nThis is my very first post written in <span class=\"gs\">**MDX**<\/span>! MDX allows you to write Markdown while embedding React components for dynamic content. \n\nHere\u2019s an example of a styled button:\n\n<span class=\"nt\"><button\/><\/span>Click Me!<span class=\"nt\"\/>\n\nAnd here\u2019s some code for good measure:\n\n<span class=\"sb\">`console.log(\"Hello, world!\")`<\/span>\n\nIsn\u2019t this amazing? You can mix static content with interactive elements effortlessly.\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u0627 \u062a\u0639\u0628\u06cc\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code><button\/><\/code> \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc. \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 MDX \u0648\u0627\u0642\u0639\u0627\u064b \u0645\u06cc \u062f\u0631\u062e\u0634\u062f &#8211; \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0632\u0646\u062f\u06af\u06cc \u0628\u06cc\u0627\u0648\u0631\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_React_%D8%B1%D8%A7_%D8%AF%D8%B1_Markdown_%D8%AC%D8%A7%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 3: \u0627\u062c\u0632\u0627\u06cc React \u0631\u0627 \u062f\u0631 Markdown \u062c\u0627\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 <code><button\/><\/code> \u06a9\u0627\u0631 \u0645\u0624\u0644\u0641\u0647 \u060c \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>components<\/code> \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u060c \u0648 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0622\u0646 \u060c \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>Button.js<\/code> \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Button<\/span><span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0628\u0639\u062f \u060c \u0648\u0627\u0631\u062f\u0627\u062a <code>Button<\/code> \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u06cc\u0646 \u062e\u0637 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0635\u0641\u062d\u0647 \u060c \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 MDX \u062e\u0648\u062f \u062f\u0631 <code>my-first-post.mdx<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import Button from '..\/..\/components\/Button'\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06a9\u0646\u0648\u0646 \u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0622\u0646 \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f <code>\/posts\/my-first-post<\/code>\u060c \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0628\u0627 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u06a9\u0627\u0645\u0644\u0627\u064b \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0628\u06cc \u067e\u0627\u06cc\u0627\u0646 \u0631\u0627 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f &#8211; \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627 \u060c \u0641\u0631\u0645 \u0647\u0627 \u06cc\u0627 \u062d\u062a\u06cc \u0627\u0628\u0632\u0627\u0631\u06a9 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u0645\u0627.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_%D8%AA%D8%B9%D8%A8%DB%8C%D9%87_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_React_%D9%85%D9%87%D9%85_%D8%A7%D8%B3%D8%AA\"><\/span>\n<p>  <strong>\u0686\u0631\u0627 \u062a\u0639\u0628\u06cc\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u0645\u0647\u0645 \u0627\u0633\u062a<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u062a\u0639\u0628\u06cc\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u062f\u0631 Markdown \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0632\u06cc \u0627\u0633\u062a. \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u06a9\u062f \u0632\u0646\u062f\u0647 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u060c \u06cc\u0627 \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0646\u0642\u0627\u0637 \u062f\u0627\u062f\u0647 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0646\u0646\u062f. \u0628\u0627 MDX \u060c \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f &#8211; \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u062f\u0631\u06af\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>MDX \u0628\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0633\u0627\u062f\u06af\u06cc Markdown \u0628\u0627 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc React \u060c \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0631\u0627 \u062a\u0647\u06cc\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0645 \u0622\u0645\u0648\u0632\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u0648 \u0647\u0645 \u067e\u0648\u06cc\u0627. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0646\u0648\u0634\u062a\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u06cc \u0641\u0646\u06cc \u060c \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u062f\u0627\u0633\u062a\u0627\u0646 \u0647\u0627\u06cc \u0634\u062e\u0635\u06cc \u06cc\u0627 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u0647\u0633\u062a\u06cc\u062f \u060c \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0627\u0632 \u0647\u0645 \u062c\u062f\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"5_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A8%D8%A7_Tailwind_CSS\"><\/span>\n<p>  <strong>5. \u0637\u0631\u0627\u062d\u06cc \u0628\u0627 Tailwind CSS<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc MDX \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u062f\u0631\u062e\u0634\u0634 \u060c \u0648\u0642\u062a \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0648\u06cc \u062c\u0646\u0628\u0647 \u0628\u0635\u0631\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f. <strong>Tailwind CSS<\/strong> \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0648\u0644 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0637\u0631\u062d \u0647\u0627\u06cc \u0632\u06cc\u0628\u0627 \u0648 \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0628\u0627 \u0633\u0647\u0648\u0644\u062a \u0637\u0631\u0627\u062d\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u060c \u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Tailwind \u060c \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0622\u0646 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0648 \u0627\u062c\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u060c \u0642\u062f\u0645 \u0645\u06cc \u0632\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_tailwindconfigjs\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 1: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc <code>tailwind.config.js<\/code><\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 <code>tailwind.config.js<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u067e\u0631\u0648\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0634\u0646\u0627\u0633\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u062b\u0627\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/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\">content<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">.\/pages\/**\/*.{js,ts,jsx,tsx,mdx}<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/**\/*.{js,ts,jsx,tsx,mdx}<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">theme<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">extend<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">colors<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">primary<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#1E3A8A<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ A deep blue for headings and accents<\/span>\n        <span class=\"na\">secondary<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#FBBF24<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ A warm yellow for highlights<\/span>\n        <span class=\"na\">dark<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#1F2937<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Dark background for dark mode<\/span>\n        <span class=\"na\">light<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#F9FAFB<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Light background for light mode<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">fontFamily<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">sans<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Inter<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">sans-serif<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span> <span class=\"c1\">\/\/ Clean and modern font<\/span>\n        <span class=\"na\">serif<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Merriweather<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">serif<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span> <span class=\"c1\">\/\/ Elegant serif for headings<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">spacing<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">18<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">4.5rem<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Custom spacing for layout adjustments<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span>\n  <span class=\"na\">darkMode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">class<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Enable dark mode based on class<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0631\u0646\u06af \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u060c \u0641\u0648\u0646\u062a \u0647\u0627 \u0648 \u0641\u0627\u0635\u0644\u0647 \u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 Tailwind \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 <code>darkMode: 'class'<\/code> \u06af\u0632\u06cc\u0646\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%AE%D9%88%D8%A7%D9%86%D8%A7%DB%8C%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C_%D8%AA%D9%85%DB%8C%D8%B2_%D8%AA%D9%82%D9%88%DB%8C%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 2: \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u062a\u0645\u06cc\u0632 \u062a\u0642\u0648\u06cc\u062a \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0622\u0633\u0627\u0646 \u0648 \u062c\u0630\u0627\u0628 \u062f\u0627\u0631\u062f. \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 Tailwind \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0645\u062a\u0646 \u062e\u0648\u062f \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0646\u06a9\u062a\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u062a\u0645\u06cc\u0632 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<strong>\u0627\u0646\u062a\u062e\u0627\u0628 \u0642\u0644\u0645<\/strong>: \u0627\u0632 \u06cc\u06a9 \u0641\u0648\u0646\u062a Sans Serif \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>Inter<\/code> \u0628\u0631\u0627\u06cc \u0645\u062a\u0646 \u0628\u062f\u0646 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc. \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0648\u06cc\u0646 \u060c \u06cc\u06a9 \u0641\u0648\u0646\u062a \u0633\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>Merriweather<\/code> \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0638\u0631\u0627\u0641\u062a.<\/li>\n<li>\n<strong>\u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u0641\u0627\u0635\u0644\u0647 \u062e\u0637<\/strong>: \u0627\u0631\u062a\u0641\u0627\u0639 \u062e\u0637 \u0648 \u0641\u0627\u0635\u0644\u0647 \u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u0647\u06cc\u0646\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>  <span class=\"nt\"\/>\n  <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"text-lg font-sans leading-relaxed\"<\/span><span class=\"nt\">&gt;<\/span>This is a sample paragraph with clean typography.<span class=\"nt\"\/><\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>\n<strong>\u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u067e\u0627\u0633\u062e\u06af\u0648<\/strong>: \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0628\u0631\u0627\u06cc \u062a\u0637\u0628\u06cc\u0642 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"text-base sm:text-lg md:text-xl lg:text-2xl\"<\/span><span class=\"nt\">&gt;<\/span>Scaling text for all devices.<span class=\"nt\"\/><\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u062a\u0631\u0641\u0646\u062f\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062a\u062c\u0631\u0628\u0647 \u062e\u0648\u0627\u0646\u062f\u0646 \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u0646\u062f \u060c \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u0645\u0627 \u062f\u0631 \u0647\u0631 \u062f\u0633\u062a\u06af\u0627\u0647 \u0635\u06cc\u0642\u0644\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9_%D8%B1%D8%A7_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 3: \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dark Mode \u0628\u0647 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0648 Tailwind \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u0628\u06cc \u062f\u0631\u062f\u0633\u0631 \u0628\u0627\u0634\u062f. \u0628\u0627 <code>darkMode: 'class'<\/code> \u062a\u0646\u0638\u06cc\u0645 \u062f\u0631 \u062e\u0648\u062f <code>tailwind.config.js<\/code>\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u0627 \u062d\u0630\u0641 \u0622\u0646 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f <code>dark<\/code> \u06a9\u0644\u0627\u0633 \u062f\u0631 <code\/> or <code\/> element.<\/p>\n<p>Here\u2019s how to style your blog for both light and dark modes:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"bg-light dark:bg-dark text-dark dark:text-light\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"\/>\n  <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"text-lg\"<\/span><span class=\"nt\">&gt;<\/span>This text adapts to light and dark modes seamlessly.<span class=\"nt\"\/><\/p><\/span>\n<span class=\"nt\"\/><\/div><\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0628\u0631\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 JavaScript \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u0627 \u062d\u0630\u0641 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>dark<\/code> \u06a9\u0644\u0627\u0633:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">toggleDarkMode<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">documentElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dark<\/span><span class=\"dl\">'<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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 \u062f\u06a9\u0645\u0647 \u0628\u0647 \u0637\u0631\u062d \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062d\u0627\u0644\u062a \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><button> <span class=\"na\">onclick=<\/span><span class=\"s\">\"toggleDarkMode()\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"px-4 py-2 bg-primary text-light rounded\"<\/span><span class=\"nt\">&gt;<\/span>\n  Toggle Dark Mode\n<span class=\"nt\"\/><\/button><\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A7%D8%B2_%D9%86%D8%B3%D8%A8%D8%AA_%D9%87%D8%A7%DB%8C_%DA%A9%D9%86%D8%AA%D8%B1%D8%A7%D8%B3%D8%AA_%D8%AF%D8%B1_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3_%D8%A7%D8%B7%D9%85%DB%8C%D9%86%D8%A7%D9%86_%D8%AD%D8%A7%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 4: \u0627\u0632 \u0646\u0633\u0628\u062a \u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0627\u0633\u062a \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0637\u0631\u0627\u062d\u06cc \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u060c \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0647\u0645 \u0627\u0633\u062a. \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Webaim Contrast Checker \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u0631\u06a9\u06cc\u0628\u0627\u062a \u0631\u0646\u06af\u06cc \u0634\u0645\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc WCAG \u0627\u0633\u062a. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<ul>\n<li>\u0645\u062a\u0646 \u0631\u0648\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062a\u0627\u0631\u06cc\u06a9 \u0628\u0627\u06cc\u062f \u0646\u0633\u0628\u062a \u06a9\u0646\u062a\u0631\u0627\u0633\u062a \u062d\u062f\u0627\u0642\u0644 4.5: 1 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/li>\n<li>\u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc Opacity Tailwind \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (<code>opacity-75<\/code>\u060c \u0648 \u063a\u06cc\u0631\u0647) \u0628\u0631\u0627\u06cc \u0646\u0631\u0645 \u06a9\u0631\u062f\u0646 \u0631\u0646\u06af \u0647\u0627 \u0628\u062f\u0648\u0646 \u0628\u0647 \u062e\u0637\u0631 \u0627\u0646\u062f\u0627\u062e\u062a\u0646 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_Tailwind_CSS_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B1%D8%A7_%D8%A8%DB%8C_%D8%AF%D8%B1%D8%AF%D8%B3%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\"><\/span>\n<p>  <strong>\u0686\u0631\u0627 Tailwind CSS \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0628\u06cc \u062f\u0631\u062f\u0633\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 Tailwind \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0646\u0645\u0648\u0646\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0637\u0631\u062d \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 CSS \u0633\u0641\u0627\u0631\u0634\u06cc \u062a\u0635\u0641\u06cc\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0632 \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u062a\u0645\u06cc\u0632 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0637\u0631\u062d \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u060c Tailwind \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0628\u0635\u0631\u06cc \u062e\u06cc\u0631\u0647 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0641\u0627\u0635\u0644\u0647 \u060c \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0627 \u0631\u0646\u06af \u0647\u0627 \u0648 \u06cc\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0647\u0633\u062a\u06cc\u062f \u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc Tailwind \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u0627\u0646 \u0633\u0627\u0632\u06af\u0627\u0631 \u0648 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0628\u0627 \u0648\u062c\u0648\u062f \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u060c \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0634\u0646\u0627\u0633\u06cc \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0648\u062f \u0645\u062c\u0630\u0648\u0628 \u062e\u0648\u062f \u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0633\u0645\u062a \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u0645!<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"6_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%AE%D9%88%D8%AF\"><\/span>\n<p>  <strong>6 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u0628 \u0633\u0627\u0632\u0645\u0627\u0646 \u06cc\u0627\u0641\u062a\u0647 \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0639\u0627\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u060c \u0645\u0627 \u0686\u06af\u0648\u0646\u06af\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0624\u062b\u0631 \u0648 \u0627\u0632 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627 Next.JS \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0645\u062d\u062a\u0648\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u060c \u0633\u06cc\u0633\u062a\u0645\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0644\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0633\u062a \u0647\u0627\u06cc \u0641\u0631\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B3%D8%A7%D8%B2%D9%85%D8%A7%D9%86%D8%AF%D9%87%DB%8C_%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>  <strong>\u0645\u0631\u062d\u0644\u0647 1: \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u0631\u062a\u0628 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u060c \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0631\u0648\u0634\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0634\u062a\u0631\u06a9 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u062f\u0631 \u06cc\u06a9 \u0641\u0647\u0631\u0633\u062a \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u060c \u0645\u0627\u0646\u0646\u062f <code>posts<\/code>\u0628\u0634\u0631 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062b\u0627\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/pages\n  \/posts\n    my-first-post.mdx\n    another-post.mdx\n    yet-another-post.mdx\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u0631 \u06cc\u06a9 <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u06cc\u06a9 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0648\u0627\u062d\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 FrontMatter \u060c \u0627\u0628\u0631\u062f\u0627\u062f\u0647 (\u0645\u0627\u0646\u0646\u062f \u0639\u0646\u0648\u0627\u0646 \u060c \u062a\u0627\u0631\u06cc\u062e \u0648 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627) \u0631\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0647\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>---\ntitle: \"My First Blog Post\"\ndate: \"2023-10-01\"\ntags: [\"nextjs\", \"mdx\", \"tailwindcss\"]\n---\n\n# Welcome to My Blog\n\nThis is the content of my first post!\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u0627\u0628\u0631\u062f\u0627\u062f\u0647 \u0628\u0639\u062f\u0627\u064b \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062e\u0644\u0627\u0635\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0648 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u067e\u0633\u062a \u0647\u0627 \u062a\u0648\u0633\u0637 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627 \u06cc\u0627 \u062f\u0633\u062a\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D9%88_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D9%BE%D9%88%DB%8C%D8%A7\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 2: \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0633\u062a \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>next.js \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u06a9\u0647 \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0644\u06cc\u0633\u062a \u0645\u06cc \u06a9\u0646\u062f \u060c \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%84%DB%8C%D8%B3%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7_%D8%AF%D8%B1_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D8%B5%D9%84%DB%8C\"><\/span>\n<p>  <strong>\u0644\u06cc\u0633\u062a \u062a\u0645\u0627\u0645 \u067e\u0633\u062a \u0647\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>index.js<\/code> \u062f\u0631 \u062f\u0627\u062e\u0644 <code>pages<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u06cc\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0646 <code>getStaticProps<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0647\u0645\u0647 <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc <code>posts<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u0627\u0628\u0631\u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">fs<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">fs<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">path<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">matter<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">gray-matter<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">({<\/span> <span class=\"nx\">posts<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-4xl font-bold mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">My<\/span> <span class=\"nx\">Blog<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">ul<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">posts<\/span><span class=\"p\">.<\/span><span class=\"nf\">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=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">index<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-6<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">a<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`\/posts\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">slug<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-blue-500 hover:underline<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-2xl font-semibold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/a<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-gray-600<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">post<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">date<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ul<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">getStaticProps<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">files<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nf\">readdirSync<\/span><span class=\"p\">(<\/span><span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">pages\/posts<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">posts<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">files<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">filename<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">slug<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">filename<\/span><span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.mdx<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">''<\/span><span class=\"p\">)<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">markdownWithMeta<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nf\">readFileSync<\/span><span class=\"p\">(<\/span><span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">pages\/posts<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">filename<\/span><span class=\"p\">),<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">utf-8<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">matter<\/span><span class=\"p\">(<\/span><span class=\"nx\">markdownWithMeta<\/span><span class=\"p\">)<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">slug<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/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> <span class=\"nx\">posts<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u06a9\u062f \u0647\u0645\u0647 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0646\u062f <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u060c \u0627\u0628\u0631\u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0647\u0631 \u067e\u0633\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u06cc\u0648\u0646\u062f \u0642\u0627\u0628\u0644 \u06a9\u0644\u06cc\u06a9 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0645\u0631\u0628\u0648\u0637\u0647 \u062e\u0648\u062f \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D9%BE%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_%D8%A7%D9%86%D9%81%D8%B1%D8%A7%D8%AF%DB%8C_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D9%BE%D9%88%DB%8C%D8%A7\"><\/span>\n<p>  <strong>\u0627\u0631\u0627\u0626\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0641\u0631\u062f\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u060c \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>[slug].js<\/code> \u062f\u0631 \u062f\u0627\u062e\u0644 <code>pages\/posts<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0627\u0632 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc \u06cc\u06a9 \u067e\u0633\u062a \u062e\u0627\u0635 \u0628\u0631 \u0627\u0633\u0627\u0633 slug \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">fs<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">fs<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">path<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">matter<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">gray-matter<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">serialize<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-mdx-remote\/serialize<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MDXRemote<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-mdx-remote<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">PostPage<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">source<\/span><span class=\"p\">,<\/span> <span class=\"nx\">frontmatter<\/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=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-4xl font-bold mb-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">frontmatter<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-gray-600 mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">frontmatter<\/span><span class=\"p\">.<\/span><span class=\"nx\">date<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">article<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">prose lg:prose-xl dark:prose-invert<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">MDXRemote<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">source<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/article<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">getStaticPaths<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">files<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nf\">readdirSync<\/span><span class=\"p\">(<\/span><span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">pages\/posts<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">paths<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">files<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">filename<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"na\">params<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">slug<\/span><span class=\"p\">:<\/span> <span class=\"nx\">filename<\/span><span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.mdx<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">''<\/span><span class=\"p\">)<\/span> <span class=\"p\">},<\/span>\n  <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\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">getStaticProps<\/span><span class=\"p\">({<\/span> <span class=\"nx\">params<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">markdownWithMeta<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nf\">readFileSync<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">pages\/posts<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">slug<\/span><span class=\"p\">}<\/span><span class=\"s2\">.mdx`<\/span><span class=\"p\">),<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">utf-8<\/span><span class=\"dl\">'<\/span>\n  <span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">content<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">matter<\/span><span class=\"p\">(<\/span><span class=\"nx\">markdownWithMeta<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">mdxSource<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">serialize<\/span><span class=\"p\">(<\/span><span class=\"nx\">content<\/span><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> <span class=\"na\">source<\/span><span class=\"p\">:<\/span> <span class=\"nx\">mdxSource<\/span><span class=\"p\">,<\/span> <span class=\"na\">frontmatter<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/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\">PostPage<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>getStaticPaths<\/code> \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u0633\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u0648 <code>getStaticProps<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u0637\u0627\u0644\u0628 \u0648 \u0627\u0628\u0631\u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u067e\u0633\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0634\u062f\u0647. \u062f\u0631 <code>MDXRemote<\/code> \u0645\u0624\u0644\u0641\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc MDX \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0642\u0637\u0639\u0627\u062a React \u0631\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062a\u0639\u0628\u06cc\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_%D9%85%D8%B3%DB%8C%D8%B1%DB%8C%D8%A7%D8%A8%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%A7%D9%87%D9%85%DB%8C%D8%AA_%D8%AF%D8%A7%D8%B1%D8%AF\"><\/span>\n<p>  <strong>\u0686\u0631\u0627 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0647\u0645\u06cc\u062a \u062f\u0627\u0631\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u060c \u0645\u0642\u06cc\u0627\u0633 \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0632\u062d\u0645\u062a \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u060c Next.js \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0648 \u0627\u0628\u0631\u062f\u0627\u062f\u0647 \u0634\u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0628\u0627\u0639\u062b \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u062f\u0631 \u0648\u0642\u062a \u0645\u06cc \u0634\u0648\u062f \u0628\u0644\u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0646\u06cc\u0632 \u0633\u0627\u0632\u0645\u0627\u0646 \u06cc\u0627\u0641\u062a\u0647 \u0648 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u062a\u0645\u06cc\u0632 \u0628\u0627 \u0631\u0648\u0634\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0642\u062f\u0631\u062a\u0645\u0646\u062f Data.JS \u060c \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0642\u0648\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f. \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0645\u0631\u0648\u0631 \u06a9\u0646\u0646\u062f \u060c \u0631\u0648\u06cc \u06cc\u06a9 \u067e\u0633\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u0646\u062f \u0648 \u0627\u0632 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u062e\u0648\u0627\u0646\u062f\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0644\u0630\u062a \u0628\u0628\u0631\u0646\u062f &#8211; \u0647\u0645\u0647 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0631\u0648\u06cc \u0646\u0648\u0634\u062a\u0646 \u0645\u0637\u0627\u0644\u0628 \u0639\u0627\u0644\u06cc \u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0633\u0645\u062a \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u0645!<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4_%D8%AA%D8%AC%D8%B1%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\"><\/span>\n<p>  <strong>7. \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0639\u0627\u0644\u06cc \u0641\u0642\u0637 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627 \u0648 \u0637\u0631\u0627\u062d\u06cc \u0646\u06cc\u0633\u062a &#8211; \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0645\u0648\u0631\u062f \u062c\u0632\u0626\u06cc\u0627\u062a \u06a9\u0645\u06cc \u06a9\u0647 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0635\u0627\u0641 \u060c \u062c\u0630\u0627\u0628 \u0648 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0628\u0627\u0644\u0627 \u0628\u0631\u062f\u0646 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0636\u0645\u0646 \u062d\u0641\u0638 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0631 \u062e\u0637 \u0645\u0642\u062f\u0645 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u0634\u0645\u0627 \u060c \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%AC%D8%B3%D8%AA%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D9%86%D8%AD%D9%88_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D9%84%D9%88%DA%A9_%D9%87%D8%A7%DB%8C_%DA%A9%D8%AF\"><\/span>\n<p>  <strong>\u0628\u0631\u062c\u0633\u062a\u0647 \u0633\u0627\u0632\u06cc \u0646\u062d\u0648 \u0628\u0631\u0627\u06cc \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u06a9\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06af\u0631 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0634\u0627\u0645\u0644 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u0633\u062a \u060c \u0628\u0631\u062c\u0633\u062a\u0647 \u0633\u0627\u0632\u06cc \u0646\u062d\u0648 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0627\u0633\u062a. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0646\u062f <strong>\u0645\u0646\u0634\u0648\u0631<\/strong> \u06cc\u0627 <strong>\u0634\u06cc\u06a9\u06cc<\/strong> \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 MDX \u0648 Tailwind CSS \u0627\u062f\u063a\u0627\u0645 \u0634\u0648\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>react-syntax-highlighter<\/code> \u0628\u0631\u0627\u06cc \u0633\u0628\u06a9 \u06a9\u0631\u062f\u0646 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u06a9\u062f \u062e\u0648\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Prism<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">SyntaxHighlighter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-syntax-highlighter<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">tomorrow<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-syntax-highlighter\/dist\/cjs\/styles\/prism<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">CodeBlock<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">children<\/span><span class=\"p\">,<\/span> <span class=\"nx\">language<\/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=\"o\">&lt;<\/span><span class=\"nx\">SyntaxHighlighter<\/span> <span class=\"nx\">language<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">language<\/span><span class=\"p\">}<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">tomorrow<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded-md<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/SyntaxHighlighter<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">CodeBlock<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc MDX \u062e\u0648\u062f \u062c\u0627\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0634\u0648\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0642\u0637\u0639\u0647 \u0647\u0627\u06cc \u06a9\u062f \u0627\u0632 \u0646\u0638\u0631 \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628 \u0648 \u0622\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a \u06a9\u0648\u0686\u06a9 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u06a9\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc \u0641\u0646\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0646\u0646\u062f \u060c \u062a\u0641\u0627\u0648\u062a \u0628\u0632\u0631\u06af\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%A6%D9%88_%D8%A8%D8%A7_%D8%A8%D8%B1%DA%86%D8%B3%D8%A8_%D9%87%D8%A7%DB%8C_%D8%A7%D8%A8%D8%B1%D8%AF%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  <strong>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0633\u0626\u0648 \u0628\u0627 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0627\u0628\u0631\u062f\u0627\u062f\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631 \u062c\u0633\u062a\u062c\u0648 (SEO) \u0628\u0631\u0627\u06cc \u0631\u0627\u0646\u0646\u062f\u06af\u06cc \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0628\u0647 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a. \u0627\u0632 Next.js \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code\/> component to add metadata tags like titles, descriptions, and Open Graph images to each page. For example:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><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>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">PostPage<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">frontmatter<\/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=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Head<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">title<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">frontmatter<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"o\">|<\/span> <span class=\"nx\">My<\/span> <span class=\"nx\">Blog<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/title<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">meta<\/span> <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">description<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">content<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">frontmatter<\/span><span class=\"p\">.<\/span><span class=\"nx\">excerpt<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">A blog post about web development<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">meta<\/span> <span class=\"nx\">property<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">og:title<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">content<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">frontmatter<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">meta<\/span> <span class=\"nx\">property<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">og:description<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">content<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">frontmatter<\/span><span class=\"p\">.<\/span><span class=\"nx\">excerpt<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">A blog post about web development<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">meta<\/span> <span class=\"nx\">property<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">og:image<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">content<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/images\/og-image.png<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Head<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">{<\/span><span class=\"cm\">\/* Rest of your post content *\/<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627 \u0628\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u0646\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647\u062a\u0631 \u062f\u0631\u06a9 \u06a9\u0646\u0646\u062f \u0648 \u062f\u06cc\u062f \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9_%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%DB%8C_%D9%88_%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D8%AA%D8%AD%D9%84%DB%8C%D9%84%DB%8C\"><\/span>\n<p>  <strong>\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0648 \u0627\u062f\u063a\u0627\u0645 \u062a\u062d\u0644\u06cc\u0644\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u062a\u0631\u063a\u06cc\u0628 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u060c \u067e\u0633\u062a \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u0646\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>react-share<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Twitter \u060c LinkedIn \u0648 Facebook. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TwitterShareButton<\/span><span class=\"p\">,<\/span> <span class=\"nx\">LinkedinShareButton<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-share<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">ShareButtons<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">url<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/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=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex space-x-4 mt-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">TwitterShareButton<\/span> <span class=\"nx\">url<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">url<\/span><span class=\"p\">}<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"nx\">Share<\/span> <span class=\"nx\">on<\/span> <span class=\"nx\">Twitter<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/TwitterShareButton<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">LinkedinShareButton<\/span> <span class=\"nx\">url<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">url<\/span><span class=\"p\">}<\/span> <span class=\"nx\">summary<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"nx\">Share<\/span> <span class=\"nx\">on<\/span> <span class=\"nx\">LinkedIn<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/LinkedinShareButton<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u060c \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u062d\u0644\u06cc\u0644\u06cc \u0645\u0627\u0646\u0646\u062f Google Analytics \u06cc\u0627 \u0642\u0627\u0628\u0644 \u0642\u0628\u0648\u0644 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0631\u0641\u062a\u0627\u0631 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0648 \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0628\u06cc\u0646\u0634 \u062f\u0631 \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u062e\u0648\u062f. \u0627\u0632 next.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>_app.js<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Analytics \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86_%D8%B1%D9%88%D8%B4%D9%87%D8%A7\"><\/span>\n<p>  <strong>\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u0647\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u060c \u062f\u0633\u062a\u0631\u0633\u06cc \u0631\u0627 \u062f\u0631 \u0627\u0648\u0644\u0648\u06cc\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0634\u0648\u062f \u06a9\u0647 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0641\u0631\u0627\u06af\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a. \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 HTML \u0645\u0639\u0646\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code><\/p>\n<header\/><\/code>\u0628\u0627 <code><main\/><\/code>\u0648\u062a <code><\/p>\n<footer\/><\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0645\u0646\u0637\u0642\u06cc \u0635\u0641\u062d\u0627\u062a \u062e\u0648\u062f. \u062a\u0636\u0627\u062f \u0631\u0646\u06af \u06a9\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u0645\u062a\u0646 \u0648 \u0639\u0646\u0627\u0635\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0645\u0633\u0627\u0626\u0644 \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u062f. \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc \u0627\u0628\u0632\u0627\u0631 Tailwind CSS \u0645\u0627\u0646\u0646\u062f <code>sr-only<\/code> \u0648\u062a <code>focus-visible<\/code> \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0627\u062c\u0631\u0627\u06cc \u0645\u0624\u062b\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0627 \u062f\u0631\u062c \u0627\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a \u0647\u0627 &#8211; \u0628\u0631\u062c\u0633\u062a\u0647 \u0633\u0627\u0632\u06cc Syntax \u060c \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0633\u0626\u0648 \u060c \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u060c \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc &#8211; \u0634\u0645\u0627 \u0641\u0642\u0637 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0646\u06cc\u0633\u062a\u06cc\u062f. \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u0647 \u0627\u06cc \u0647\u0633\u062a\u06cc\u062f \u06a9\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627\u0632 \u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0628\u067e\u0648\u0634\u0627\u0646\u06cc\u0645!<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"8_%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1_%D9%88%D8%A8%D9%84%D8%A7%DA%AF_%D8%AE%D9%88%D8%AF\"><\/span>\n<p>  <strong>8. \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0622\u062e\u0631\u06cc\u0646 \u06af\u0627\u0645 \u062f\u0631 \u0632\u0646\u062f\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631 \u0633\u062e\u062a \u0634\u0645\u0627 \u0627\u0633\u062a \u0648 \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0627\u0632 \u0647\u0645\u06cc\u0634\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u0646\u062f\u0647 \u0632\u0646\u062f\u06af\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u062f\u0627\u0648\u0645 \u0648 \u0633\u0627\u062e\u062a\u0647\u0627\u06cc \u0627\u062a\u0648\u0645\u0627\u062a\u06cc\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%B5%D9%88%D8%B1%D8%AA_%D9%85%D8%AD%D9%84%DB%8C_%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 1: \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0622\u0645\u0627\u062f\u0647 \u062a\u0648\u0644\u06cc\u062f \u0627\u0633\u062a. \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm run build\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u06cc\u06a9 \u0646\u0633\u062e\u0647 \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0632 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u062f\u0631 <code>.next<\/code> \u067e\u0648\u0634\u0647 \u0633\u0627\u062e\u062a \u0648 \u0633\u0627\u0632 \u0631\u0627 \u0628\u0627 \u062f\u0648\u06cc\u062f\u0646 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm start\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0628\u0627\u0632\u062f\u06cc\u062f <code>http:\/\/localhost:3000<\/code> \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u06cc \u0631\u0648\u062f. \u0627\u06af\u0631 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u062e\u0648\u0628 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u060c \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u062d\u0631\u06a9\u062a \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DA%A9%D8%AF_%D8%B1%D8%A7_%D8%A8%D9%87_%DB%8C%DA%A9_%D9%85%D8%AE%D8%B2%D9%86_GIT_%D9%81%D8%B4%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 2: \u06a9\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u062e\u0632\u0646 GIT \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u060c \u06a9\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u062e\u0632\u0646 GIT \u0645\u0627\u0646\u0646\u062f Github \u060c GitLab \u06cc\u0627 Bitbucket \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0627\u06af\u0631 \u0647\u0646\u0648\u0632 \u06cc\u06a9 \u0645\u062e\u0632\u0646 \u0631\u0627 \u0627\u0648\u0644\u06cc\u0647 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>git init\ngit add <span class=\"nb\">.<\/span>\ngit commit <span class=\"nt\">-m<\/span> <span class=\"s2\">\"Initial commit\"<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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 \u06cc\u06a9 \u0645\u062e\u0632\u0646 \u062c\u062f\u06cc\u062f \u0628\u0631 \u0631\u0648\u06cc \u067e\u0644\u062a \u0641\u0631\u0645 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u062d\u0644\u06cc \u062e\u0648\u062f \u067e\u06cc\u0648\u0646\u062f \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>git remote add origin https:\/\/github.com\/your-username\/your-repo-name.git\ngit branch <span class=\"nt\">-M<\/span> main\ngit push <span class=\"nt\">-u<\/span> origin main\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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\u06cc\u0646 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06a9\u062f \u0634\u0645\u0627 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0630\u062e\u06cc\u0631\u0647 \u0634\u062f\u0647 \u0648 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%85%D8%AE%D8%B2%D9%86_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%A8%D8%B3%D8%AA%D8%B1_%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1_%D9%88%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0645\u0631\u062d\u0644\u0647 3: \u0645\u062e\u0632\u0646 \u0631\u0627 \u0628\u0647 \u0628\u0633\u062a\u0631 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u062b\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u062f\u0631\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0645\u062e\u0627\u0632\u0646 GIT \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0633\u0627\u062e\u062a \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u062a\u0648\u0645\u0627\u062a\u06cc\u06a9 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0647 \u0633\u06a9\u0648\u06cc \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062e\u0648\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c Vercel \u060c NetLify \u06cc\u0627 Pages CloudFlare) \u0628\u0631\u0648\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\u0648\u0627\u0631\u062f \u062d\u0633\u0627\u0628 \u062e\u0648\u062f \u0634\u0648\u06cc\u062f \u0648 &#8220;\u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f&#8221; \u06cc\u0627 &#8220;\u0627\u0641\u0632\u0648\u062f\u0646 \u0633\u0627\u06cc\u062a&#8221; \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0645\u062e\u0632\u0646 GIT \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062d\u0633\u0627\u0628 \u062e\u0648\u062f \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0645\u062e\u0632\u0646 \u062d\u0627\u0648\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f (\u0628\u06cc\u0634\u062a\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/li>\n<li>\u0627\u0648\u0644\u06cc\u0646 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc &#8220;\u0627\u0633\u062a\u0642\u0631\u0627\u0631&#8221; \u06cc\u0627 \u0641\u0634\u0627\u0631 \u0622\u0648\u0631\u062f\u0646 \u062a\u0639\u0647\u062f \u062c\u062f\u06cc\u062f \u0628\u0647 \u0634\u0639\u0628\u0647 \u0627\u0635\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/li>\n<\/ol>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0645\u0631\u0627\u062d\u0644 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u060c \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0632\u0646\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0648 \u06cc\u06a9 URL \u0628\u0631\u0627\u06cc \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u0628\u0627 \u062c\u0647\u0627\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1_%D9%85%D8%AF%D8%A7%D9%88%D9%85_%D9%88_%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1\"><\/span>\n<p>  <strong>\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u062f\u0627\u0648\u0645 \u0648 \u0633\u0627\u062e\u062a \u062e\u0648\u062f\u06a9\u0627\u0631<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0632\u0631\u06af\u062a\u0631\u06cc\u0646 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u06cc\u0646 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0633\u0647\u0648\u0644\u062a \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u062f\u0627\u0648\u0645 \u0627\u0633\u062a. \u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u0645\u062e\u0632\u0646 \u062e\u0648\u062f \u060c \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u0628\u0647 \u0634\u0639\u0628\u0647 \u0627\u0635\u0644\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0627\u06cc\u0646 \u067e\u0644\u062a\u0641\u0631\u0645 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0645\u0633\u062a\u0642\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062f\u0648\u0646 \u0646\u06af\u0631\u0627\u0646\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u062f\u0633\u062a\u06cc \u060c \u0631\u0648\u06cc \u0646\u0648\u0634\u062a\u0646 \u0648 \u0628\u0647\u0628\u0648\u062f \u0645\u0637\u0627\u0644\u0628 \u062e\u0648\u062f \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u062d\u06cc\u0637 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u06a9\u0634\u0634 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0642\u0628\u0644 \u0627\u0632 \u0627\u062f\u063a\u0627\u0645 \u0622\u0646\u0647\u0627 \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f \u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u062f \u06a9\u0647 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u0631\u0648\u0632 \u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u062e\u0648\u062f \u0627\u0633\u062a. \u0628\u0627 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0632\u0646\u062f\u0647 \u0627\u0633\u062a \u060c \u0648\u0642\u062a \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0633\u062a\u0627\u0648\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u062c\u0634\u0646 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0627\u06cc\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062c\u0647\u0627\u0646 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f!<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"9_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C\"><\/span>\n<p>  <strong>9. \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc!<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0628\u0627 Next.JS \u060c MDX \u0648 Tailwind CSS \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648 \u0633\u0627\u0632\u0646\u062f\u06af\u0627\u0646 \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u0633\u0627\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u067e\u0634\u062a\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u06cc \u0646\u0638\u06cc\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0631\u0627 \u062a\u0647\u06cc\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0645 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0627\u0634\u062f \u0648 \u0647\u0645 \u0628\u0635\u0631\u06cc \u062e\u06cc\u0631\u0647 \u06a9\u0646\u0646\u062f\u0647. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc Next.js \u060c MDX \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0627 \u0633\u0627\u062f\u06af\u06cc \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f \u060c \u0648 CSS Tailwind \u06a9\u0647 \u06cc\u06a9 \u0631\u0648\u0634 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u060c \u062a\u0645\u0627\u0645 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u06cc\u062f \u060c \u062f\u0627\u0631\u06cc\u062f. <\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0646\u0648\u0634\u062a\u0646 \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u0641\u0646\u06cc \u060c \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u062f\u0627\u0633\u062a\u0627\u0646 \u0647\u0627\u06cc \u0634\u062e\u0635\u06cc \u06cc\u0627 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f \u060c \u0627\u06cc\u0646 \u067e\u0634\u062a\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0631\u0648\u06cc \u0622\u0646\u0686\u0647 \u0645\u0647\u0645 \u0627\u0633\u062a &#8211; \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0645\u0646\u0627\u0633\u0628\u06cc \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u060c \u06a9\u0634\u0641 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0648 \u0627\u06cc\u062c\u0627\u062f \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0648\u0627\u0642\u0639\u0627\u064b \u0628\u06cc \u0646\u0638\u06cc\u0631 \u0627\u0633\u062a. \u062e\u0644\u0627\u0642\u06cc\u062a \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062c\u0627\u0645\u0639\u0647 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0648 \u0628\u0647 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0627\u0644\u0647\u0627\u0645 \u0628\u062e\u0634\u06cc\u062f \u062a\u0627 \u062f\u0631 \u0633\u0641\u0631 \u0628\u0647 \u0648\u0628\u0644\u0627\u06af \u0646\u0648\u06cc\u0633\u06cc \u062e\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u0646\u062f. \u0622\u0645\u0627\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u0634\u06cc\u0631\u062c\u0647 \u0647\u0633\u062a\u06cc\u062f\u061f \u0627\u0645\u0631\u0648\u0632 \u0633\u0627\u062e\u062a \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_%D9%86%DA%A9%D8%A7%D8%AA_%D9%BE%D8%A7%D8%AF%D8%A7%D8%B4_%D8%A8%D8%AE%D8%B4_%D8%A7%D8%AE%D8%AA%DB%8C%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>10. \u0646\u06a9\u0627\u062a \u067e\u0627\u062f\u0627\u0634 (\u0628\u062e\u0634 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0641\u0638 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u06af\u0630\u0627\u0631\u06cc \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0633\u0627\u062e\u062a \u0622\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u0648 \u0628\u0627 \u0686\u0646\u062f \u0646\u06a9\u062a\u0647 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0628\u0632\u0631\u06af \u0634\u062f\u0646 \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u062e\u0648\u062f \u060c \u0642\u0648\u06cc \u0648 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0627\u06cc\u062f\u0647 \u0633\u0631\u06cc\u0639 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0628\u0647 \u0633\u0637\u062d \u0628\u0639\u062f\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B4%D8%AA%DB%8C%D8%A8%D8%A7%D9%86_%DA%AF%DB%8C%D8%B1%DB%8C_%D8%AE%D9%88%D8%AF%DA%A9%D8%A7%D8%B1\"><\/span>\n<p>  <strong>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u06af\u06cc\u0631\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u06af\u06cc\u0631\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0648 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f (\u062f\u0631 \u0635\u0648\u0631\u062a \u06a9\u0627\u0631\u0628\u0631\u062f) \u0627\u0632 \u06a9\u0627\u0631 \u0633\u062e\u062a \u062e\u0648\u062f \u0645\u062d\u0627\u0641\u0638\u062a \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u0639\u06a9\u0633 \u0647\u0627\u06cc \u0645\u0646\u0638\u0645 \u0627\u0632 \u0645\u062e\u0632\u0646 \u062e\u0648\u062f \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0642\u062f\u0627\u0645\u0627\u062a GitHub \u06cc\u0627 \u062e\u062f\u0645\u0627\u062a \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a \u0628\u06cc\u0634\u062a\u0631 \u060c \u0635\u0627\u062f\u0631\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>.mdx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0648\u0631\u0647 \u0627\u06cc \u0648 \u0630\u062e\u06cc\u0631\u0647 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0627\u0628\u0631\u06cc \u0645\u0627\u0646\u0646\u062f AWS S3 \u06cc\u0627 Google Drive.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D9%88%D8%B4_%D8%AF%D8%B1_%D8%AA%D9%86%D8%B8%DB%8C%D9%85%D8%A7%D8%AA_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_Tailwind\"><\/span>\n<p>  <strong>\u06a9\u0627\u0648\u0634 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 Tailwind<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Tailwind CSS \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647 \u0627\u0633\u062a \u0648 \u063a\u0648\u0627\u0635\u06cc \u0639\u0645\u06cc\u0642 \u062a\u0631 \u062f\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062d\u062a\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0628\u0627\u0632 \u0634\u0648\u062f. \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u067e\u0627\u0644\u062a \u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0631\u0627\u06cc \u0627\u0635\u0644\u0627\u062d \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u062f \u060c \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>@apply<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u06cc\u0627 \u062a\u0645 \u062e\u0648\u062f \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0645\u0642\u06cc\u0627\u0633 \u0647\u0627\u06cc \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f \u06a9\u0647 \u0628\u0627 \u0647\u0648\u06cc\u062a \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%DA%AF%D8%B2%DB%8C%D9%86%D9%87_%D9%87%D8%A7%DB%8C_CMS_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D8%B4%D8%A7%D8%B1%DA%A9%D8%AA_%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%BA%DB%8C%D8%B1_%D9%81%D9%86%DB%8C\"><\/span>\n<p>  <strong>\u0627\u062f\u063a\u0627\u0645 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc CMS \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u063a\u06cc\u0631 \u0641\u0646\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06af\u0631 \u0642\u0635\u062f \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0645\u0634\u0627\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u063a\u06cc\u0631 \u0641\u0646\u06cc \u062f\u0627\u0631\u06cc\u062f \u060c \u0627\u062f\u063a\u0627\u0645 CMS \u0628\u062f\u0648\u0646 \u0633\u0631 \u0645\u0627\u0646\u0646\u062f \u0645\u062d\u062a\u0648\u0627 \u06cc\u0627 \u0639\u0642\u0644 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0631\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u062a\u0631 \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u0646\u062f \u062a\u0627 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0634\u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 API \u0647\u0627 \u0648\u0635\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0628\u0635\u0631\u06cc \u0628\u0646\u0648\u06cc\u0633\u0646\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u0646\u062f. \u0628\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc MDX \u0628\u0627 \u0633\u0647\u0648\u0644\u062a CMS \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u06cc\u0645 \u062e\u0648\u062f \u0631\u0627 \u062a\u0648\u0627\u0646\u0645\u0646\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062f\u0648\u0646 \u0646\u06af\u0631\u0627\u0646\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u06a9\u062f \u060c \u0631\u0648\u06cc \u0642\u0635\u0647 \u06af\u0648\u06cc\u06cc \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0646\u06a9\u0627\u062a \u067e\u0627\u062f\u0627\u0634 \u060c \u0646\u0647 \u062a\u0646\u0647\u0627 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0631\u0627 \u0636\u062f \u0622\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0628\u0644\u06a9\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0645\u0642\u06cc\u0627\u0633 \u0631\u0627 \u0628\u0627 \u06af\u0630\u0634\u062a \u0632\u0645\u0627\u0646 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062a\u0645\u0627\u0645 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u060c \u067e\u0627\u0644\u0627\u06cc\u0634 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0627\u06cc\u0646 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062d\u0636\u0648\u0631 \u062c\u0644\u0627 \u0648 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0635\u0648\u0631\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0686\u0631\u0627 \u0648\u0642\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0628\u0644\u0627\u06af \u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0635\u0627\u0641 \u0648 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0627\u0633\u062a\u0631\u0633 \u0646\u0633\u0628\u062a \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u061f Next.js\u0628\u0627 MDX\u0648\u062a Tailwind CSS \u06cc\u06a9 \u062a\u06cc\u0645 \u0631\u0648\u06cc\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0647\u0645 \u062f\u0631 \u0647\u0645\u0627\u0646 \u0632\u0645\u0627\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0647\u0645 \u0634\u06cc\u06a9 \u0627\u0633\u062a. Next.JS \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":99707,"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-99706","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\/99706","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=99706"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/99706\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/99707"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=99706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=99706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=99706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}