{"id":65167,"date":"2024-06-04T23:09:01","date_gmt":"2024-06-04T19:39:01","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/"},"modified":"2024-06-04T23:09:01","modified_gmt":"2024-06-04T19:39:01","slug":"building-an-e-commerce-store-with-nextjs-49m","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0628\u0627 NextJS"},"content":{"rendered":"<div data-article-id=\"1877005\" id=\"article-body\">\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 Stripe \u067e\u0631\u062f\u0627\u062e\u062a \u06a9\u0646\u0646\u062f.  \u067e\u0633 \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632\u060c \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0648 \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 Admin \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.  \u06a9\u0627\u0631\u0628\u0631 Admin \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc\u062c\u0627\u062f \u0648 \u062d\u0630\u0641 \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<ul>\n<li>\n<p>Appwrite &#8211; \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062d\u0635\u0648\u0644.<\/li>\n<li>\n<p>Next.js &#8211; \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0628\u0627\u0637\u0646 \u0628\u0631\u0646\u0627\u0645\u0647.<\/li>\n<li>\n<p>Novu &#8211; \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc.<\/li>\n<li>\n<p>React Email &#8211; \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644.<\/li>\n<li>\n<p>Stripe &#8211; \u0628\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 \u067e\u0631\u062f\u0627\u062e\u062a \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647.<\/li>\n<\/ul>\n<p><\/p>\n<hr\/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><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-an-e-commerce-store-with-nextjs-49m\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B1%D8%A7%D8%A8%D8%B7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A8%D8%A7_Nextjs\" >\u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_Appwrite_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D9%85\" >\u0686\u06af\u0648\u0646\u0647 Appwrite \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_GitHub_Authentication_%D8%A8%D8%A7_Appwrite\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc GitHub Authentication \u0628\u0627 Appwrite<\/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-an-e-commerce-store-with-nextjs-49m\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_Appwrite\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Appwrite<\/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-an-e-commerce-store-with-nextjs-49m\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Appwrite_Storage\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Appwrite Storage<\/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-an-e-commerce-store-with-nextjs-49m\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D9%86%D8%AC%D8%A7%D9%85_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_CRUD_%D8%A8%D8%A7_Appwrite\" >\u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0628\u0627 Appwrite<\/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-an-e-commerce-store-with-nextjs-49m\/#%D8%B0%D8%AE%DB%8C%D8%B1%D9%87_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA_%D8%AF%D8%B1_Appwrite\" >\u0630\u062e\u06cc\u0631\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0631 Appwrite<\/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-an-e-commerce-store-with-nextjs-49m\/#%D8%A8%D8%A7%D8%B2%DB%8C%D8%A7%D8%A8%DB%8C_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA_%D8%A7%D8%B2_Appwrite\" >\u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 Appwrite<\/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-an-e-commerce-store-with-nextjs-49m\/#%D8%AD%D8%B0%D9%81_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA_%D8%A7%D8%B2_Appwrite\" >\u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 Appwrite<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A8%D8%A7_Appwrite\" >\u0646\u062d\u0648\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627 Appwrite<\/a><\/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-an-e-commerce-store-with-nextjs-49m\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_Stripe_%D8%A8%D9%87_Nextjs\" >\u0646\u062d\u0648\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u0631\u062f\u0627\u062e\u062a \u067e\u0631\u062f\u0627\u062e\u062a Stripe \u0628\u0647 Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/#%D8%A7%D8%B1%D8%B3%D8%A7%D9%84_%D8%A7%D8%B9%D9%84%D8%A7%D9%86_%D9%87%D8%A7%DB%8C_%D8%AF%D8%B1%D9%88%D9%86_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%DB%8C_%D9%88_%D8%A7%DB%8C%D9%85%DB%8C%D9%84%DB%8C_%D8%A8%D8%A7_Novu\" >\u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0648 \u0627\u06cc\u0645\u06cc\u0644\u06cc \u0628\u0627 Novu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1_%D8%A7%D8%B9%D9%84%D8%A7%D9%86_%D8%A8%D8%A7_Novu_Echo\" >\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0628\u0627 Novu Echo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/building-an-e-commerce-store-with-nextjs-49m\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B1%D8%A7%D8%A8%D8%B7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A8%D8%A7_Nextjs\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 Next.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0635\u0641\u062d\u0627\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u0642\u0634 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0628\u0647 \u062f\u0648 \u0642\u0633\u0645\u062a \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0642\u0628\u0644 \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u0648 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0631\u062f \u0634\u0648\u0646\u062f.  \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062f\u0645\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0647\u0645\u0647 \u0635\u0641\u062d\u0627\u062a \u0627\u0632 \u062c\u0645\u0644\u0647 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0648 \u062d\u0630\u0641 \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--XVEdaVDw--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800\/https:\/\/media1.giphy.com\/media\/iopxsZtW2QVRs4poEC\/giphy.gif%3Fcid%3D7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd%26ep%3Dv1_gifs_search%26rid%3Dgiphy.gif%26ct%3Dg\" alt=\"https:\/\/media1.giphy.com\/media\/iopxsZtW2QVRs4poEC\/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&#038;ep=v1_gifs_search&#038;rid=ct=g.\" loading=\"lazy\" width=\"480\" height=\"270\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js Typescript \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx create-next-app novu-store\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f React Icons \u0648 \u0628\u0633\u062a\u0647 Headless UI \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.  React Icons \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u0632 \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 UI Headless \u0627\u062c\u0632\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0622\u0633\u0627\u0646 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>react-icons @headlessui\/react\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0631\u0627 \u0627\u0632 \u0645\u062e\u0632\u0646 GitHub \u062f\u0631 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>app\/page.tsx<\/code> \u0641\u0627\u06cc\u0644.  \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0645\u0648\u0627\u0631\u062f\u06cc \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdj69givzhqfapgsg12rk.gif\" alt=\"1\" loading=\"lazy\" width=\"800\" height=\"427\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0633\u0627\u0628 GitHub \u062e\u0648\u062f \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u0646\u062f.  \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>app\/login\/page.tsx<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"c1\">\/\/\ud83d\udc49\ud83c\udffb create a login folder containing a page.tsx file<\/span>\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=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">handleGoogleSignIn<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{};<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">main<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'w-full min-h-screen flex flex-col items-center justify-center'<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'font-semibold text-3xl mb-2'<\/span><span class=\"p\">&gt;<\/span>Customer Sign in<span class=\"p\"\/><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'mb-4 text-sm text-red-500'<\/span><span class=\"p\">&gt;<\/span>\n                You need to sign in before you can make a purchase\n            <span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n                <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'p-4 border-[2px] border-gray-500 rounded-md hover:bg-black hover:text-white w-2\/3'<\/span>\n                <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">handleGoogleSignIn<\/span><span class=\"p\">()<\/span><span class=\"si\">}<\/span>\n            <span class=\"p\">&gt;<\/span>\n                Sign in with GitHub\n            <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">main<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3nh2rowpfg4hgksj5diy.png\" alt=\"\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0634\u062a\u0631\u06cc\" loading=\"lazy\" width=\"800\" height=\"230\" title=\"\"><\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0648\u0631\u0648\u062f \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a GitHub \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u06a9\u0647 \u0648\u0627\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0648\u0646\u062f.  \u0628\u0647 \u0632\u0648\u062f\u06cc \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 Appwrite \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0635\u0641\u062d\u0627\u062a \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>admin<\/code> \u067e\u0648\u0634\u0647 \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 <code>login<\/code> \u0648 <code>dashboard<\/code> \u0645\u0633\u06cc\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 <code>app<\/code> \u067e\u0648\u0634\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>app\n<span class=\"nb\">mkdir <\/span>admin <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">cd <\/span>admin\n<span class=\"nb\">mkdir <\/span>dashboard login\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>page.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 \u062f\u0627\u062e\u0644 <code>dashboard<\/code> \u0648 <code>login<\/code> \u067e\u0648\u0634\u0647 \u0647\u0627\u060c \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>login\/page.tsx<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Login<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEmail<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">password<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setPassword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">handleLogin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FormEvent<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">({<\/span> <span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">password<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">main<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'w-full min-h-screen flex flex-col items-center justify-center'<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'font-semibold text-3xl mb-4'<\/span><span class=\"p\">&gt;<\/span> Admin Sign in<span class=\"p\"\/><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">form<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'w-2\/3'<\/span> <span class=\"na\">onSubmit<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLogin<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">label<\/span> <span class=\"na\">htmlFor<\/span><span class=\"p\">=<\/span><span class=\"s\">'email'<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'block'<\/span><span class=\"p\">&gt;<\/span>\n                    Email\n                <span class=\"p\"\/><span class=\"nt\">label<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n                    <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">'email'<\/span>\n                    <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">'email'<\/span>\n                    <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'w-full px-4 py-3 border border-gray-400 rounded-sm mb-4'<\/span>\n                    <span class=\"na\">required<\/span>\n                    <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">email<\/span><span class=\"si\">}<\/span>\n                    <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">'admin@admin.com'<\/span>\n                    <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setEmail<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n                <span class=\"p\">\/&gt;<\/span>\n\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">label<\/span> <span class=\"na\">htmlFor<\/span><span class=\"p\">=<\/span><span class=\"s\">'password'<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'block'<\/span><span class=\"p\">&gt;<\/span>\n                    Password\n                <span class=\"p\"\/><span class=\"nt\">label<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n                    <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">'password'<\/span>\n                    <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">'password'<\/span>\n                    <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'w-full px-4 py-3 border border-gray-400 rounded-sm mb-4'<\/span>\n                    <span class=\"na\">required<\/span>\n                    <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">password<\/span><span class=\"si\">}<\/span>\n                    <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">'admin123'<\/span>\n                    <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setPassword<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n                <span class=\"p\">\/&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'p-4 text-lg mb-3 bg-blue-600 text-white w-full rounded-md'<\/span><span class=\"p\">&gt;<\/span>\n                    Sign in\n                <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'text-sm text-center'<\/span><span class=\"p\">&gt;<\/span>\n                    Not an Admin?<span class=\"si\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">'\/login'<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">'text-blue-500'<\/span><span class=\"p\">&gt;<\/span>\n                        Sign in as a Customer\n                    <span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nt\">form<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">main<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0641\u0631\u0645\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0645\u062f\u06cc\u0631 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f\u060c \u0627\u0639\u062a\u0628\u0627\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u067e\u0633 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgjd9wsi63t96d5cls9om.png\" alt=\"\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a\" loading=\"lazy\" width=\"800\" height=\"325\" title=\"\"><\/p>\n<p>\u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Admin \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 Admin \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0636\u0627\u0641\u0647 \u0648 \u062d\u0630\u0641 \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>dashboard\/page.tsx<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp1gd1uq1eq6n76fesjxu.gif\" alt=\"2\" loading=\"lazy\" width=\"800\" height=\"416\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!  \u0634\u0645\u0627 \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0633\u0627\u062e\u062a\u0647 \u0627\u06cc\u062f.  \u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0622\u062a\u06cc\u060c \u0646\u062d\u0648\u0647 \u0627\u062a\u0635\u0627\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 Appwrite \u0648 \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u06cc\u0646 \u0645\u0634\u062a\u0631\u06cc \u0648 \u0633\u0631\u0648\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_Appwrite_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D9%85\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 Appwrite \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Appwrite \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u0628\u0627\u0637\u0646 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\u06cc \u0627\u06cc\u0645\u0646 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0686\u0646\u062f\u06af\u0627\u0646\u0647\u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645\u0646\u060c \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u060c \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0627\u0628\u0631\u06cc \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0641\u0648\u0644 \u0627\u0633\u062a\u06a9 \u0636\u0631\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0646\u062d\u0648\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Appwrite \u0634\u0627\u0645\u0644 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644 \u0631\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0627\u0632 Appwrite Cloud \u062f\u06cc\u062f\u0646 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0633\u0627\u0632\u0645\u0627\u0646 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0639\u062f\u060c \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0646\u0637\u0642\u0647 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fas6302olk60oklfo70x5.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 1\" loading=\"lazy\" width=\"800\" height=\"270\" title=\"\"><\/p>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <code>Web<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0644\u062a\u0641\u0631\u0645 SDK \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbb5ae82i9fyoyrowsy96.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 2\" loading=\"lazy\" width=\"800\" height=\"387\" title=\"\"><\/p>\n<p>\u0645\u0631\u0627\u062d\u0644 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u062f\u0631 \u062d\u0627\u0644\u062a \u062a\u0648\u0633\u0639\u0647 \u0647\u0633\u062a\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0639\u0644\u0627\u0645\u062a \u0639\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (<code>*<\/code>) \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u0645\u06cc\u0632\u0628\u0627\u0646 \u062e\u0648\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0646\u0627\u0645 \u062f\u0627\u0645\u0646\u0647 \u062e\u0648\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy5ccs0hzgs9ujf5lzh83.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 3\" loading=\"lazy\" width=\"800\" height=\"426\" title=\"\"><\/p>\n<p>Appwrite Client SDK \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f \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>appwrite\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>appwrite.ts<\/code> \u062f\u0631 \u067e\u0648\u0634\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 Appwrite \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Client<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Account<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Databases<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Storage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Client<\/span><span class=\"p\">();<\/span>\n\n<span class=\"nx\">client<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">setEndpoint<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/cloud.appwrite.io\/v1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">setProject<\/span><span class=\"p\">(&lt;<\/span><span class=\"nc\">YOUR_PROJECT_ID<\/span><span class=\"p\">&gt;<\/span>);\n\nexport const account = new Account(client);\n\nexport const db = new Databases(client);\n\nexport const storage = new Storage(client);\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_GitHub_Authentication_%D8%A8%D8%A7_Appwrite\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc GitHub Authentication \u0628\u0627 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0646\u062d\u0648\u0647 \u062a\u0646\u0638\u06cc\u0645 GitHub \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u06cc\u0644\/\u06af\u0630\u0631\u0648\u0627\u0698\u0647 \u0631\u0627 \u0628\u0627 Appwrite \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.  \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u06cc\u0644\/\u06af\u0630\u0631\u0648\u0627\u0698\u0647 \u0642\u0628\u0644\u0627\u064b \u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u0648\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a GitHub \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 GitHub OAuth \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0633\u0627\u0628 GitHub \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  Appwrite \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a GitHub \u0628\u0647 \u0634\u0646\u0627\u0633\u0647 \u0645\u0634\u062a\u0631\u06cc \u0648 \u0627\u0633\u0631\u0627\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9znk1yr7tffus7soitq2.png\" alt=\"GitHub 1\" loading=\"lazy\" width=\"800\" height=\"518\" title=\"\"><\/p>\n<p>\u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0631\u0648\u0634 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a GitHub Appwrite \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f <code>Auth<\/code> \u0627\u0632 \u0645\u0646\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0648 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0647 <code>Settings<\/code> \u0628\u0631\u06af\u0647<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F43uo6nho1bz9su14zsno.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 4\" loading=\"lazy\" width=\"800\" height=\"360\" title=\"\"><\/p>\n<p>\u0634\u0646\u0627\u0633\u0647 \u0645\u0634\u062a\u0631\u06cc GitHub \u0648 \u0631\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a GitHub OAuth Appwrite \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--G7WP84rE--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/v1\/Building%20An%20E-Commerce%20Store%20With%20NextJS%20684b2e35ac5f4575930e9fbb8c958741\/Screenshot_2024-05-24_at_19.45.36.png\" alt=\"\u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a 24\/05\/2024 \u062f\u0631 19.45.36.png\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 URI \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 Appwrite \u0631\u0627 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0631\u0646\u0627\u0645\u0647 GitHub \u062e\u0648\u062f \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg75q5r5hc6l5pi09k88m.png\" alt=\"GitHub 2\" loading=\"lazy\" width=\"800\" height=\"274\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_Appwrite\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Databases \u0631\u0627 \u0627\u0632 \u0645\u0646\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0646\u0627\u0645 \u0628\u0628\u0631\u06cc\u062f <code>novu store<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7kn1llmu7olqirfcrpa.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 5\" loading=\"lazy\" width=\"800\" height=\"380\" title=\"\"><\/p>\n<p>\u0628\u0639\u062f\u060c a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>products<\/code> \u0645\u062c\u0645\u0648\u0639\u0647.  \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7p8laty6z37x0q1g6az4.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 6\" loading=\"lazy\" width=\"800\" height=\"482\" title=\"\"><\/p>\n<p>\u0646\u0627\u0645\u060c \u0642\u06cc\u0645\u062a \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnzom3ptlz8t1rh9dtt1k.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 7\" loading=\"lazy\" width=\"800\" height=\"353\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0628\u0631\u06af\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a\u060c \u0645\u062c\u0648\u0632\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u062f \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0631\u0627 \u067e\u0633 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0641\u0642\u0637 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F37cqr8s0crtcttocjagk.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 8\" loading=\"lazy\" width=\"800\" height=\"304\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c ID \u067e\u0631\u0648\u0698\u0647\u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u0645\u062c\u0645\u0648\u0639\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>.env.local<\/code><\/strong>  \u0641\u0627\u06cc\u0644.  \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0639\u062a\u0628\u0627\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0627\u06cc\u0645\u0646 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647 \u0647\u0631 \u0645\u0642\u062f\u0627\u0631 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637 \u0622\u0646 \u0627\u0631\u062c\u0627\u0639 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>NEXT_PUBLIC_PROJECT_ID=<your_project_id>\nNEXT_PUBLIC_DB_ID=<your_database_id>\nNEXT_PUBLIC_PRODUCTS_COLLECTION_ID=<your_db_collection_id>\n<\/your_db_collection_id><\/your_database_id><\/your_project_id><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Appwrite_Storage\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Appwrite Storage<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <code>Storage<\/code> \u0627\u0632 \u0645\u0646\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0648 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0633\u0637\u0644 \u062c\u062f\u06cc\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062c\u0627\u06cc \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb84t9mk3k0wrkgiy4uca.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 9\" loading=\"lazy\" width=\"800\" height=\"309\" title=\"\"><\/p>\n<p>\u0632\u06cc\u0631 <code>Settings<\/code> \u0628\u0631\u06af\u0647\u060c \u0645\u062c\u0648\u0632\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0647 \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzi3iozkaera7fohkwanm.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 10\" loading=\"lazy\" width=\"800\" height=\"275\" title=\"\"><\/p>\n<p>\u0641\u0631\u0645\u062a \u0647\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0642\u0627\u0628\u0644 \u0642\u0628\u0648\u0644 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0647\u0633\u062a\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <strong><code>.jpg<\/code><\/strong>  \u0648 <strong><code>.png<\/code><\/strong>  \u0641\u0631\u0645\u062a \u0647\u0627\u06cc \u0641\u0627\u06cc\u0644<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzxqpoq5dcpokkvdcsce.png\" alt=\"\u0627\u067e \u0631\u0627\u06cc\u062a 11\" loading=\"lazy\" width=\"800\" height=\"212\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0634\u0646\u0627\u0633\u0647 \u0633\u0637\u0644 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0622\u0646 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>.env.local<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>NEXT_PUBLIC_BUCKET_ID=<your_bucket_id>\n<\/your_bucket_id><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!  \u0634\u0645\u0627 Appwrite \u0631\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u06cc\u062f.  \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0622\u0646 \u062a\u0639\u0627\u0645\u0644 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D9%86%D8%AC%D8%A7%D9%85_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_CRUD_%D8%A8%D8%A7_Appwrite\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0628\u0627 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f\u060c \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0648 \u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 Appwrite \u0631\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a.  \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u062e\u0631\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 Admin \u0628\u0627\u06cc\u062f \u0645\u062c\u0648\u0632 \u0627\u0636\u0627\u0641\u0647 \u0648 \u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <strong><code>utils.ts<\/code><\/strong>  \u0641\u0627\u06cc\u0644 \u062f\u0631 Next.js <strong><code>app<\/code><\/strong>  \u067e\u0648\u0634\u0647  \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u062d\u0627\u0648\u06cc \u062a\u0645\u0627\u0645 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Appwrite \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0636\u0631\u0648\u0631\u06cc \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>app\n<span class=\"nb\">touch <\/span>utils.ts\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B0%D8%AE%DB%8C%D8%B1%D9%87_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA_%D8%AF%D8%B1_Appwrite\"><\/span>\n<p>  \u0630\u062e\u06cc\u0631\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0631 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0647 \u06cc\u0627\u062f \u0628\u06cc\u0627\u0648\u0631\u06cc\u062f \u06a9\u0647 <code>products<\/code> \u0645\u062c\u0645\u0648\u0639\u0647 \u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u0631\u062f: \u0646\u0627\u0645\u060c \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0642\u06cc\u0645\u062a.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0647\u0646\u06af\u0627\u0645 \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f\u060c URL \u0648 \u0634\u0646\u0627\u0633\u0647 \u0622\u0646 \u0631\u0627 \u0627\u0632 \u067e\u0627\u0633\u062e \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 URL \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0646\u0627\u0633\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644 \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0637\u0639\u0647 \u06a9\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"nx\">storage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/app\/appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ID<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">createProduct<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">productTitle<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">productPrice<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">productImage<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span>\n<span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb upload the image<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">storage<\/span><span class=\"p\">.<\/span><span class=\"nf\">createFile<\/span><span class=\"p\">(<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_BUCKET_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">ID<\/span><span class=\"p\">.<\/span><span class=\"nf\">unique<\/span><span class=\"p\">(),<\/span>\n            <span class=\"nx\">productImage<\/span>\n        <span class=\"p\">);<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb get the image's URL<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">file_url<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`https:\/\/cloud.appwrite.io\/v1\/storage\/buckets\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_BUCKET_ID<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/files\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">$id<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/view?project=<\/span><span class=\"p\">${<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_PROJECT_ID<\/span><span class=\"p\">}<\/span><span class=\"s2\">&amp;mode=admin`<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb add the product to the database<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">createDocument<\/span><span class=\"p\">(<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_DB_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_PRODUCTS_COLLECTION_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">$id<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/\ud83d\udc49\ud83c\udffb use the image's ID<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">productTitle<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">price<\/span><span class=\"p\">:<\/span> <span class=\"nx\">productPrice<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">file_url<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">);<\/span>\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Product created successfully<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0636\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0627\u0628\u0631\u06cc Appwrite \u0622\u067e\u0644\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 URL \u062f\u0642\u06cc\u0642 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0646\u0627\u0633\u0647 \u0633\u0637\u0644\u060c \u0634\u0646\u0627\u0633\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0634\u0646\u0627\u0633\u0647 \u067e\u0631\u0648\u0698\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u067e\u0644\u0648\u062f \u0634\u062f\u060c \u0634\u0646\u0627\u0633\u0647 \u0622\u0646 \u062f\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0648 \u0627\u0631\u062c\u0627\u0639 \u0622\u0633\u0627\u0646 \u0641\u0631\u0627\u0647\u0645 \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7%D8%B2%DB%8C%D8%A7%D8%A8%DB%8C_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA_%D8%A7%D8%B2_Appwrite\"><\/span>\n<p>  \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 Appwrite\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 React \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <strong><code>useEffect<\/code><\/strong>  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f\u060c \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">fetchProducts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">products<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">listDocuments<\/span><span class=\"p\">(<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_DB_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_PRODUCTS_COLLECTION_ID<\/span><span class=\"o\">!<\/span>\n        <span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">products<\/span><span class=\"p\">.<\/span><span class=\"nx\">documents<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">return<\/span> <span class=\"nx\">products<\/span><span class=\"p\">.<\/span><span class=\"nx\">documents<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0631\u0627 <code>fetchProducts<\/code> \u062a\u0627\u0628\u0639 \u062a\u0645\u0627\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0627\u062e\u0644 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f <code>products<\/code> \u0645\u062c\u0645\u0648\u0639\u0647.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AD%D8%B0%D9%81_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA_%D8%A7%D8%B2_Appwrite\"><\/span>\n<p>  \u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062f\u0645\u06cc\u0646 \u0646\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0634\u0646\u0627\u0633\u0647 \u0622\u0646 \u062d\u0630\u0641 \u06a9\u0646\u0646\u062f.  \u0631\u0627 <strong><code>deleteProduct<\/code><\/strong>  \u062a\u0627\u0628\u0639 \u0634\u0646\u0627\u0633\u0647 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u0645\u062d\u0635\u0648\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0622\u0646 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc ID \u06cc\u06a9\u0633\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">deleteProduct<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">deleteDocument<\/span><span class=\"p\">(<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_DB_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_PRODUCTS_COLLECTION_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">id<\/span>\n        <span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">storage<\/span><span class=\"p\">.<\/span><span class=\"nf\">deleteFile<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_BUCKET_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span> <span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Product deleted successfully<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A8%D8%A7_Appwrite\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627 Appwrite<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\u060c \u0631\u0648\u0634 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a GitHub \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0633\u0627\u0628 GitHub \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0648\u0646\u062f\u060c \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0622\u0646\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>Sign in<\/code> \u062f\u06a9\u0645\u0647.  \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 GitHub \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u062c\u0648\u0632 \u06cc\u0627 \u0645\u062c\u0648\u0632 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u062f\u0647\u062f \u0648 \u0633\u067e\u0633 \u0648\u0627\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">account<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">OAuthProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleGoogleSignIn<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nf\">createOAuth2Session<\/span><span class=\"p\">(<\/span>\n            <span class=\"nx\">OAuthProvider<\/span><span class=\"p\">.<\/span><span class=\"nx\">Github<\/span><span class=\"p\">,<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:3000<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:3000\/login<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062f\u0645\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0648\u0627\u0631\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0634\u0648\u0646\u062f.  Appwrite \u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0627\u0632\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u0627\u0639\u062a\u0628\u0627\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">account<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/app\/appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleLogin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FormEvent<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nf\">createEmailPasswordSession<\/span><span class=\"p\">(<\/span><span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">password<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Welcome back \ud83c\udf89`<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/admin\/dashboard<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Invalid credentials \u274c<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Appwrite \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u06cc\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u06af\u0631 \u0641\u0642\u0637 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0634\u062f\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u067e\u0631\u062f\u0627\u062e\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.  \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06cc\u0627 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c null \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">account<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/app\/appwrite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">checkAuthStatus<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">request<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">();<\/span>\n            <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"nf\">checkAuthStatus<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_Stripe_%D8%A8%D9%87_Nextjs\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u0631\u062f\u0627\u062e\u062a \u067e\u0631\u062f\u0627\u062e\u062a Stripe \u0628\u0647 Next.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0646\u062d\u0648\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u067e\u0631\u062f\u0627\u062e\u062a Stripe \u0631\u0627 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a.  Stripe \u06cc\u06a9 \u067e\u0644\u062a \u0641\u0631\u0645 \u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062d\u0628\u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0631\u0648\u0634 \u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a \u06cc\u06a9\u0628\u0627\u0631\u0647 \u0648 \u062a\u06a9\u0631\u0627\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 Stripe \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06a9\u0627\u0646\u062a \u062d\u0627\u0644\u062a \u062a\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnibs7bxb09i167mxm918.png\" alt=\"\u0631\u0627\u0647 \u0631\u0627\u0647 1\" loading=\"lazy\" width=\"800\" height=\"151\" title=\"\"><\/p>\n<p>\u0631\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f <code>Developers<\/code> \u0627\u0632 \u0645\u0646\u0648\u06cc \u0628\u0627\u0644\u0627 \u0648 \u06a9\u0644\u06cc\u062f \u0645\u062e\u0641\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0646\u0648\u06cc \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fup8757knbquc3k0577ps.png\" alt=\"\u0631\u0627\u0647 \u0631\u0627\u0647 2\" loading=\"lazy\" width=\"800\" height=\"245\" title=\"\"><\/p>\n<p>\u06a9\u0644\u06cc\u062f \u0645\u062e\u0641\u06cc Stripe \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <code>.env.local<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">STRIPE_SECRET_KEY<\/span><span class=\"o\">=<\/span><your_secret_key>\n<\/your_secret_key><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Stripe Node.js SDK \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>stripe\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0639\u062f\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>api<\/code> \u067e\u0648\u0634\u0647 \u062f\u0631 Next.js <code>app<\/code> \u067e\u0648\u0634\u0647  \u0631\u0627 <code>api<\/code> \u067e\u0648\u0634\u0647 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc API \u0648 \u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>app\n<span class=\"nb\">mkdir <\/span>api\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>checkout<\/code> \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 a <code>checkout<\/code> \u067e\u0648\u0634\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 <code>api<\/code> \u067e\u0648\u0634\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>api\n<span class=\"nb\">mkdir <\/span>checkout <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">cd <\/span>checkout\n<span class=\"nb\">touch <\/span>route.ts\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>route.ts<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextRequest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">NextResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Stripe<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stripe<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">stripe<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Stripe<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">STRIPE_SECRET_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextRequest<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb accepts the customer's cart<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">cart<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb creates a checkout session<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">session<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">stripe<\/span><span class=\"p\">.<\/span><span class=\"nx\">checkout<\/span><span class=\"p\">.<\/span><span class=\"nx\">sessions<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n            <span class=\"na\">payment_method_types<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">card<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n            <span class=\"na\">line_items<\/span><span class=\"p\">:<\/span> <span class=\"nx\">cart<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"na\">product<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Product<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n                <span class=\"na\">price_data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                    <span class=\"na\">currency<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">usd<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                    <span class=\"na\">product_data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">product<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n                    <span class=\"p\">},<\/span>\n                    <span class=\"na\">unit_amount<\/span><span class=\"p\">:<\/span> <span class=\"nx\">product<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">100<\/span><span class=\"p\">,<\/span>\n                <span class=\"p\">},<\/span>\n                <span class=\"na\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">})),<\/span>\n            <span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">payment<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">cancel_url<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`http:\/\/localhost:3000\/?canceled=true`<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">success_url<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`http:\/\/localhost:3000?success=true&amp;session_id={CHECKOUT_SESSION_ID}`<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">});<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb return the session URL<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">({<\/span> <span class=\"na\">session<\/span><span class=\"p\">:<\/span> <span class=\"nx\">session<\/span><span class=\"p\">.<\/span><span class=\"nx\">url<\/span> <span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">({<\/span> <span class=\"nx\">err<\/span> <span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">500<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc POST \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f.  \u06cc\u06a9 \u062c\u0644\u0633\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 URL \u062c\u0644\u0633\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<p>\u0631\u0627 <strong><code>cancel_url<\/code><\/strong>  \u0648 <strong><code>success_url<\/code><\/strong>  \u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u062f \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u06cc\u0627 \u0644\u063a\u0648 \u067e\u0631\u062f\u0627\u062e\u062a\u060c \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u06a9\u062c\u0627 \u0647\u062f\u0627\u06cc\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0622\u062f\u0631\u0633 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f <code>\/checkout<\/code> \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0635\u0645\u06cc\u0645 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631\u060c \u0628\u0631\u0627\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u067e\u0631\u062f\u0627\u062e\u062a \u06a9\u0646\u062f\u060c \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">processPayment<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">cart<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Product<\/span><span class=\"p\">[])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb saves cart to local storage<\/span>\n            <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cart<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">cart<\/span><span class=\"p\">));<\/span>\n            <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb sends cart to \/checkout route<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">request<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/checkout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">POST<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">cart<\/span><span class=\"p\">),<\/span>\n                <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Content-Type<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">application\/json<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n            <span class=\"p\">});<\/span>\n            <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb retrieves the session URL<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">session<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n            <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb redirects the user to the checkout page<\/span>\n            <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nf\">assign<\/span><span class=\"p\">(<\/span><span class=\"nx\">session<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb redirects unauthenticated users<\/span>\n            <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/login<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0645\u062d\u0644\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0645\u06cc \u0641\u0631\u0633\u062a\u062f\u060c \u0633\u067e\u0633 \u067e\u0627\u0633\u062e (URL \u062c\u0644\u0633\u0647) \u0631\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631 backend \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a Stripe \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi5hokf2qyqyey3kwsg9x.gif\" alt=\"\u0631\u0627\u0647 \u0631\u0627\u0647 3\" loading=\"lazy\" width=\"800\" height=\"427\" data-animated=\"true\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%B3%D8%A7%D9%84_%D8%A7%D8%B9%D9%84%D8%A7%D9%86_%D9%87%D8%A7%DB%8C_%D8%AF%D8%B1%D9%88%D9%86_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%DB%8C_%D9%88_%D8%A7%DB%8C%D9%85%DB%8C%D9%84%DB%8C_%D8%A8%D8%A7_Novu\"><\/span>\n<p>  \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0648 \u0627\u06cc\u0645\u06cc\u0644\u06cc \u0628\u0627 Novu<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Novu \u0627\u0648\u0644\u06cc\u0646 \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u0627\u0637\u0644\u0627\u0639 \u0631\u0633\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 API \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u06cc \u0645\u062a\u0639\u062f\u062f \u0627\u0632 \u062c\u0645\u0644\u0647 In-App\u060c Push\u060c Email\u060c SMS \u0648 Chat \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 Novu \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc Novu \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> @novu\/node @novu\/echo @novu\/notification-center\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0631\u06cc\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u0646\u062f\u060c \u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u062a\u0623\u06cc\u06cc\u062f \u067e\u0631\u062f\u0627\u062e\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0645\u062f\u06cc\u0631 \u0646\u06cc\u0632 \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 Novu \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0635\u0644\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 Novu\u060c \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <code>API Keys<\/code> \u0627\u0632 \u0645\u0646\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9\u06cc.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjhehx7s45x180zpir1ti.png\" alt=\"\u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f 1\" loading=\"lazy\" width=\"800\" height=\"282\" title=\"\"><\/p>\n<p>\u0628\u0639\u062f\u060c \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Novu \u062e\u0648\u062f \u0628\u0631\u06af\u0631\u062f\u06cc\u062f\u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <code>Integrations Store<\/code> \u0627\u0632 \u0645\u0646\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc\u060c \u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0628\u0627\u06cc\u062f \u06a9\u0644\u06cc\u062f API \u0648 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u062c\u0627\u06cc\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff03vb6nftyi8g790vg7m.png\" alt=\"\u062c\u062f\u06cc\u062f 1\" loading=\"lazy\" width=\"800\" height=\"423\" title=\"\"><\/p>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <strong>\u062a\u0646\u0638\u06cc\u0645\u0627\u062a<\/strong> \u0627\u0632 \u0645\u0646\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0648 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>Novu API<\/code>\u06a9\u0644\u06cc\u062f \u0648 <code>App ID<\/code> \u062f\u0631\u0648\u0646 \u06cc\u06a9 <strong><code>.env.local<\/code><\/strong>  \u0645\u0637\u0627\u0628\u0642 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062e\u0648\u062f \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>subscriber ID<\/code> \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u062f &#8211; \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627 \u0627\u0632 <code>Subscribers<\/code> \u0628\u062e\u0634.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">NOVU_API_KEY<\/span><span class=\"o\">=<\/span><your_api_for_next_server>\n<span class=\"nv\">NEXT_PUBLIC_NOVU_API_KEY<\/span><span class=\"o\">=<\/span><your_api_for_next_client>\n\n<span class=\"nv\">NEXT_PUBLIC_NOVU_APP_ID<\/span><span class=\"o\">=<\/span><your_api_id>\n\n<span class=\"nv\">NOVU_SUBSCRIBER_ID<\/span><span class=\"o\">=<\/span><your_api_for_next_server>\n<span class=\"nv\">NEXT_PUBLIC_NOVU_SUBSCRIBER_ID<\/span><span class=\"o\">=<\/span><your_api_for_client>\n<\/your_api_for_client><\/your_api_for_next_server><\/your_api_id><\/your_api_for_next_client><\/your_api_for_next_server><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvoeofvvtv88pex9rpr1s.png\" alt=\"\u062c\u062f\u06cc\u062f 2\" loading=\"lazy\" width=\"800\" height=\"326\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0632\u0646\u06af \u0646\u0648\u062a\u06cc\u0641\u06cc\u06a9\u06cc\u0634\u0646 Novu \u0631\u0627 \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062f\u0645\u06cc\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">NovuProvider<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">PopoverNotificationCenter<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">NotificationBell<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@novu\/notification-center<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">AdminNav<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">NovuProvider<\/span>\n            <span class=\"na\">subscriberId<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_NOVU_SUBSCRIBER_ID<\/span><span class=\"o\">!<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">applicationIdentifier<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_NOVU_APP_ID<\/span><span class=\"o\">!<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">PopoverNotificationCenter<\/span> <span class=\"na\">colorScheme<\/span><span class=\"p\">=<\/span><span class=\"s\">'light'<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"si\">{<\/span><span class=\"p\">({<\/span> <span class=\"nx\">unseenCount<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">NotificationBell<\/span> <span class=\"na\">unseenCount<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">unseenCount<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span>\n            <span class=\"p\"\/><span class=\"nc\">PopoverNotificationCenter<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">NovuProvider<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm62ft87ue9orse2yww9z.png\" alt=\"\u062f\u0627\u0634\u0628\u0648\u0631\u062f\" loading=\"lazy\" width=\"800\" height=\"365\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1_%D8%A7%D8%B9%D9%84%D8%A7%D9%86_%D8%A8%D8%A7_Novu_Echo\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0628\u0627 Novu Echo<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Novu \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u06a9\u062f \u0627\u0648\u0644 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u06cc\u0645\u06cc\u0644\u060c \u067e\u06cc\u0627\u0645\u06a9\u060c \u0642\u0627\u0644\u0628 \u0686\u062a \u0648 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u0645\u062d\u062a\u0648\u0627\u060c \u0645\u0627\u0646\u0646\u062f React Email \u0648 MJML \u0631\u0627 \u062f\u0631 Novu \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0648 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u0639\u0644\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0627 Novu \u0648 \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0648 \u0627\u06cc\u0645\u06cc\u0644\u06cc \u0628\u0627 Novu \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<p>React Email \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \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>react-email @react-email\/components <span class=\"nt\">-E<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 package.json \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.  \u0631\u0627 <code>--dir<\/code> \u067e\u0631\u0686\u0645 \u0628\u0647 React Email \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0631\u0648\u0698\u0647 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u0646\u062f \u0645\u06cc\u200c\u062f\u0647\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 <code>src\/emails<\/code> \u067e\u0648\u0634\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"email\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"email dev --dir src\/emails\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0639\u062f\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>emails<\/code> \u067e\u0648\u0634\u0647 \u062d\u0627\u0648\u06cc \u06cc\u06a9 <code>email.tsx<\/code> \u062f\u0631 Next.js <code>app<\/code> \u067e\u0648\u0634\u0647 \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">Body<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Column<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Container<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Head<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Heading<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Hr<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Html<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Preview<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Section<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">Row<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">render<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@react-email\/components<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">EmailTemplate<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span>\n    <span class=\"nx\">message<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">subject<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">message<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">subject<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Html<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Head<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Preview<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">subject<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nc\">Preview<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Body<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">main<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Container<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">container<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Section<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">header<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nc\">Row<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nc\">Column<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">headerContent<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                            <span class=\"p\">&lt;<\/span><span class=\"nc\">Heading<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">headerContentTitle<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">subject<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nc\">Heading<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\"\/><span class=\"nc\">Column<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nc\">Row<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nc\">Section<\/span><span class=\"p\">&gt;<\/span>\n\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Section<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">content<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">paragraph<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Hey <span class=\"si\">{<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span>,<span class=\"p\"\/><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">paragraph<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">message<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nc\">Section<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Container<\/span><span class=\"p\">&gt;<\/span>\n\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Section<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">footer<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">footerText<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                    You<span class=\"ni\">'<\/span>re receiving this email because your subscribed to Newsletter\n                    App\n                <span class=\"p\"\/><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Hr<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">footerDivider<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">footerAddress<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">strong<\/span><span class=\"p\">&gt;<\/span>Novu Store<span class=\"p\"\/><span class=\"nt\">strong<\/span><span class=\"p\">&gt;<\/span>, <span class=\"ni\">\u00a9<\/span><span class=\"si\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">'https:\/\/novu.co'<\/span><span class=\"p\">&gt;<\/span>Novu<span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Section<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">Body<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nc\">Html<\/span><span class=\"p\">&gt;<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">renderEmail<\/span><span class=\"p\">(<\/span><span class=\"nx\">inputs<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">message<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">subject<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nf\">render<\/span><span class=\"p\">(&lt;<\/span><span class=\"nc\">EmailTemplate<\/span> <span class=\"si\">{<\/span><span class=\"p\">...<\/span><span class=\"nx\">inputs<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">main<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#f3f3f5<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fontFamily<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">HelveticaNeue,Helvetica,Arial,sans-serif<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">headerContent<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">20px 30px 15px<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">headerContentTitle<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#fff<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">27px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fontWeight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bold<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">lineHeight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">27px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">paragraph<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">15px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">lineHeight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">21px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#3c3f44<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">divider<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">30px 0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">container<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">680px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">maxWidth<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">100%<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0 auto<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#ffffff<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">footer<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">680px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">maxWidth<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">100%<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">32px auto 0 auto<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0 30px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">content<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">30px 30px 40px 30px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">header<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">borderRadius<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">5px 5px 0 0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">display<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">flex<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">flexDireciont<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">column<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#2b2d6e<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">footerDivider<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"p\">...<\/span><span class=\"nx\">divider<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">borderColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#d6d8db<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">footerText<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">12px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">lineHeight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">15px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#9199a1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">footerLink<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">display<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">inline-block<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#9199a1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">textDecoration<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">underline<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">12px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">marginRight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">10px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">marginBottom<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">marginTop<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">8px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">footerAddress<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">4px 0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">12px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">lineHeight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">15px<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#9199a1<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Email \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0644\u0647\u0627\u0645\u200c\u0647\u0627 \u06cc\u0627 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u067e\u06cc\u0627\u0645\u060c \u0645\u0648\u0636\u0648\u0639 \u0648 \u0646\u0627\u0645 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0639\u0646\u0627\u0635\u0631 \u067e\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062f\u0648\u06cc\u062f <code>npm run email<\/code> \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0644\u06af\u0648.<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0628\u0627 Novu Echo \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u0645.  \u0627\u0628\u062a\u062f\u0627 \u0633\u0631\u0648\u0631 React Email \u0631\u0627 \u0628\u0628\u0646\u062f\u06cc\u062f \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  Novu Dev Studio \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx novu-labs@latest <span class=\"nb\">echo<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>echo<\/code> \u067e\u0648\u0634\u0647 \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 <code>client.ts<\/code> \u062f\u0631 \u067e\u0648\u0634\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Echo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@novu\/echo<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">renderEmail<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/app\/emails\/email<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">EchoProps<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">step<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">payload<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">subject<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">message<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">totalAmount<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">echo<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Echo<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">apiKey<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_NOVU_API_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">devModeBypassAuthentication<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">development<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"nx\">echo<\/span><span class=\"p\">.<\/span><span class=\"nf\">workflow<\/span><span class=\"p\">(<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">novu-store<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">async <\/span><span class=\"p\">({<\/span> <span class=\"nx\">step<\/span><span class=\"p\">,<\/span> <span class=\"nx\">payload<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">EchoProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb in-app notification step<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">step<\/span><span class=\"p\">.<\/span><span class=\"nf\">inApp<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">notify-admin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/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=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">payload<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\"> just made a new purchase of <\/span><span class=\"p\">${<\/span><span class=\"nx\">payload<\/span><span class=\"p\">.<\/span><span class=\"nx\">totalAmount<\/span><span class=\"p\">}<\/span><span class=\"s2\"> \ud83c\udf89`<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">};<\/span>\n        <span class=\"p\">});<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb email notification step<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">step<\/span><span class=\"p\">.<\/span><span class=\"nf\">email<\/span><span class=\"p\">(<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">email-customer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"k\">async <\/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=\"na\">subject<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">payload<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">payload<\/span><span class=\"p\">?.<\/span><span class=\"nx\">subject<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">No Subject<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n                    <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nf\">renderEmail<\/span><span class=\"p\">(<\/span><span class=\"nx\">payload<\/span><span class=\"p\">),<\/span>\n                <span class=\"p\">};<\/span>\n            <span class=\"p\">},<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"na\">inputSchema<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                    <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">object<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                    <span class=\"na\">properties<\/span><span class=\"p\">:<\/span> <span class=\"p\">{},<\/span>\n                <span class=\"p\">},<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">);<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"na\">payloadSchema<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">object<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">properties<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                    <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                    <span class=\"na\">default<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Congratulations! Your purchase was successful! \ud83c\udf89<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                <span class=\"p\">},<\/span>\n                <span class=\"na\">subject<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">default<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Message from Novu Store<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n                <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">default<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">User<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n                <span class=\"na\">totalAmount<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">default<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n            <span class=\"p\">},<\/span>\n            <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">subject<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">totalAmount<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n            <span class=\"na\">additionalProperties<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u06cc\u06a9 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631\u06cc \u0646\u0648\u062a\u06cc\u0641\u06cc\u06a9\u06cc\u0634\u0646 Novu \u0631\u0627 \u0628\u0627 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>novu-store<\/code>\u060c \u06a9\u0647 \u0628\u0627\u0631\u06cc \u062d\u0627\u0648\u06cc \u0645\u0648\u0636\u0648\u0639 \u0627\u06cc\u0645\u06cc\u0644\u060c \u067e\u06cc\u0627\u0645\u060c \u0646\u0627\u0645 \u0645\u0634\u062a\u0631\u06cc \u0648 \u06a9\u0644 \u0645\u0628\u0644\u063a \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f. <\/p>\n<p>\u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062f\u0648 \u0645\u0631\u062d\u0644\u0647 \u062f\u0627\u0631\u062f: \u0627\u0639\u0644\u0627\u0646 \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0648 \u0627\u06cc\u0645\u06cc\u0644.  \u0627\u0639\u0644\u0627\u0646 \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0632\u0646\u06af \u0627\u0639\u0644\u0627\u0646 \u0628\u0647 \u0645\u062f\u06cc\u0631 \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u067e\u06cc\u0627\u0645\u06cc \u0628\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0645\u0634\u062a\u0631\u06cc \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0645\u0633\u06cc\u0631 API \u0628\u0631\u0627\u06cc Novu Echo \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u062f\u0627\u062e\u0644 <code>api<\/code> \u067e\u0648\u0634\u0647\u060c \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>email<\/code> \u067e\u0648\u0634\u0647 \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 <code>route.ts<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">serve<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@novu\/echo\/next<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">echo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/app\/echo\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">GET<\/span><span class=\"p\">,<\/span> <span class=\"nx\">POST<\/span><span class=\"p\">,<\/span> <span class=\"nx\">PUT<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">serve<\/span><span class=\"p\">({<\/span> <span class=\"na\">client<\/span><span class=\"p\">:<\/span> <span class=\"nx\">echo<\/span> <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u062c\u0631\u0627 \u06a9\u0646 <code>npx novu-labs@latest echo<\/code> \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0634\u0645\u0627  \u0628\u0647\u200c\u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 Novu Dev Studio \u0631\u0627 \u0628\u0627\u0632 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 Cloud \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fed2sl38m7zrlgjoj4a6y.gif\" alt=\"\u062c\u062f\u06cc\u062f 3\" loading=\"lazy\" width=\"800\" height=\"427\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0631\u0627 <code>Sync to Cloud<\/code> \u062f\u06a9\u0645\u0647 \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062f\u0631\u0628\u0627\u0631\u0647 \u0646\u062d\u0648\u0647 \u0627\u0646\u062a\u0642\u0627\u0644 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0628\u0647 Novu Cloud \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ch8ba7y9klyudmmv9jz.png\" alt=\"\u062c\u062f\u06cc\u062f 4\" loading=\"lazy\" width=\"800\" height=\"329\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \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.  \u0627\u06cc\u0646 \u06cc\u06a9 URL \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u06cc\u06a9 \u062a\u0648\u0646\u0644 \u0645\u062d\u0644\u06cc \u0628\u06cc\u0646 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0634\u0645\u0627 \u0648 \u0645\u062d\u06cc\u0637 \u0627\u0628\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx localtunnel <span class=\"nt\">--port<\/span> 3000\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u06cc\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc Echo API \u062e\u0648\u062f \u062f\u0631 \u0642\u0633\u0645\u062a Echo Endpoint \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f <code>Create Diff<\/code> \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>https:\/\/<local_tunnel_url>\/<echo_api_endpoint class=\"o\">(\/api\/email<span class=\"o\">)&gt;<\/span> \n<\/echo_api_endpoint><\/local_tunnel_url><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!  \u0634\u0645\u0627 \u0628\u0647 \u062a\u0627\u0632\u06af\u06cc \u06cc\u06a9 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 Novu \u0631\u0627 \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6bdugs6g15y1e7xeixux.png\" alt=\"\u062c\u062f\u06cc\u062f 5\" loading=\"lazy\" width=\"800\" height=\"388\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u067e\u0631\u062f\u0627\u062e\u062a \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631\u060c \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>api\/send<\/code> \u0645\u0633\u06cc\u0631 \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextRequest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">NextResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Novu<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@novu\/node<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">novu<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Novu<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NOVU_API_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextRequest<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">totalAmount<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\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=\"k\">await<\/span> <span class=\"nx\">novu<\/span><span class=\"p\">.<\/span><span class=\"nf\">trigger<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">novu-store<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">to<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">subscriberId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NOVU_SUBSCRIBER_ID<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">firstName<\/span><span class=\"p\">:<\/span> <span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">payload<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">totalAmount<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">subject<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Purchase Notification from Novu Store`<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Your purchase of <\/span><span class=\"p\">${<\/span><span class=\"nx\">totalAmount<\/span><span class=\"p\">}<\/span><span class=\"s2\"> was successful! \ud83c\udf89`<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Purchase Completed!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">novu<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span> <span class=\"p\">},<\/span>\n            <span class=\"na\">success<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0627\u06cc\u0645\u06cc\u0644\u060c \u0646\u0627\u0645 \u0648 \u06a9\u0644 \u0645\u0628\u0644\u063a \u067e\u0631\u062f\u0627\u062e\u062a\u06cc \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0645\u06cc\u200c\u067e\u0630\u06cc\u0631\u062f \u0648 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 Novu \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u067e\u0633 \u0627\u0632 \u0645\u0648\u0641\u0642\u06cc\u062a\u200c\u0622\u0645\u06cc\u0632 \u067e\u0631\u062f\u0627\u062e\u062a \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0627\u06a9\u0646\u0648\u0646 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647 \u0627\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f: <\/p>\n<ul>\n<li>\u0686\u0646\u062f\u06cc\u0646 \u0631\u0648\u0634 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0631\u0627 \u0627\u0632 Appwrite \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0628\u0627 React Email \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627 Novu \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p>\u0627\u06af\u0631 \u0645\u0634\u062a\u0627\u0642\u0627\u0646\u0647 \u0645\u0646\u062a\u0638\u0631 \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f\u060c Novu \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u0645\u0627 \u0627\u0633\u062a.  \u0628\u0627 Novu \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0646\u0627\u0644 \u0627\u0639\u0644\u0627\u0646 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0686\u062a\u060c \u067e\u06cc\u0627\u0645\u06a9\u060c \u0627\u06cc\u0645\u06cc\u0644\u060c \u0641\u0634\u0627\u0631 \u0648 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646\u200c\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u06a9\u062f \u0645\u0646\u0628\u0639 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a:<br \/>https:\/\/github.com\/novuhq\/ecom-store-with-nextjs-appwrite-novu-and-stripe<\/p>\n<p>\u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 Stripe \u067e\u0631\u062f\u0627\u062e\u062a \u06a9\u0646\u0646\u062f. \u067e\u0633 \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632\u060c \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0648 \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 Admin \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f. \u06a9\u0627\u0631\u0628\u0631 Admin \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":65168,"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-65167","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\/65167","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=65167"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/65167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/65168"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=65167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=65167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=65167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}