{"id":107249,"date":"2025-05-02T20:08:16","date_gmt":"2025-05-02T15:38:16","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/"},"modified":"2025-05-02T20:08:16","modified_gmt":"2025-05-02T15:38:16","slug":"%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/","title":{"rendered":"\u0686\u06af\u0648\u0646\u0647 Next.js \u0631\u0627 \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u062b\u0627\u0628\u062a \u06a9\u0631\u062f\u06cc\u0645: \u0627\u0633\u0631\u0627\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc DI \u0648 \u062a\u0645\u06cc\u0632 \u0627\u0632 \u062a\u0648\u0644\u06cc\u062f"},"content":{"rendered":"<div data-article-id=\"2454009\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/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\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C\" >\u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D8%A7%D9%84%D8%B2%D8%A7%D9%85\" >\u0627\u0644\u0632\u0627\u0645<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%DB%8C%DA%A9_%D8%AF%DB%8C%DA%AF_%D8%A8%D8%AE%D8%A7%D8%B1_%DA%A9%D8%A7%D9%85%D9%84_NextJS_%D8%8C_%D8%A8%D8%B1_%D8%A7%D8%B3%D8%A7%D8%B3_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AA%D9%85%DB%8C%D8%B2_%D8%8C_MVVM_%D9%88_%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%86%D9%88%DB%8C%D8%B3%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\" >\u06cc\u06a9 \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u06a9\u0627\u0645\u0644 NextJS \u060c \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0639\u0645\u0627\u0631\u06cc \u062a\u0645\u06cc\u0632 \u060c MVVM \u0648 \u0627\u0644\u06af\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc.<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C\" >\u0641\u0647\u0631\u0633\u062a \u0645\u062d\u062a\u0648\u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C-2\" >\u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D8%A7%D9%86%DA%AF%DB%8C%D8%B2%D9%87\" >\u0627\u0646\u06af\u06cc\u0632\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#usecase\" >usecase<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D8%AC%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D8%A7_%D8%A7%D8%B2_DI_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%DB%8C%D9%85\" >\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0632 DI \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%DA%A9%D9%84%DB%8C%D8%AF_DI_%D8%A7%D8%AA%D8%B5%D8%A7%D9%84_%D9%85%D8%A8%D8%AA%D9%86%DB%8C_%D8%A8%D8%B1_%D8%B1%D8%A7%D8%A8%D8%B7\" >\u06a9\u0644\u06cc\u062f DI: \u0627\u062a\u0635\u0627\u0644 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0627\u0628\u0637<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%85%D8%A7%DA%98%D9%88%D9%84\" >\u0645\u0627\u0698\u0648\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/a><\/li><\/ul><\/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\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%84%D8%A7%DB%8C%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\" >\u0644\u0627\u06cc\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%DA%A9%D9%84%DB%8C%D8%AF_VM\" >\u06a9\u0644\u06cc\u062f VM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%85%D8%A7%DA%98%D9%88%D9%84_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0645\u0627\u0698\u0648\u0644 \u0628\u0631\u0646\u0627\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%D9%86%D8%AF%D9%87\" >\u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-2\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-next-js-%d8%b1%d8%a7-%d8%af%d8%b1-%d9%85%d9%82%db%8c%d8%a7%d8%b3-%d8%ab%d8%a7%d8%a8%d8%aa-%da%a9%d8%b1%d8%af%db%8c%d9%85-%d8%a7%d8%b3%d8%b1%d8%a7%d8%b1-%d9%85%d8%b9\/#%D9%BE%D8%A7%DB%8C%D8%A7%D9%86\" >\u067e\u0627\u06cc\u0627\u0646<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C\"><\/span>\n<p>  \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc (DI) \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u062d\u062b \u0648 \u06af\u0641\u062a\u06af\u0648\u062a\u0631\u06cc\u0646 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0633\u062a. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0646\u0638\u0631\u0627\u062a \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0627\u0632 \u0646\u0638\u0631 \u062c\u0647\u0627\u0646\u06cc \u0633\u0648\u062f\u0645\u0646\u062f \u0627\u0633\u062a \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a \u060c \u06cc\u06a9 \u0686\u06cc\u0632 \u0645\u0633\u0644\u0645 \u0627\u0633\u062a: DI \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f \u0627\u06af\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 &#8220;\u0686\u06a9\u0634 \u0637\u0644\u0627\u06cc\u06cc&#8221; \u0631\u0641\u062a\u0627\u0631 \u0646\u0634\u0648\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0632 \u0622\u0646 \u060c \u0645\u0627\u0646\u0646\u062f \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0648\u0631\u06a9\u0648\u0631\u0627\u0646\u0647 \u0647\u0631 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u062c\u0627\u06cc \u06a9\u062f \u067e\u0627\u06a9 \u062a\u0631 \u0628\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627\u06cc \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0645\u0646\u062c\u0631 \u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u060c \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 DI \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0624\u062b\u0631 \u062f\u0631 Next.js \u0627\u0639\u0645\u0627\u0644 \u06a9\u0631\u062f \u0648 \u062a\u0639\u0627\u062f\u0644 \u0645\u0646\u0627\u0633\u0628 \u0628\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062d\u0641\u0638 \u0648 \u0633\u0627\u062f\u06af\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%84%D8%B2%D8%A7%D9%85\"><\/span>\n<p>  \u0627\u0644\u0632\u0627\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0639\u0645\u0627\u0631\u06cc \u0630\u06a9\u0631 \u0634\u062f\u0647 \u062f\u0631 \u0645\u062e\u0632\u0646 \u0628\u0639\u062f\u06cc BoilerPlate \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u06a9\u0627\u0645\u0644 \u0627\u062c\u0631\u0627\u06cc \u060c \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u0627\u0628\u062a\u062f\u0627 \u0627\u06cc\u0646 \u062f\u0648 \u0633\u0646\u062f \u0628\u0646\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0645\u0631\u0648\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0645\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0645\u062b\u0627\u0644 \u060c \u0645\u0646\u0627\u0628\u0639 \u0645\u0633\u062a\u0642\u06cc\u0645 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0645\u062e\u0632\u0646 \u0627\u0635\u0644\u06cc \u0631\u0627 \u062f\u0631\u062c \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u06a9\u0634\u0641 \u0647\u0645\u0647 \u0645\u0641\u0627\u0647\u06cc\u0645 \u062f\u0631 \u0639\u0645\u0642 \u0648 \u062f\u06cc\u062f\u0646 \u06cc\u06a9 \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u0622\u0645\u0627\u062f\u0647 \u062a\u0648\u0644\u06cc\u062f \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u060c \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"ltag-github-readme-tag\">\n<div class=\"readme-overview\">\n<h3><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D8%AF%DB%8C%DA%AF_%D8%A8%D8%AE%D8%A7%D8%B1_%DA%A9%D8%A7%D9%85%D9%84_NextJS_%D8%8C_%D8%A8%D8%B1_%D8%A7%D8%B3%D8%A7%D8%B3_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AA%D9%85%DB%8C%D8%B2_%D8%8C_MVVM_%D9%88_%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%86%D9%88%DB%8C%D8%B3%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\"><\/span>\n<p>      \u06cc\u06a9 \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u06a9\u0627\u0645\u0644 NextJS \u060c \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0639\u0645\u0627\u0631\u06cc \u062a\u0645\u06cc\u0632 \u060c MVVM \u0648 \u0627\u0644\u06af\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc.<br \/>\n    <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/p><\/div>\n<div class=\"ltag-github-body\">\n<div id=\"readme\" class=\"md\" data-path=\"README.md\">\n<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\">\n<p><h2 class=\"heading-element\" dir=\"auto\"><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C\"><\/span>\u0641\u0647\u0631\u0633\u062a \u0645\u062d\u062a\u0648\u0627\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p>\n<ul dir=\"auto\">\n<li>\u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc<\/li>\n<li>\u0641\u0646 \u0622\u0648\u0631\u06cc<\/li>\n<li>\u0645\u0639\u0645\u0627\u0631\u06cc<\/li>\n<li>\u0633\u0627\u062e\u062a \u067e\u0648\u0634\u0647<\/li>\n<li>\u0634\u0631\u0648\u0639<\/li>\n<li>\u062e\u0637 \u0635\u0646\u0641\u06cc<\/li>\n<\/ul>\n<p><h2 class=\"heading-element\" dir=\"auto\"><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C-2\"><\/span>\u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p>\n<p dir=\"auto\">\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0645\u062a\u0648\u0633\u0637 \u200b\u200b\u062a\u0627 \u0628\u0632\u0631\u06af \u0634\u0645\u0627 \u0628\u0627 NextJS \u0627\u0633\u062a \u060c \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u067e\u0627\u06cc\u0647 \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u060c \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc \u062a\u0645\u06cc\u0632 \u060c \u0631\u0648\u06cc\u06a9\u0631\u062f DDD \u0628\u0631\u0627\u06cc \u0645\u0646\u0637\u0642 \u062a\u062c\u0627\u0631\u06cc \u060c \u06a9\u062a\u0627\u0628 \u067e\u06cc\u0634\u06a9\u0633\u0648\u062a \u060c \u06a9\u062a\u0627\u0628 \u062f\u0627\u0633\u062a\u0627\u0646 \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0648 \u0628\u062e\u0634 UI \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0628\u0627 \u062f\u0633\u062a \u0632\u062f\u0646 \u0628\u0647 \u062e\u0637\u0627 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645.<\/p>\n<p><h2 class=\"heading-element\" dir=\"auto\"><span class=\"ez-toc-section\" id=\"%D8%A7%D9%86%DA%AF%DB%8C%D8%B2%D9%87\"><\/span>\u0627\u0646\u06af\u06cc\u0632\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p>\n<p dir=\"auto\">NextJS \u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f SSR \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0648\u0627\u0642\u0639\u0627\u064b \u062e\u0648\u0628 \u0648 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Frontend \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0628\u0647 \u0648\u062c\u0648\u062f \u0622\u0648\u0631\u062f\u0646 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u062e\u0648\u0628 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646. \u0627\u0645\u0627 \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0622\u0646\u0647\u0627 \u062c\u062f\u06cc\u062f \u0647\u0633\u062a\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0641\u0642\u0637 \u0633\u0639\u06cc \u06a9\u0631\u062f\u0646\u062f \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0627\u0631\u0645\u063a\u0627\u0646 \u0628\u06cc\u0627\u0648\u0631\u0646\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062c\u0627\u0645\u0639\u0647 Frontend \u060c \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0647\u0646\u062f\u0633\u06cc \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0648 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0635\u062d\u0628\u062a \u0646\u06a9\u0631\u062f\u0646\u062f.<\/p>\n<p dir=\"auto\">\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0645\u0627 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u06cc\u0645 \u0647\u0627 \u0627\u0632 NextJS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f &#8230;<\/p>\n<\/article>\n<\/div><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"usecase\"><\/span>\n<p>  usecase<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc. JS \u060c \u0645\u0627 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062f\u0631 \u062f\u0648 \u0644\u0627\u06cc\u0647 \u0627\u0635\u0644\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\u0644\u0627\u06cc\u0647 \u0648\u06cc\u0698\u06af\u06cc &#8211; \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0645\u0646\u0637\u0642 \u06a9\u0633\u0628 \u0648 \u06a9\u0627\u0631 \u0627\u0633\u062a.<\/li>\n<li>Layer Application &#8211; \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 API \u0647\u0627\u06cc Next.js \u0648 React \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D8%A7_%D8%A7%D8%B2_DI_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%DB%8C%D9%85\"><\/span>\n<p>  \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0632 DI \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u0641\u0642\u0637 \u0628\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647:<\/p>\n<ul>\n<li>\u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u062f\u0627\u0646\u0634 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f (\u062c\u0641\u062a \u0634\u0644).<\/li>\n<li>\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u0644 \u06a9\u0627\u0631 \u06a9\u0646\u062f \u0627\u0645\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0627\u062f\u063a\u0627\u0645 \u0634\u0648\u062f.<\/li>\n<\/ul>\n<p>\u0645\u0627 \u0627\u0632 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc (DI) \u0628\u0647 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0647\u0631 \u0644\u0627\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\u0644\u0627\u06cc\u0647 \u0645\u0634\u062e\u0635\u0647\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647: DI \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f <code>UseCase<\/code> \u0648\u062a <code>Repository<\/code> \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0631\u0627\u0628\u0637 \u0647\u0627 \u060c \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 <code>Adapter Pattern<\/code>\u0628\u0634\u0631<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ul>\n<li>\u0647\u062f\u0641: \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0646\u0637\u0642 \u06a9\u0633\u0628 \u0648 \u06a9\u0627\u0631 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062f\u0627\u062f\u0647 \u062c\u062f\u0627 \u0645\u06cc \u0634\u0648\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0628\u0627\u0646\u06a9\u0647\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u060c API).<\/li>\n<\/ul>\n<ol>\n<li>\u0644\u0627\u06cc\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647: DI Bridges <code>ViewModel (VM)<\/code> \u0648\u062a <code>View<\/code>\u060c \u067e\u0627\u06cc\u0628\u0646\u062f\u06cc \u0628\u0647 <code>Bridge Pattern<\/code>\u0628\u0634\u0631<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ul>\n<li>\u0645\u0648\u0631\u062f \u062e\u0627\u0635: \u0647\u0646\u06af\u0627\u0645 \u0639\u0628\u0648\u0631 VM \u0627\u0632 a <code>Server Component<\/code> \u0628\u0647 <code>Client Component<\/code>\u060c \u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>VM key<\/code> \u0628\u0631\u0627\u06cc \u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc<\/li>\n<\/ul>\n<ol>\n<li>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u0648 \u062f\u06cc\u06af\u0631. ## \u0644\u0627\u06cc\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u06af\u0641\u062a\u0647 \u0634\u062f \u060c \u0645\u0627 \u0627\u0632 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc (DI) \u062f\u0631 \u0644\u0627\u06cc\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>UseCase<\/code> \u0648\u062a <code>Repository<\/code> \u0644\u0627\u06cc\u0647 \u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0631\u0627\u0628\u0637 \u0647\u0627.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D9%84%DB%8C%D8%AF_DI_%D8%A7%D8%AA%D8%B5%D8%A7%D9%84_%D9%85%D8%A8%D8%AA%D9%86%DB%8C_%D8%A8%D8%B1_%D8%B1%D8%A7%D8%A8%D8%B7\"><\/span>\n<p>  \u06a9\u0644\u06cc\u062f DI: \u0627\u062a\u0635\u0627\u0644 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0627\u0628\u0637<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u06cc\u06a9 USECase \u0628\u0627 \u0645\u062e\u0632\u0646 \u0645\u0631\u0628\u0648\u0637\u0647 \u060c \u0627\u0632 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f DI \u06a9\u0647 \u0628\u0647 \u0631\u0627\u0628\u0637 \u0645\u062e\u0632\u0646 \u06af\u0631\u0647 \u062e\u0648\u0631\u062f\u0647 \u0627\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0648\u0636\u0648\u062d \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0627\u0632 \u0646\u0648\u0639 \u0627\u06cc\u0645\u0646 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">UserRepository<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">create<\/span><span class=\"p\">(<\/span><span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CreateUserParams<\/span><span class=\"p\">):<\/span> <span class=\"nx\">ApiTask<\/span><span class=\"o\">&lt;<\/span><span class=\"kc\">true<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">update<\/span><span class=\"p\">(<\/span><span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">UpdateUserParams<\/span><span class=\"p\">):<\/span> <span class=\"nx\">ApiTask<\/span><span class=\"o\">&lt;<\/span><span class=\"kc\">true<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">delete<\/span><span class=\"p\">(<\/span><span class=\"nx\">ids<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[]):<\/span> <span class=\"nx\">ApiTask<\/span><span class=\"o\">&lt;<\/span><span class=\"kc\">true<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">userRepoKey<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">userRepoKey<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: user.repository.interface.ts<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0645\u0627 <code>userRepositoryKey<\/code> \u06a9\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u06cc\u06a9 \u0645\u062e\u0632\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0622\u0646 \u062f\u0631 USECase \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062e\u0632\u0646 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A7%DA%98%D9%88%D9%84\"><\/span>\n<p>  \u0645\u0627\u0698\u0648\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u0645\u0646\u0647 \u0645\u062d\u0648\u0631 (DDD) \u060c \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0633\u0637\u062d \u0628\u0627\u0644\u0627 \u06a9\u0647 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062f\u0627\u0645\u0646\u0647 \u0631\u0627 \u06af\u0631\u0648\u0647 \u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u062f \u060c \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u062a\u0645\u0627\u0645 \u0645\u0646\u0637\u0642 \u062f\u0627\u0645\u0646\u0647 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 (\u0627\u0634\u062e\u0627\u0635 \u060c \u0645\u062e\u0627\u0632\u0646 \u060c \u062e\u062f\u0645\u0627\u062a) \u062f\u0631 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062b\u0628\u062a \u0646\u0627\u0645 \u0647\u0627\u06cc \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0622\u0646 (DI) \u0631\u0627 \u0646\u06cc\u0632 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">userModule<\/span><span class=\"p\">(<\/span><span class=\"nx\">di<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DependencyContainer<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">di<\/span><span class=\"p\">.<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"nx\">userRepoKey<\/span><span class=\"p\">,<\/span> <span class=\"nx\">UserRepositoryImpl<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">di<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: \u0645\u0627\u0698\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062c\u0646\u0628\u0647 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\n<p>*<em>\u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0644\u0627\u06cc\u0647 \u0645\u0639\u0645\u0627\u0631\u06cc<\/em>:<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0647\u0631 \u062f\u0648 \u0631\u0627\u0628\u0637 \u0645\u062e\u0632\u0646 \u062f\u0627\u0645\u0646\u0647 (I-REPO) \u0648 \u0627\u062c\u0631\u0627\u06cc \u0645\u062e\u0632\u0646 \u0628\u062a\u0648\u0646\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u0635\u0648\u0644 \u0645\u0639\u0645\u0627\u0631\u06cc \u062a\u0645\u06cc\u0632 \u060c \u0627\u06cc\u0646 \u062f\u0627\u0646\u0634 \u062f\u0648\u06af\u0627\u0646\u0647 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f <code>Data Layer<\/code>\u0628\u0634\u0631<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u0646\u0638\u06cc\u0645 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc<\/strong>:<\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u06a9\u0648\u062f\u06a9 DI \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0645\u062e\u0627\u0632\u0646 \u062f\u0627\u0645\u0646\u0647 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C\"><\/span>\n<p>  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u0648\u062b\u0631 \u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u062b\u0628\u062a \u0647\u0645\u0647 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u062f\u0627\u0645\u0646\u0647 \u060c \u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0647\u0627 \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u06cc\u0645:<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"cm\">\/**\n * On adding new domain module, just add it to this list\n *\/<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">moduleKeyToDi<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Record<\/span><span class=\"o\">&lt;<\/span>\n  <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">di<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DependencyContainer<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">DependencyContainer<\/span>\n<span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"p\">[<\/span><span class=\"nx\">authModuleKey<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">authModule<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">[<\/span><span class=\"nx\">userModuleKey<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">userModule<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">memoizedDis<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Record<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">DependencyContainer<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/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\">featuresDi<\/span><span class=\"p\">(<\/span><span class=\"kr\">module<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">DependencyContainer<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">memoizedDis<\/span><span class=\"p\">[<\/span><span class=\"kr\">module<\/span><span class=\"p\">])<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">memoizedDis<\/span><span class=\"p\">[<\/span><span class=\"kr\">module<\/span><span class=\"p\">];<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">moduleDiHandler<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">moduleKeyToDi<\/span><span class=\"p\">[<\/span><span class=\"kr\">module<\/span><span class=\"p\">];<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">moduleDiHandler<\/span><span class=\"p\">)<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Server Di didn't found for module: <\/span><span class=\"p\">${<\/span><span class=\"kr\">module<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">moduleDi<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">moduleDiHandler<\/span><span class=\"p\">(<\/span><span class=\"nx\">di<\/span><span class=\"p\">.<\/span><span class=\"nf\">createChildContainer<\/span><span class=\"p\">());<\/span>\n  <span class=\"nf\">globalModule<\/span><span class=\"p\">(<\/span><span class=\"nx\">moduleDi<\/span><span class=\"p\">);<\/span>\n  <span class=\"nx\">memoizedDis<\/span><span class=\"p\">[<\/span><span class=\"kr\">module<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">moduleDi<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">moduleDi<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">diResolve<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">unknown<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kr\">module<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">key<\/span><span class=\"p\">:<\/span> <span class=\"nx\">InjectionToken<\/span><span class=\"p\">):<\/span> <span class=\"nx\">T<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nf\">featuresDi<\/span><span class=\"p\">(<\/span><span class=\"kr\">module<\/span><span class=\"p\">).<\/span><span class=\"nx\">resolve<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">T<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: \u0648\u06cc\u0698\u06af\u06cc.<\/p>\n<p>\u0627\u06cc\u0646 \u0627\u062c\u0631\u0627\u06cc \u0634\u0627\u0645\u0644 \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062e\u0627\u0635 \u062f\u0627\u0645\u0646\u0647 (DI) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>unique module keys<\/code>\u0628\u0634\u0631 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u0646\u0632\u0648\u0627 \u0648 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u0646\u0627\u0633\u0628 \u060c \u0628\u0647 \u0647\u0631 \u062f\u0627\u0645\u0646\u0647 \u06cc\u06a9 \u0634\u0646\u0627\u0633\u0647 \u0645\u062c\u0632\u0627 \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<br \/>\u0628\u0631\u0627\u06cc \u0645\u0631\u062c\u0639 \u060c \u0628\u0647 \u06a9\u0644\u06cc\u062f \u0645\u0627\u0698\u0648\u0644 \u062f\u0627\u0645\u0646\u0647 \u062f\u0627\u0645\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u06a9\u0644\u06cc\u062f \u0645\u0627\u0698\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0641\u0627\u06cc\u0644 DI \u0648\u06cc\u0698\u06af\u06cc \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0627\u0698\u0648\u0644 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u062f\u0627\u0645\u0646\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0627\u0698\u0648\u0644 \u062f\u0627\u0645\u0646\u0647 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0644\u06cc\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>moduleKeyToDi<\/code> \u0634\u06cc\u0621.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u062e\u0632\u0646 \u0631\u0627 \u062f\u0631 \u0644\u0627\u06cc\u0647 usecase \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645:<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">createUserUseCase<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CreateUserParams<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ApiEither<\/span><span class=\"o\">&lt;<\/span><span class=\"kc\">true<\/span><span class=\"o\">&gt;&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">repo<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">diResolve<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">UserRepository<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">userModuleKey<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userRepoKey<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">repo<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">(<\/span><span class=\"nx\">params<\/span><span class=\"p\">)();<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: CreateUserUsecase<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%84%D8%A7%DB%8C%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\"><\/span>\n<p>  \u0644\u0627\u06cc\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631 \u062e\u0644\u0627\u0641 \u0644\u0627\u06cc\u0647 \u0648\u06cc\u0698\u06af\u06cc \u060c \u0644\u0627\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0632 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u067e\u06cc\u0631\u0648\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0627\u0644\u06af\u0648\u06cc MVVM (\u0645\u062f\u0644-\u0646\u0645\u0627\u06cc-\u0645\u0634\u0627\u0647\u062f\u0647 -\u0646\u0645\u0648\u062f\u0644) \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u0639\u0628\u0648\u0631 ViewModels \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u0628\u0647 \u0646\u0645\u0627\u0647\u0627\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D9%84%DB%8C%D8%AF_VM\"><\/span>\n<p>  \u06a9\u0644\u06cc\u062f VM<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u06cc\u06a9 VM \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u062b\u0628\u062a VM \u062a\u0648\u0633\u0637 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A7%DA%98%D9%88%D9%84_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0627\u0698\u0648\u0644 \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0647\u0631 \u0635\u0641\u062d\u0647 \u06cc\u0627 \u0645\u0633\u06cc\u0631\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0647\u0645\u0647 VM \u0647\u0627 \u0648 \u0647\u0631 \u0642\u0633\u0645\u062a \u062f\u06cc\u06af\u0631 \u062f\u0631 DI \u062e\u0648\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645:<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"cm\">\/**\n * Each page can have its own di to connect all vms, usecases or controllers\n *\/<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">dashboardAppModule<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">dashboardDi<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">di<\/span><span class=\"p\">.<\/span><span class=\"nf\">createChildContainer<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"nx\">dashboardDi<\/span><span class=\"p\">.<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">createRandomInvoiceButtonVMKey<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">CreateRandomInvoiceButtonVM<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">dashboardDi<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: \u0645\u0627\u0698\u0648\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u060c \u0638\u0631\u0641 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u062f\u0631\u062e\u062a \u0645\u0624\u0644\u0641\u0647 \u062a\u0648\u0632\u06cc\u0639 \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0647\u0631 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u0636\u0645\u0646 \u062d\u0641\u0638 \u0627\u0646\u0632\u0648\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0645\u0646\u0627\u0633\u0628 \u060c \u0628\u0647 View Models \u062b\u0628\u062a \u0634\u062f\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Layout<\/span><span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">children<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">ReactNode<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">di<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"nf\">dashboardAppModule<\/span><span class=\"p\">());<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">ReactVVMDiProvider<\/span> <span class=\"nx\">diContainer<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">di<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex h-screen flex-col md:flex-row md:overflow-hidden<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full flex-none md:w-64<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">SideNav<\/span> <span class=\"o\">\/&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-grow p-6 md:overflow-y-auto md:p-12<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ReactVVMDiProvider<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: \u0637\u0631\u062d \u062f\u0627\u0634\u0628\u0648\u0631\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u06a9\u0647 \u0645\u0627 \u0627\u0632 \u0628\u0633\u062a\u0647 ReactVVM \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c DI \u0631\u0627 \u0628\u0647 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u0646\u0645\u0627\u06cc \u0631\u0627 \u0628\u0647 VM \u0645\u0627 \u0645\u062a\u0635\u0644 \u06a9\u0646\u062f \u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0646\u062a\u0642\u0627\u0644 VMKey \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 View.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-2\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0627\u062c\u0631\u0627\u06cc \u0628\u062a\u0646 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u062d\u0648\u0647 \u0627\u0646\u062a\u0642\u0627\u0644 \u06cc\u06a9 ViewModel \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0641\u0627\u06a9\u062a\u0648\u0631 \u062a\u0635\u0627\u062f\u0641\u06cc \u0628\u0647 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062f\u06a9\u0645\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">LatestInvoices<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">latestInvoices<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">latestInvoicesController<\/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\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex w-full flex-col md:col-span-4\"<\/span><span class=\"p\">&gt;<\/span>\n      ...\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span> <span class=\"na\">vmKey<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">createRandomInvoiceButtonVMKey<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n      ...\n    <span class=\"p\"\/><span class=\"nt\">div<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647: \u0622\u062e\u0631\u06cc\u0646 \u0641\u0627\u06a9\u062a\u0648\u0631<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0645\u0627 \u06a9\u0644\u06cc\u062f VM \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc \u062a\u0648\u0633\u0637 VMKey Prop \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u062f\u06a9\u0645\u0647 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%D8%A7%DB%8C%D8%A7%D9%86\"><\/span>\n<p>  \u067e\u0627\u06cc\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u060c \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u06cc\u0645 <code>Clean Architecture<\/code> \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>Dependency Injection (DI)<\/code> \u0628\u0631\u0627\u06cc \u062c\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0645\u0646\u0637\u0642 \u06a9\u0633\u0628 \u0648 \u06a9\u0627\u0631 \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 <code>DDD<\/code> \u0627\u0635\u0648\u0644 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 <code>UseCase<\/code> \u0648\u062a <code>Repository<\/code> \u0644\u0627\u06cc\u0647 \u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0631\u0627\u0628\u0637 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u062d\u0641\u0638 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634.<\/p>\n<p>\u0628\u0631\u0627\u06cc <code>Application Layer<\/code>\u060c \u0645\u0627 \u06cc\u06a9 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u06cc\u0645 <code>MVVM pattern<\/code>\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc VM \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u067e\u0644 \u0633\u0631\u0648\u0631 \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0636\u0645\u0646 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0648 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0648\u0627\u062d\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>Bridge Pattern<\/code>\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0645\u0646\u0637\u0642 UI \u0631\u0627 \u062a\u0645\u06cc\u0632 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f <code>Next.js<\/code> \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627<\/p>\n<p>\u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u062b\u0628\u062a \u0646\u0627\u0645 DI \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u062f\u0627\u0645\u0646\u0647 \u0648 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u062a\u0645\u0631\u06a9\u0632 \u060c \u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u0627\u0628\u0644 \u0627\u0646\u0639\u0637\u0627\u0641 \u0648 \u0642\u0627\u0628\u0644 \u062d\u0641\u0638 \u0645\u06cc \u0631\u0633\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062f\u0631 \u0647\u0631 \u062f\u0648 \u0632\u0645\u06cc\u0646\u0647 \u0633\u0631\u0648\u0631 \u0648 \u0645\u0634\u062a\u0631\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. <\/p>\n<p>\u0627\u06af\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0627 \u0645\u0641\u06cc\u062f \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u06cc\u062f \u060c \u0627\u06af\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u062f \u0648\u0627\u0642\u0639\u0627\u064b \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u0645:<br \/>the \u0645\u062e\u0632\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0645\u0627\u06cc\u062a \u0627\u0632 \u062f\u06cc\u062f \u0622\u0646 \u0633\u062a\u0627\u0631\u0647 \u06a9\u0646\u06cc\u062f<br \/>thoughts \u0627\u0641\u06a9\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f &#8211; \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0634\u0645\u0627 \u0628\u0647 \u0628\u0647\u0628\u0648\u062f \u0645\u062d\u062a\u0648\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<p>\u0647\u0631 \u062a\u0639\u0627\u0645\u0644 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0631\u0633\u0646\u062f!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc (DI) \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u062d\u062b \u0648 \u06af\u0641\u062a\u06af\u0648\u062a\u0631\u06cc\u0646 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0633\u062a. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0646\u0638\u0631\u0627\u062a \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0627\u0632 \u0646\u0638\u0631 \u062c\u0647\u0627\u0646\u06cc \u0633\u0648\u062f\u0645\u0646\u062f \u0627\u0633\u062a \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a \u060c \u06cc\u06a9 \u0686\u06cc\u0632 \u0645\u0633\u0644\u0645 \u0627\u0633\u062a: DI \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f \u0627\u06af\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 &#8220;\u0686\u06a9\u0634 \u0637\u0644\u0627\u06cc\u06cc&#8221; \u0631\u0641\u062a\u0627\u0631 \u0646\u0634\u0648\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":107250,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxb1zk2rgx848rzkmltpg.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-107249","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\/107249","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=107249"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/107249\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/107250"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=107249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=107249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=107249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}