{"id":28289,"date":"2023-06-27T15:13:41","date_gmt":"2023-06-27T11:43:41","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/"},"modified":"2023-06-27T15:13:41","modified_gmt":"2023-06-27T11:43:41","slug":"how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/","title":{"rendered":"\u0686\u06af\u0648\u0646\u0647 \u0628\u0627 Next.js 13\u060c Typescript \u0648 Firebase \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0648\u0634 \u0633\u0627\u062e\u062a\u0645"},"content":{"rendered":"<div data-article-id=\"1511871\" id=\"article-body\">\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0648\u0634 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0628\u0647 \u0635\u0627\u062d\u0628\u0627\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u06cc\u0627 \u0635\u0646\u062f\u0648\u0642\u062f\u0627\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js v13\u060c Typescript \u0648 Firebase\u060c \u0641\u0631\u0648\u0634 \u0631\u0627 \u062b\u0628\u062a \u0648 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632 Firebase\u060c \u0645\u0627\u0646\u0646\u062f \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u062f\u0627\u062f\u0647 \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p><em>\ud83d\udca1 PS: \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0641\u0631\u0636 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0627\u0646\u0634 \u0627\u0648\u0644\u06cc\u0647 React \u06cc\u0627 Next.js \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f.<\/em><\/p>\n<p><\/p>\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=\"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\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647<\/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\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%81%D8%B1%D8%A2%DB%8C%D9%86%D8%AF_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B1%D8%A7%D8%A8%D8%B7_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C\" >\u0641\u0631\u0622\u06cc\u0646\u062f \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\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\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#Firebase_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >Firebase \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_Firebase_%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 Firebase \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-5\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Firebase_Authentication\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Firebase Authentication<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Firebase_Firestore\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Firebase Firestore<\/a><\/li><\/ul><\/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\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%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%A8%D8%A7_Firebase_Auth\" >\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 Firebase Auth<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0648\u0631\u0648\u062f \u0628\u0647 \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-9\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D8%AE%D8%B1%D9%88%D8%AC_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A7%D8%B2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u062e\u0631\u0648\u062c \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0632 \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-10\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%85%D8%AD%D8%A7%D9%81%D8%B8%D8%AA_%D8%A7%D8%B2_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D8%AF%D8%B1_%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%86%D8%B4%D8%AF%D9%87\" >\u0645\u062d\u0627\u0641\u0638\u062a \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0634\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-11\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D8%A7%D8%B1%D8%AA%D8%A8%D8%A7%D8%B7_%D8%A8%D9%84%D8%A7%D8%AF%D8%B1%D9%86%DA%AF_%D8%A8%D8%A7_Firebase_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D8%AF%D8%A7%D8%AF%D9%87_%D9%88_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_CRUD\" >\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0627 Firebase: \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u0648 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D8%AF%D8%B3%D8%AA%D9%87_%D9%87%D8%A7\" >\u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0633\u062a\u0647 \u0647\u0627<\/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\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA\" >\u0645\u062c\u0645\u0648\u0639\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D9%81%D8%B1%D9%88%D8%B4\" >\u0645\u062c\u0645\u0648\u0639\u0647 \u0641\u0631\u0648\u0634<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/how-i-built-a-sales-management-app-with-nextjs-13-typescript-and-firebase-16cb\/#%D8%A8%D8%A7%D8%B2_%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%F0%9F%99%82\" >\u0628\u0627\u0632 \u0628\u0647 \u06a9\u0627\u0631\ud83d\ude42<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062e\u0644\u0627\u0635\u0647 \u06a9\u0646\u0645.  \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0628\u0627 Firebase\u060c<\/li>\n<li>\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 (\u0635\u0646\u062f\u0648\u0642\u062f\u0627\u0631 \u06cc\u0627 \u0635\u0627\u062d\u0628 \u0641\u0631\u0648\u0634\u06af\u0627\u0647) \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0628\u0631\u0627\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f\u060c<\/li>\n<li>\u0627\u0641\u0632\u0648\u062f\u0646 \u0648 \u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u0648<\/li>\n<li>\u0641\u0631\u0648\u0634 \u0631\u0648\u0632\u0627\u0646\u0647 \u0631\u0627 \u062b\u0628\u062a \u0648 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u06a9\u0648\u062a\u0627\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a: <br \/><a href=\"https:\/\/www.youtube.com\/watch?v=Vq1xlL1g9eY\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=Vq1xlL1g9eY<\/a><br \/>\n<\/iframe>\n<\/p>\n<blockquote>\n<p><em>\ud83d\udca1 \u0646\u0633\u062e\u0647 \u0632\u0646\u062f\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.  \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a <code>admin@test.com<\/code> \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0627\u0633\u062a <code>admin123<\/code><\/em><\/p>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D8%B1%D8%A2%DB%8C%D9%86%D8%AF_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B1%D8%A7%D8%A8%D8%B7_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  \u0641\u0631\u0622\u06cc\u0646\u062f \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u0645.<br \/>\u0627\u0648\u0644 \u0627\u0632 \u0647\u0645\u0647\u060c \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u0646\u062f\u0627\u0631\u06cc\u062f \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u06a9\u0627\u0631\u0628\u0631 (\u0635\u0646\u062f\u0648\u0642\u062f\u0627\u0631\/\u0635\u0627\u062d\u0628 \u0641\u0631\u0648\u0634\u06af\u0627\u0647) \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645\" loading=\"lazy\" width=\"800\" height=\"332\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u06a9\u0647 \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0627\u0645\u0644 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_505_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f\" loading=\"lazy\" width=\"800\" height=\"396\" title=\"\"><\/p>\n<p>\u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0628\u062a\u0648\u0627\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062c\u062f\u06cc\u062f \u0631\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u062c\u0648\u062f \u0628\u0648\u062f\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0647\u0631 \u0632\u0645\u0627\u0646\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_720_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a\" loading=\"lazy\" width=\"800\" height=\"430\" title=\"\"><\/p>\n<p>\u0628\u0639\u062f\u060c \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u0647\u200c\u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0633\u062a\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u062d\u0630\u0641 \u06a9\u0646\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_237_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u0647 \u0647\u0627\" loading=\"lazy\" width=\"800\" height=\"397\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0627\u06cc\u062f \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 &#8211; \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u0634 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0641\u0631\u0648\u0634 \u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u062f. <\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0648\u0631\u0648\u062f\u06cc \u062a\u0627\u0631\u06cc\u062e \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0628\u062a\u0648\u0627\u0646\u062f \u0641\u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0631\u0648\u0632 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_202_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u0634\" loading=\"lazy\" width=\"800\" height=\"413\" title=\"\"><\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0641\u0631\u0648\u0634 \u062c\u062f\u06cc\u062f \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0645\u0648\u062f\u0627\u0644 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f <code>Add New Sales<\/code> \u062f\u06a9\u0645\u0647.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_186_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0641\u0631\u0648\u0634 \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"431\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0622\u06cc\u0646\u062f\u0647\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u062a\u0635\u0627\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0628\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 Firebase \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Firebase_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  Firebase \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Firebase \u06cc\u06a9 Backend-as-a-Service (Baas) \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 \u06af\u0648\u06af\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062a\u062d\u062a \u0648\u0628 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u0628\u0633\u0627\u0632\u0646\u062f.  \u062e\u062f\u0645\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f Firebase \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647 \u0628\u0627 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06a9\u0645 \u06cc\u0627 \u0628\u062f\u0648\u0646 \u0645\u0647\u0627\u0631\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>Firebase \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 NoSQL\u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0644\u0627\u062f\u0631\u0646\u06af\u060c \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u060c \u062a\u0648\u0627\u0628\u0639 \u0627\u0628\u0631\u06cc\u060c \u062e\u062f\u0645\u0627\u062a \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_Firebase_%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 Firebase \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>\u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 Firebase \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js\u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js 13 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 Typescript \u0648 the \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>app<\/code> \u0631\u0648\u062a\u0631.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx create-next-app sales-app\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\u0632 \u06a9\u0646\u0633\u0648\u0644 Firebase \u062f\u06cc\u062f\u0646 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627 \u06cc\u06a9 \u062d\u0633\u0627\u0628 Gmail \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u060c \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Firebase \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <code>&lt;\/&gt;<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 Firebase \u062c\u062f\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_154_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 Firebase\" loading=\"lazy\" width=\"800\" height=\"296\" title=\"\"><\/p>\n<p>\u0646\u0627\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062b\u0628\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_773_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 Firebase \u062e\u0648\u062f \u0631\u0627 \u062b\u0628\u062a \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"331\" title=\"\"><\/p>\n<p>\u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 Firebase 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>firebase\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>firebase.ts<\/code> \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u06a9\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Firebase \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_372_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Firebase\" loading=\"lazy\" width=\"800\" height=\"434\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">initializeApp<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/app<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getAnalytics<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/analytics<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">firebaseConfig<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">apiKey<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">*****<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">authDomain<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">*****<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">projectId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">*****<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">storageBucket<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">*****<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">messagingSenderId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">*******<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">appId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">********<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">measurementId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">********<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">initializeApp<\/span><span class=\"p\">(<\/span><span class=\"nx\">firebaseConfig<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">analytics<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getAnalytics<\/span><span class=\"p\">(<\/span><span class=\"nx\">app<\/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>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f <code>firebase.ts<\/code> \u062d\u0627\u0648\u06cc \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a Firebase \u0648 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Firestore.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">initializeApp<\/span><span class=\"p\">,<\/span> <span class=\"nx\">getApps<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/app<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getFirestore<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/firestore<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">EmailAuthProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/auth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getAuth<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/auth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">firebaseConfig<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">apiKey<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">AIzaSyCtmI3jLzqDSr3UIwuUdBa5ocsN5vjzpW8<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">authDomain<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stock-taking-19198.firebaseapp.com<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">projectId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stock-taking-19198<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">storageBucket<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stock-taking-19198.appspot.com<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">messagingSenderId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">228033001185<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">appId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">1:228033001185:web:b2020053fb824a87d9a9a0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">measurementId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">G-79BQVKMPSR<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ Initialize Firebase<\/span>\n<span class=\"kd\">let<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getApps<\/span><span class=\"p\">().<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">initializeApp<\/span><span class=\"p\">(<\/span><span class=\"nx\">firebaseConfig<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">getApps<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">EmailAuthProvider<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getFirestore<\/span><span class=\"p\">(<\/span><span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">auth<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getAuth<\/span><span class=\"p\">(<\/span><span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">provider<\/span><span class=\"p\">,<\/span> <span class=\"nx\">auth<\/span> <span class=\"p\">};<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">db<\/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>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc\u200c\u06af\u0648\u06cc\u06cc\u0645!\ud83c\udf89 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a Firebase \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u062f.  \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Firebase \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645.<\/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_Firebase_Authentication\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Firebase Authentication<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a Firebase \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u067e\u0646\u0644 \u0633\u0645\u062a \u0686\u067e Build \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u0631\u0648\u06cc Authentication \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<br \/><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_233_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"418\" title=\"\"><\/p>\n<p>\u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u060c \u0631\u0648\u0634 \u0627\u06cc\u0645\u06cc\u0644\/\u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0631\u0648\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_353_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"Firebase Email\/Password Auth\" loading=\"lazy\" width=\"800\" height=\"352\" title=\"\"><\/p>\n<p>\u0627\u06af\u0631 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0648\u062f\u060c \u0635\u0641\u062d\u0647 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_602_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"Firebase Auth \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0648\u062f\" loading=\"lazy\" width=\"800\" height=\"210\" 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_Firebase_Firestore\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Firebase Firestore<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Firestore Database \u0631\u0627 \u0627\u0632 \u0645\u0646\u0648\u06cc \u0633\u0645\u062a \u0686\u067e \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u062a\u0633\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u06a9\u0627\u0646 \u067e\u06cc\u0634 \u0641\u0631\u0636 Cloud Firestore \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.jpeg\" alt=\"\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u06a9\u0627\u0646 Firebase\" loading=\"lazy\" width=\"800\" height=\"425\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <code>Usage<\/code> \u0627\u0632 \u0646\u0648\u0627\u0631 \u0645\u0646\u0648\u06cc \u0628\u0627\u0644\u0627\u060c \u0642\u0648\u0627\u0646\u06cc\u0646 \u0631\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0631\u0627\u06cc \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0637\u0648\u0644\u0627\u0646\u06cc \u062a\u0631\u06cc \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0647\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_84_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0642\u0648\u0627\u0646\u06cc\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Firebase\" loading=\"lazy\" width=\"800\" height=\"228\" title=\"\"><\/p>\n<blockquote>\n<p><em>\ud83d\udca1 PS: \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u0627\u0646\u0628\u06cc \u0646\u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u062a\u0648\u0644\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0627\u0632 \u062d\u0645\u0644\u0627\u062a \u0633\u0627\u06cc\u0628\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/em><\/p>\n<\/blockquote>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0633\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0647 \u0647\u0627\u060c \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_579_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0645\u062c\u0645\u0648\u0639\u0647 \u0647\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\" loading=\"lazy\" width=\"800\" height=\"352\" title=\"\"><\/p>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!\ud83c\udf89 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a.  \u0628\u0647 \u0632\u0648\u062f\u06cc \u0646\u062d\u0648\u0647 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0622\u0646 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%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%A8%D8%A7_Firebase_Auth\"><\/span>\n<p>  \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 Firebase Auth<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u062c\u0646\u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0648\u0634 \u0622\u0634\u0646\u0627 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.  \u0634\u0645\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u0648 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0627\u0631\u062c \u06a9\u0646\u06cc\u062f \u0648 \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u062d\u0627\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u062d\u0631\u0645\u0627\u0646\u0647 \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0634\u062f\u0647 \u0645\u062d\u0627\u0641\u0638\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>utils.ts<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u062d\u0627\u0648\u06cc \u062a\u0648\u0627\u0628\u0639 \u0648 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0648\u0631\u0648\u062f \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0634\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062d\u0627\u0648\u06cc \u062a\u0645\u0627\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. <\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u062c\u062f\u06cc\u062f \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 Firebase \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppRouterInstance<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/dist\/shared\/lib\/app-router-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">signInWithEmailAndPassword<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/auth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">auth<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/firebase<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">LoginUser<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">password<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AppRouterInstance<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">signInWithEmailAndPassword<\/span><span class=\"p\">(<\/span><span class=\"nx\">auth<\/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><span class=\"nx\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">userCredential<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">userCredential<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">;<\/span>\n            <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb logs user's details<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">User &gt;&gt;<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">user<\/span><span class=\"p\">);<\/span>\n            <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Authentication successful \ud83c\udf89<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n            <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/dashboard<\/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\">error<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n            <span class=\"nx\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Incorrect Email\/Password \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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0627\u0639\u062a\u0628\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u0634\u06cc \u062d\u0627\u0648\u06cc \u062a\u0645\u0627\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u0627\u06af\u0631 \u0641\u0631\u0622\u06cc\u0646\u062f \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0627\u0634\u062f\u060c \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u062e\u0637\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B1%D9%88%D8%AC_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A7%D8%B2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u062e\u0631\u0648\u062c \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Firebase \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <code>signOut<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0647\u0645 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0686\u06af\u0648\u0646\u06af\u06cc \u06a9\u0627\u0631\u06a9\u0631\u062f \u0622\u0646 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppRouterInstance<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/dist\/shared\/lib\/app-router-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">signOut<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/auth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">auth<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/firebase<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">LogOut<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AppRouterInstance<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">signOut<\/span><span class=\"p\">(<\/span><span class=\"nx\">auth<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Logout successful! \ud83c\udf89<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n            <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/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\">error<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Couldn't sign out \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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0627\u0644 \u0648 \u062e\u0631\u0648\u062c \u0622\u0646\u0647\u0627 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0627\u0631\u062c \u0645\u06cc \u06a9\u0646\u062f. <code>signOut<\/code> \u062a\u0627\u0628\u0639.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AD%D8%A7%D9%81%D8%B8%D8%AA_%D8%A7%D8%B2_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D8%AF%D8%B1_%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%86%D8%B4%D8%AF%D9%87\"><\/span>\n<p>  \u0645\u062d\u0627\u0641\u0638\u062a \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0634\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0634\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u067e\u0633 \u0627\u0632 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0627\u0632 Firebase \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>onAuthStateChanged<\/code> \u0642\u0644\u0627\u0628.<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>onAuthStateChanged<\/code> \u0642\u0644\u0627\u0628:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">auth<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/firebase<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">onAuthStateChanged<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/auth<\/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=\"nx\">useCallback<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">isUserLoggedIn<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useCallback<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">onAuthStateChanged<\/span><span class=\"p\">(<\/span><span class=\"nx\">auth<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nx\">setUser<\/span><span class=\"p\">({<\/span> <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"na\">uid<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">uid<\/span> <span class=\"p\">});<\/span>\n                <span class=\"c1\">\/\/\ud83d\udc49\ud83c\udffb Perform an authenticated request<\/span>\n            <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n                <span class=\"k\">return<\/span> <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">});<\/span>\n    <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">router<\/span><span class=\"p\">]);<\/span>\n\n<span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">isUserLoggedIn<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isUserLoggedIn<\/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\u06cc\u0646 <code>onAuthStateChanged<\/code> hook \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0627\u0644 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631 \u0648 \u0634\u06cc\u0621 \u062d\u0627\u0648\u06cc \u062a\u0645\u0627\u0645 \u062c\u0632\u0626\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u060c \u0628\u0647 \u062c\u0632 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%AA%D8%A8%D8%A7%D8%B7_%D8%A8%D9%84%D8%A7%D8%AF%D8%B1%D9%86%DA%AF_%D8%A8%D8%A7_Firebase_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D8%AF%D8%A7%D8%AF%D9%87_%D9%88_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_CRUD\"><\/span>\n<p>  \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0627 Firebase: \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u0648 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 Firebase \u0622\u0634\u0646\u0627 \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D8%AF%D8%B3%D8%AA%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0633\u062a\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f \u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u062d\u0635\u0648\u0644\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u062a\u062d\u062a \u06cc\u06a9 \u062f\u0633\u062a\u0647 \u0628\u0627\u0634\u062f. <br \/>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0628\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_722_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u0647 \u0647\u0627\" loading=\"lazy\" width=\"800\" height=\"341\" title=\"\"><\/p>\n<p>\u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0633\u062a\u0647 \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">collection<\/span><span class=\"p\">,<\/span> <span class=\"nx\">addDoc<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">firebase\/firestore<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">db<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/firebase<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">addCategory<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">name<\/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\">addDoc<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">categories<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">name<\/span>\n        <span class=\"p\">})<\/span>\n        <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\"> category added! \ud83c\udf89`<\/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\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error! \u274c<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">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 \u0646\u0627\u0645 \u062f\u0633\u062a\u0647 \u0631\u0627 \u0627\u0632 \u0642\u0633\u0645\u062a \u0648\u0631\u0648\u062f\u06cc \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0633\u0646\u062f (\u062f\u0633\u062a\u0647) \u062c\u062f\u06cc\u062f \u062f\u0631 Firebase \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u06cc\u06a9 \u062f\u0633\u062a\u0647\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062d\u0630\u0641 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">deleteCategory<\/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=\"nx\">name<\/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=\"c1\">\/\/\ud83d\udc47\ud83c\udffb deletes the category<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">deleteDoc<\/span><span class=\"p\">(<\/span><span class=\"nx\">doc<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">categories<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">id<\/span><span class=\"p\">));<\/span>\n        <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb delets the products within the category<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">q<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">query<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"nx\">where<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">category<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">==<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">name<\/span><span class=\"p\">));<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">unsubscribe<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">onSnapshot<\/span><span class=\"p\">(<\/span><span class=\"nx\">q<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">querySnapshot<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">querySnapshot<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nb\">document<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nx\">deleteDoc<\/span><span class=\"p\">(<\/span><span class=\"nx\">doc<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">));<\/span>\n            <span class=\"p\">});<\/span>\n        <span class=\"p\">});<\/span>\n        <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\"> category deleted \ud83c\udf89`<\/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\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Encountered an error \u274c<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 <code>deleteCategory<\/code> \u062a\u0627\u0628\u0639 \u0628\u0627\u0644\u0627 \u0634\u0646\u0627\u0633\u0647 \u0648 \u0646\u0627\u0645 \u062f\u0633\u062a\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f\u060c \u062f\u0633\u062a\u0647 \u0631\u0627 \u0627\u0632 \u0644\u06cc\u0633\u062a \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0632\u06cc\u0631 \u062f\u0633\u062a\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0644\u06cc\u0633\u062a \u062f\u0633\u062a\u0647 \u0647\u0627 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0627\u0632 Firebase \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u062a\u0627\u0628\u0639 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getCategories<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">setCategories<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/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\">unsub<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">onSnapshot<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">categories<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"nx\">doc<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"na\">docs<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span>\n            <span class=\"nx\">doc<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"na\">d<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">docs<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">(),<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">})<\/span>\n            <span class=\"p\">});<\/span>\n            <span class=\"nx\">setCategories<\/span><span class=\"p\">(<\/span><span class=\"nx\">docs<\/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=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">setCategories<\/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 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0628\u0647 \u0646\u0627\u0645 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f <code>setCategories<\/code> &#8211; \u062d\u0627\u0644\u062a React \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0647\u0645\u0647 \u062f\u0633\u062a\u0647 \u0647\u0627 \u0627\u0633\u062a.  \u0633\u067e\u0633 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0644\u06cc\u0633\u062a \u062f\u0633\u062a\u0647 \u0647\u0627 \u0628\u0647 Firebase \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f <code>setCategories<\/code> \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u06cc\u0627\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA\"><\/span>\n<p>  \u0645\u062c\u0645\u0648\u0639\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633 \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0635\u0641\u062d\u0647 \u062f\u0633\u062a\u0647\u200c\u0647\u0627\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u062a\u062d\u062a \u0647\u0631 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0645\u0648\u062c\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u0648 \u062d\u0630\u0641 \u06a9\u0646\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/1687866220_794_\u0686\u06af\u0648\u0646\u0647-\u0628\u0627-Nextjs-13\u060c-Typescript-\u0648-Firebase-\u06cc\u06a9-\u0628\u0631\u0646\u0627\u0645\u0647-\u0645\u062f\u06cc\u0631\u06cc\u062a.png\" alt=\"\u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062d\u0635\u0648\u0644\" loading=\"lazy\" width=\"800\" height=\"341\" title=\"\"><\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>Products<\/code> \u0635\u0641\u062d\u0647 \u0645\u0634\u0627\u0628\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627\u0644\u0627 \u0627\u0633\u062a \u0648 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u062d\u0635\u0648\u0644 \u062c\u062f\u06cc\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">addProduct<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span> <span class=\"nx\">category<\/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\">addDoc<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"nx\">category<\/span>\n        <span class=\"p\">})<\/span>\n        <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\"> product added! \ud83c\udf89`<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>   \n         <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\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error! \u274c<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n\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 \u0646\u0627\u0645\u060c \u0642\u06cc\u0645\u062a \u0648 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0632 \u0641\u06cc\u0644\u062f \u0641\u0631\u0645 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f. <code>products<\/code> \u0645\u062c\u0645\u0648\u0639\u0647.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647\u060c \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getProducts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">setProducts<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/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\">unsub<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">onSnapshot<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"nx\">doc<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"na\">docs<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span>\n            <span class=\"nx\">doc<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"na\">d<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">docs<\/span><span class=\"p\">.<\/span><span class=\"nx\">unshift<\/span><span class=\"p\">(<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">(),<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">})<\/span>\n            <span class=\"p\">});<\/span>\n            <span class=\"nx\">setProducts<\/span><span class=\"p\">(<\/span><span class=\"nx\">docs<\/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=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">setProducts<\/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>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0627\u0632 \u0642\u0633\u0645\u062a \u062d\u0630\u0641 \u06a9\u0646\u062f <code>products<\/code> \u0645\u062c\u0645\u0648\u0639\u0647.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062d\u0630\u0641 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><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=\"nx\">name<\/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\">deleteDoc<\/span><span class=\"p\">(<\/span><span class=\"nx\">doc<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">id<\/span><span class=\"p\">));<\/span>\n        <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\"> deleted \ud83c\udf89`<\/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\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Encountered an error \u274c<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n\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>\u062a\u0627\u0628\u0639 \u0646\u0627\u0645 \u0648 \u0634\u0646\u0627\u0633\u0647 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f\u060c \u0633\u067e\u0633 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0634\u0646\u0627\u0633\u0647 \u062e\u0648\u062f \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87_%D9%81%D8%B1%D9%88%D8%B4\"><\/span>\n<p>  \u0645\u062c\u0645\u0648\u0639\u0647 \u0641\u0631\u0648\u0634<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0628\u0627\u06cc\u062f \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u062a\u0627 \u0641\u0631\u0648\u0634 \u06cc\u06a9 \u0631\u0648\u0632 \u062e\u0627\u0635 \u0648 \u06a9\u0644 \u0641\u0631\u0648\u0634 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u062f\u0631 \u067e\u0644\u062a\u0641\u0631\u0645 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u062f \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">addSales<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">customerName<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">customerEmail<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">products<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Items<\/span><span class=\"p\">[],<\/span> <span class=\"nx\">totalAmount<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setAddNew<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/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\">addDoc<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sales<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">customerName<\/span><span class=\"p\">,<\/span> <span class=\"nx\">customerEmail<\/span><span class=\"p\">,<\/span> <span class=\"nx\">products<\/span><span class=\"p\">,<\/span> <span class=\"nx\">totalAmount<\/span><span class=\"p\">,<\/span> <span class=\"na\">timestamp<\/span><span class=\"p\">:<\/span> <span class=\"nx\">serverTimestamp<\/span><span class=\"p\">()<\/span>\n        <span class=\"p\">})<\/span>\n        <span class=\"nx\">successMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Sales recorded! \ud83c\udf89<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">setAddNew<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n\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=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">errorMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error! Try again \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>\u062a\u0627\u0628\u0639 \u0632\u06cc\u0631 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0648 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f\u060c \u0633\u067e\u0633 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>sales<\/code> \u0645\u062c\u0645\u0648\u0639\u0647.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062a\u0645\u0627\u0645 \u0641\u0631\u0648\u0634\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0645\u06cc \u06a9\u0646\u062f <code>sales<\/code> \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0648 \u062a\u0645\u0627\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getSales<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">setSales<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/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\">docRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sales<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">q<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">query<\/span><span class=\"p\">(<\/span><span class=\"nx\">docRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">orderBy<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">timestamp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span>\n    <span class=\"nx\">onSnapshot<\/span><span class=\"p\">(<\/span><span class=\"nx\">q<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">snapshot<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"na\">docs<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span>\n            <span class=\"nx\">snapshot<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"na\">d<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">docs<\/span><span class=\"p\">.<\/span><span class=\"nx\">unshift<\/span><span class=\"p\">(<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">(),<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">})<\/span>\n            <span class=\"p\">});<\/span>\n        <span class=\"nx\">setSales<\/span><span class=\"p\">(<\/span><span class=\"nx\">docs<\/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=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">setSales<\/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>\u062f\u0631 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f\u060c \u06cc\u06a9 \u06a9\u0627\u062f\u0631 \u06a9\u0644 \u0645\u0628\u0644\u063a \u062d\u0627\u0635\u0644 \u0627\u0632 \u0641\u0631\u0648\u0634 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u06a9\u0644 \u0645\u0628\u0644\u063a \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getTotalSales<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">setTotalSales<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/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\">unsub<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">onSnapshot<\/span><span class=\"p\">(<\/span><span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sales<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"nx\">doc<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">let<\/span> <span class=\"na\">totalSales<\/span><span class=\"p\">:<\/span><span class=\"kr\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\n            <span class=\"nx\">doc<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"na\">d<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">totalSales<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">().<\/span><span class=\"nx\">totalAmount<\/span>\n            <span class=\"p\">});<\/span>\n            <span class=\"nx\">setTotalSales<\/span><span class=\"p\">(<\/span><span class=\"nx\">totalSales<\/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=\"nx\">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>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u062f\u0631 \u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0641\u0631\u0648\u0634 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0641\u0642\u0637 \u062f\u0631 \u06cc\u06a9 \u0631\u0648\u0632 \u062e\u0627\u0635 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f.  \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0645\u06cc \u06a9\u0646\u062f <code>sales<\/code> \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0648 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0641\u0631\u0648\u0634 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u062f\u0631 \u06cc\u06a9 \u0631\u0648\u0632 \u062e\u0627\u0635. <br \/>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0641\u0631\u0648\u0634 \u0647\u0641\u062a\u06af\u06cc\u060c \u0645\u0627\u0647\u0627\u0646\u0647\u060c \u0633\u0647 \u0645\u0627\u0647\u0647 \u06cc\u0627 \u0633\u0627\u0644\u0627\u0646\u0647 \u0631\u0627 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc\u062f.  \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0641\u0631\u0645\u062a Date \u0631\u0627 \u0628\u0627 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0645\u0646\u0627\u0633\u0628 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getSalesForDay<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">date<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSales<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/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\">day<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">date<\/span><span class=\"p\">?.<\/span><span class=\"nx\">getDate<\/span><span class=\"p\">()<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">month<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">date<\/span><span class=\"p\">?.<\/span><span class=\"nx\">getMonth<\/span><span class=\"p\">()<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"na\">year<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">date<\/span><span class=\"p\">?.<\/span><span class=\"nx\">getFullYear<\/span><span class=\"p\">()<\/span>\n\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">day<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">undefined<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">month<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">undefined<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">year<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">startDate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">year<\/span><span class=\"p\">,<\/span> <span class=\"nx\">month<\/span><span class=\"p\">,<\/span> <span class=\"nx\">day<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">endDate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">year<\/span><span class=\"p\">,<\/span> <span class=\"nx\">month<\/span><span class=\"p\">,<\/span> <span class=\"nx\">day<\/span><span class=\"p\">,<\/span> <span class=\"mi\">23<\/span><span class=\"p\">,<\/span> <span class=\"mi\">59<\/span><span class=\"p\">,<\/span> <span class=\"mi\">59<\/span><span class=\"p\">);<\/span>\n\n            <span class=\"kd\">const<\/span> <span class=\"nx\">docRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">collection<\/span><span class=\"p\">(<\/span><span class=\"nx\">db<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sales<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">q<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">query<\/span><span class=\"p\">(<\/span><span class=\"nx\">docRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">orderBy<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">timestamp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span> <span class=\"nx\">where<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">timestamp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">&gt;=<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Timestamp<\/span><span class=\"p\">.<\/span><span class=\"nx\">fromDate<\/span><span class=\"p\">(<\/span><span class=\"nx\">startDate<\/span><span class=\"p\">)),<\/span> <span class=\"nx\">where<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">timestamp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">&lt;=<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Timestamp<\/span><span class=\"p\">.<\/span><span class=\"nx\">fromDate<\/span><span class=\"p\">(<\/span><span class=\"nx\">endDate<\/span><span class=\"p\">)))<\/span>\n\n            <span class=\"nx\">onSnapshot<\/span><span class=\"p\">(<\/span><span class=\"nx\">q<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">snapshot<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n                <span class=\"kd\">const<\/span> <span class=\"na\">docs<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span>\n                <span class=\"nx\">snapshot<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"na\">d<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nx\">docs<\/span><span class=\"p\">.<\/span><span class=\"nx\">unshift<\/span><span class=\"p\">(<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">(),<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">d<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">})<\/span>\n                <span class=\"p\">});<\/span>\n                <span class=\"nx\">setSales<\/span><span class=\"p\">(<\/span><span class=\"nx\">docs<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">})<\/span>\n        <span class=\"p\">}<\/span>\n\n     <span class=\"p\">}<\/span>\n    <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=\"nx\">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<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\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645 \u0628\u0627\u0628\u062a \u0633\u0627\u062e\u062a\u0646 \u0622\u0646 \u062a\u0627 \u0627\u06cc\u0646\u062c\u0627\u06cc \u06a9\u0627\u0631!  \u062a\u0648 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc<\/p>\n<ul>\n<li>Firebase \u0686\u06cc\u0633\u062a\u060c<\/li>\n<li>\u0686\u06af\u0648\u0646\u0647 Firebase \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c<\/li>\n<li>\u0646\u062d\u0648\u0647 \u06a9\u0627\u0631 \u0628\u0627 Firebase Auth \u0648 Firebase Firestore \u0648<\/li>\n<li>\u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0648\u0634<\/li>\n<\/ul>\n<p>\u0645\u0646 \u06cc\u06a9 \u0646\u0633\u062e\u0647 \u0632\u0646\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062e\u062a\u0647 \u0627\u0645\u060c \u0622\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.  \u06a9\u062f \u0645\u0646\u0628\u0639 \u0646\u06cc\u0632 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n<p>Firebase \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0647\u0645\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u062a\u0645\u0627\u0645 \u067e\u0634\u062a\u0647 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u06af\u0648\u0646\u0647 \u062a\u062c\u0631\u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc Backend \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u0627\u0632 Firebase \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646!  \ud83c\udf89<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7%D8%B2_%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%F0%9F%99%82\"><\/span>\n<p>  \u0628\u0627\u0632 \u0628\u0647 \u06a9\u0627\u0631\ud83d\ude42<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0622\u06cc\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0644\u0630\u062a \u0628\u0631\u062f\u06cc\u062f \u06cc\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0646\u0642\u0634 \u0627\u0632 \u0631\u0627\u0647 \u062f\u0648\u0631\u060c \u062a\u0645\u0627\u0645 \u0648\u0642\u062a \u06cc\u0627 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0628\u0647 \u06cc\u06a9 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0641\u0646\u06cc \/ React Developer \u0628\u0627 \u062a\u062c\u0631\u0628\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f\u061f  \u0647\u0631 \u0645\u0648\u0642\u0639 \u062e\u0648\u0627\u0633\u062a\u06cc \u0628\u0627 \u0645\u0646 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631.<br \/>\u06af\u06cc\u062a \u0647\u0627\u0628 ||  \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646 ||  <a href=\"https:\/\/twitter.com\/dayvid_JS\" rel=\"nofollow noopener\" target=\"_blank\">\u062a\u0648\u06cc\u06cc\u062a\u0631<\/a><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/1684233579_136_How-I-built-an-event-ticketing-system-with-Nextjs-and.png\" alt=\"\u0628\u0631\u0627\u06cc \u062f\u06cc\u0648\u06cc\u062f \u0642\u0647\u0648\u0647 \u0628\u062e\u0631\" loading=\"lazy\" width=\"800\" height=\"225\" title=\"\"><br \/><img decoding=\"async\" src=\"https:\/\/i.giphy.com\/media\/fVtcfEXWQJQUbsF1sH\/giphy.gif\" alt=\"\u0645\u062a\u0634\u06a9\u0631\u0645\" loading=\"lazy\" width=\"480\" height=\"480\" data-animated=\"true\" title=\"\"><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0648\u0634 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0628\u0647 \u0635\u0627\u062d\u0628\u0627\u0646 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u06cc\u0627 \u0635\u0646\u062f\u0648\u0642\u062f\u0627\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js v13\u060c Typescript \u0648 Firebase\u060c \u0641\u0631\u0648\u0634 \u0631\u0627 \u062b\u0628\u062a \u0648 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0646\u062f. \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0634\u06af\u0641\u062a\u200c\u0627\u0646\u06af\u06cc\u0632 Firebase\u060c \u0645\u0627\u0646\u0646\u062f \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u062f\u0627\u062f\u0647 \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":28291,"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-28289","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\/28289","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=28289"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/28289\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/28291"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=28289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=28289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=28289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}