{"id":29222,"date":"2023-07-04T21:34:38","date_gmt":"2023-07-04T18:04:38","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/"},"modified":"2023-07-04T21:34:38","modified_gmt":"2023-07-04T18:04:38","slug":"typescript-crud-api-with-trpc-4689","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/","title":{"rendered":"Typescript CRUD API: Next.js\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker"},"content":{"rendered":"<div data-article-id=\"1525860\" id=\"article-body\">\n<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 FULL CRUD API\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0641\u0647\u0645\u06cc\u062f:<\/p>\n<ul>\n<li>Next.js <\/li>\n<li>TypeScript <\/li>\n<li>Tailwind CSS<\/li>\n<li>tRPC<\/li>\n<li>\u067e\u0631\u06cc\u0633\u0645\u0627<\/li>\n<li>Postgres<\/li>\n<li>\u062f\u0627\u06a9\u0631<\/li>\n<\/ul>\n<p>\u0622\u0646\u0647\u0627 \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u0645\u0627 \u0645\u062b\u0627\u0644 \u0631\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u0627\u0633\u06cc \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0642\u0627\u0628\u0644 \u062f\u0631\u06a9 \u0628\u0627\u0634\u062f.  \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 Zod\u060c \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0646\u0633\u062e\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u06cc\u062f:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Gf9RkaHnsR8\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=Gf9RkaHnsR8<\/a><br \/>\n<\/iframe>\n<\/p>\n<p>\u0647\u0645\u0647 \u06a9\u062f\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646 \u062f\u0631 GitHub \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f (\u0644\u06cc\u0646\u06a9 \u062f\u0631 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648\u06cc\u062f\u06cc\u0648).<\/p>\n<p>\u0628\u06cc\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/#%F0%9F%8F%81_%D9%85%D8%B9%D8%B1%D9%81%DB%8C\" >\ud83c\udfc1 \u0645\u0639\u0631\u0641\u06cc<\/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\/typescript-crud-api-with-trpc-4689\/#%F0%9F%91%A3_%D9%85%D8%B1%D8%A7%D8%AD%D9%84\" >\ud83d\udc63 \u0645\u0631\u0627\u062d\u0644<\/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\/typescript-crud-api-with-trpc-4689\/#%F0%9F%92%A1_%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\ud83d\udca1 \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/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\/typescript-crud-api-with-trpc-4689\/#%F0%9F%9A%80_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Create_T3_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\ud83d\ude80 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 Create T3 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/#%F0%9F%90%B3_%D8%B8%D8%B1%D9%81_Postgres_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Docker_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\" >\ud83d\udc33 \u0638\u0631\u0641 Postgres \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/#%F0%9F%94%BC_%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Prisma_%D8%A8%D9%87_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_Postgres_%D9%85%D8%AA%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\" >\ud83d\udd3c \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Prisma \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Postgres \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/#%E2%8C%A8%EF%B8%8F_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D8%B1%D8%A7_%DA%A9%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u2328\ufe0f \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0631\u0627 \u06a9\u062f \u06a9\u0646\u06cc\u062f<\/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\/typescript-crud-api-with-trpc-4689\/#%F0%9F%93%9C_%D9%81%D8%A7%DB%8C%D9%84_examplets\" >\ud83d\udcdc \u0641\u0627\u06cc\u0644 example.ts<\/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\/typescript-crud-api-with-trpc-4689\/#%F0%9F%93%9C_%D9%81%D8%A7%DB%8C%D9%84_indextsx\" >\ud83d\udcdc \u0641\u0627\u06cc\u0644 index.tsx<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/typescript-crud-api-with-trpc-4689\/#%F0%9F%8F%81_%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\ud83c\udfc1 \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8F%81_%D9%85%D8%B9%D8%B1%D9%81%DB%8C\"><\/span>\n<p>  \ud83c\udfc1 \u0645\u0639\u0631\u0641\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0637\u0631\u062d\u06cc \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p><\/p>\n<p>\u0645\u0627 \u067e\u0646\u062c \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u0627\u0635\u0644\u06cc CRUD \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<p>\u0627\u064a\u062c\u0627\u062f \u0643\u0631\u062f\u0646<br \/>\u0647\u0645\u0647 \u0627\u0634 \u0631\u0627 \u0628\u062e\u0648\u0627\u0646<br \/>\u06cc\u06a9\u06cc \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<br \/>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc<br \/>\u062d\u0630\u0641<\/p>\n<p>\u0645\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Create T3 App \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0648 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 Postgres \u06a9\u0647 \u062f\u0631 \u06cc\u06a9 \u0638\u0631\u0641 \u062f\u0627\u06a9\u0631 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%91%A3_%D9%85%D8%B1%D8%A7%D8%AD%D9%84\"><\/span>\n<p>  \ud83d\udc63 \u0645\u0631\u0627\u062d\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u0627 \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0647\u0645\u0631\u0627\u0647 \u0645\u06cc \u0634\u0648\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0627\u062d\u0644 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<ol>\n<li>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/li>\n<li>\u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u0648 \u0646\u0635\u0628 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc<\/li>\n<li>\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Postgres \u0631\u0627 \u0628\u0627 Docker \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/li>\n<li>Prisma \u0648 \u0634\u0645\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0631\u0648\u06cc\u0647 \u0647\u0627\u06cc tRPC \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f<\/li>\n<li>\u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 index.tsx \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 \u0638\u0627\u0647\u0631\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f<\/li>\n<\/ol>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%92%A1_%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  \ud83d\udca1 \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0644\u0632\u0627\u0645\u0627\u062a:<\/p>\n<ul>\n<li>Node.js<\/li>\n<li>\u062f\u0627\u06a9\u0631<\/li>\n<li>\u0647\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 (\u0645\u0646 \u0627\u0632 \u06a9\u062f VS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f)<\/li>\n<\/ul>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0633\u062e\u0647 \u0647\u0627\u06cc Node \u0648 Docker \u0631\u0627 \u0628\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0646 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>node --version\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>docker --version\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u0627\u0632 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0647\u0627 \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\/07\/1688493876_401_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"460\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%9A%80_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Create_T3_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \ud83d\ude80 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 Create T3 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0627\u0632 &#8220;Create T3 App&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 CLI \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0628\u0627 \u062a\u0645\u0627\u0645 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688493877_788_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"550\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm create t3-app@latest\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0647 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0628\u0647 \u062c\u0632 nextauth (\u0627\u0632 \u0641\u0627\u0635\u0644\u0647 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628\/\u0644\u063a\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \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\/07\/1688493877_156_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"436\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0646 \u0645\u0639\u0645\u0648\u0644\u0627 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f.<\/p>\n<p>\u0633\u067e\u0633 \u0648\u0627\u0631\u062f \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0634\u0648\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>cd my-t3-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\u06a9\u0646\u0648\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 IDE \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. <br \/>\u0627\u06af\u0631 \u0627\u0632 VS Code \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>code .\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0628\u0627\u06cc\u062f \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688493877_216_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"427\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0628\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0646 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm run dev\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u06cc\u062f <code>localhost:3000<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688493877_640_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"402\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%90%B3_%D8%B8%D8%B1%D9%81_Postgres_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Docker_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \ud83d\udc33 \u0638\u0631\u0641 Postgres \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0638\u0631\u0641 Postgres \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>docker-compose.yml<\/code> \u062f\u0631 \u0633\u0637\u062d \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647<\/p>\n<p>\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u067e\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight yaml\"><code><span class=\"na\">version<\/span><span class=\"pi\">:<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">3.9\"<\/span>\n\n<span class=\"na\">services<\/span><span class=\"pi\">:<\/span>\n  <span class=\"na\">db<\/span><span class=\"pi\">:<\/span>\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">db<\/span>\n    <span class=\"na\">image<\/span><span class=\"pi\">:<\/span> <span class=\"s\">postgres:12<\/span>\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">5432:5432\"<\/span>\n    <span class=\"na\">environment<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">POSTGRES_PASSWORD=postgres<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">POSTGRES_USER=postgres<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">POSTGRES_DB=postgres<\/span>\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">pgdata:\/var\/lib\/postgresql\/data<\/span>\n\n<span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\n  <span class=\"na\">pgdata<\/span><span class=\"pi\">:<\/span> <span class=\"pi\">{}<\/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\u0648\u0636\u06cc\u062d:<\/p>\n<ul>\n<li>\n<p><code>db<\/code>  \u0646\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 \u0648\u0627\u062d\u062f (\u06a9\u0627\u0646\u062a\u06cc\u0646\u0631) \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f<\/p>\n<\/li>\n<li>\n<p><code>container_name<\/code>  \u0646\u0627\u0645 \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0627 \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u0622\u0646 \u0627\u0633\u062a <code>db<\/code><\/p>\n<\/li>\n<li>\n<p><code>image<\/code>  \u062a\u0635\u0648\u06cc\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0632 DockerHub \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0627\u0632 Postgres \u0646\u0633\u062e\u0647 12 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f<\/p>\n<\/li>\n<li>\n<p><code>ports<\/code>  \u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u0627\u0632 \u067e\u0648\u0631\u062a \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc-\u062f\u0627\u062e\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0633\u0631\u062f\u0631\u06af\u0645\u06cc \u0627\u0632 Postgres one \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p><code>environment<\/code>  \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645: \u0645\u0627 \u0627\u0632 &#8220;postgres&#8221; \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u060c \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0648 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f (\u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u0646\u062f\u0647\u06cc\u062f!)<\/p>\n<\/li>\n<li>\n<p><code>volumes<\/code>  \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062d\u062c\u0645 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u062d\u062c\u0645 \u0628\u0627 \u0646\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u06cc\u0632 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<\/ul>\n<p>\u062d\u0627\u0644 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u06cc\u0646 \u0638\u0631\u0641 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>docker compose up -d\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0622\u0645\u0627\u062f\u0647 \u0648 \u0641\u0639\u0627\u0644 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>docker ps -a\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688493877_561_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"480\" title=\"\"><\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0645\u062a\u0635\u0644 \u06a9\u0631\u062f\u0647 \u0648 \u0637\u0631\u062d \u062f\u06cc\u062a\u0627\u0628\u06cc\u0633 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%94%BC_%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86_%D8%B1%D8%A7_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Prisma_%D8%A8%D9%87_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_Postgres_%D9%85%D8%AA%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \ud83d\udd3c \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Prisma \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Postgres \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u060c \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>.env<\/code> \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>DATABASE_URL=\"postgresql:\/\/postgres:postgres@localhost:5432\/postgres\"\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 \u0641\u0627\u06cc\u0644 \u0628\u0647 .gitignore \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0647 \u0645\u062e\u0632\u0646 \u0639\u0645\u0648\u0645\u06cc \u0645\u0646\u062a\u0642\u0644 \u0646\u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06af\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f <code>prisma\/schema.prisma<\/code> \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ This is your Prisma schema file,\n\/\/ learn more about it in the docs: https:\/\/pris.ly\/d\/prisma-schema\n\ngenerator client {\n    provider = \"prisma-client-js\"\n    previewFeatures = [\"jsonProtocol\"]\n}\n\ndatasource db {\n    provider = \"postgresql\"\n    url      = env(\"DATABASE_URL\")\n}\n\n\/\/User with an id, name and email as strings\nmodel User {\n    id    String @id @default(uuid())\n    name  String\n    email String\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\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>\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>postgresql<\/code> \u0648 \u0645\u062f\u0644 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627:<\/p>\n<p>\u0647\u0645\u0647 \u0641\u06cc\u0644\u062f\u0647\u0627 \u0631\u0634\u062a\u0647 \u0647\u0633\u062a\u0646\u062f. <\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u062f\u0631 DB\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npx prisma migrate dev --name init\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 Prisma Studio \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0628\u0632\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627 Prisma \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0646\u0648\u0639:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npx prisma studio\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>localhost:5555<\/code><\/p>\n<p>\u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0631\u06a9\u0648\u0631\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0628\u0639\u062f\u0627\u064b \u0645\u0641\u06cc\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688493877_389_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"539\" title=\"\"><\/p>\n<p>__<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E2%8C%A8%EF%B8%8F_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D8%B1%D8%A7_%DA%A9%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u2328\ufe0f \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0631\u0627 \u06a9\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%9C_%D9%81%D8%A7%DB%8C%D9%84_examplets\"><\/span>\n<p>  \ud83d\udcdc \u0641\u0627\u06cc\u0644 example.ts<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0645\u062a\u0635\u0644 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>src\/server\/api\/routers\/example.ts<\/code> \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \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\">z<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zod<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createTRPCRouter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">publicProcedure<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">~\/server\/api\/trpc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">idSchema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"nx\">object<\/span><span class=\"p\">({<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"kr\">string<\/span><span class=\"p\">()<\/span> <span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">userSchema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"nx\">object<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"kr\">string<\/span><span class=\"p\">(),<\/span>\n  <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"kr\">string<\/span><span class=\"p\">(),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">userUpdateSchema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"nx\">object<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"kr\">string<\/span><span class=\"p\">(),<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"kr\">string<\/span><span class=\"p\">(),<\/span>\n  <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"kr\">string<\/span><span class=\"p\">(),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">exampleRouter<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createTRPCRouter<\/span><span class=\"p\">({<\/span>\n  <span class=\"c1\">\/\/get all users<\/span>\n  <span class=\"na\">getAll<\/span><span class=\"p\">:<\/span> <span class=\"nx\">publicProcedure<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">ctx<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">findMany<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}),<\/span>\n\n  <span class=\"c1\">\/\/get user by id<\/span>\n  <span class=\"na\">getOne<\/span><span class=\"p\">:<\/span> <span class=\"nx\">publicProcedure<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">input<\/span><span class=\"p\">(<\/span><span class=\"nx\">idSchema<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">input<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">findUnique<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"nx\">idSchema<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">input<\/span><span class=\"p\">),<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}),<\/span>\n\n  <span class=\"c1\">\/\/create user<\/span>\n  <span class=\"na\">createUser<\/span><span class=\"p\">:<\/span> <span class=\"nx\">publicProcedure<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">input<\/span><span class=\"p\">(<\/span><span class=\"nx\">userSchema<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">mutation<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">input<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userSchema<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">input<\/span><span class=\"p\">),<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}),<\/span>\n\n  <span class=\"c1\">\/\/update user<\/span>\n  <span class=\"na\">updateUser<\/span><span class=\"p\">:<\/span> <span class=\"nx\">publicProcedure<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">input<\/span><span class=\"p\">(<\/span><span class=\"nx\">userUpdateSchema<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">mutation<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">input<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">input<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nx\">toString<\/span><span class=\"p\">(),<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userUpdateSchema<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">input<\/span><span class=\"p\">),<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}),<\/span>\n\n  <span class=\"c1\">\/\/delete user<\/span>\n  <span class=\"na\">deleteUser<\/span><span class=\"p\">:<\/span> <span class=\"nx\">publicProcedure<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">input<\/span><span class=\"p\">(<\/span><span class=\"nx\">idSchema<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">mutation<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">input<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"nx\">idSchema<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">input<\/span><span class=\"p\">),<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0648\u0636\u06cc\u062d:<\/p>\n<ul>\n<li>\n<p><code>z<\/code>  \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0648\u0631\u0648\u062f\u06cc \u0648 \u062e\u0631\u0648\u062c\u06cc \u062a\u0648\u0627\u0628\u0639 \u0627\u0633\u062a.  \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0648\u0631\u0648\u062f\u06cc \u0648 \u062e\u0631\u0648\u062c\u06cc \u062a\u0648\u0627\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>createTRPCRouter<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0631\u0648\u062a\u0631 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u06cc\u06a9 \u0634\u06cc \u0628\u0627 \u062a\u0648\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0631 \u0645\u0639\u0631\u0636 \u0646\u0645\u0627\u06cc\u0634 \u0628\u06af\u0630\u0627\u0631\u06cc\u0645 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>publicProcedure<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>idSchema<\/code>  \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc \u0628\u0627 id \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0634\u062a\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>userSchema<\/code>  \u0637\u0631\u062d\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc \u0628\u0627 \u0646\u0627\u0645 \u0648 \u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0634\u062a\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>userUpdateSchema<\/code>  \u0637\u0631\u062d\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc \u0628\u0627 \u0634\u0646\u0627\u0633\u0647\u060c \u0646\u0627\u0645 \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0634\u062a\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>exampleRouter<\/code>  \u0631\u0648\u062a\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062a\u0648\u0627\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>getAll<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>getOne<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0627 id \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>createUser<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>updateUser<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>deleteUser<\/code>  \u062a\u0627\u0628\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0628\u06cc\u0634\u062a\u0631 \u0628\u0647 \u0622\u062f\u0631\u0633 \u0632\u06cc\u0631 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f: https:\/\/youtu.be\/Gf9RkaHnsR8?t=406<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%9C_%D9%81%D8%A7%DB%8C%D9%84_indextsx\"><\/span>\n<p>  \ud83d\udcdc \u0641\u0627\u06cc\u0644 index.tsx<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0641\u0642\u0637 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0627\u06cc\u062f \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>src\/pages\/index.tsx<\/code> \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u067e\u0631 \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\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">api<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">~\/utils\/api<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/define constants<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setName<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEmail<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">nameToUpdate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNameToUpdate<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">emailToUpdate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEmailToUpdate<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUserId<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">userIdToUpdate<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUserIdToUpdate<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">userIdToDelete<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUserIdToDelete<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/define functions<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">fetchAllUsers<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">example<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAll<\/span><span class=\"p\">.<\/span><span class=\"nx\">useQuery<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">fetchOneUser<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">example<\/span><span class=\"p\">.<\/span><span class=\"nx\">getOne<\/span><span class=\"p\">.<\/span><span class=\"nx\">useQuery<\/span><span class=\"p\">({<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">createUserMutation<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">example<\/span><span class=\"p\">.<\/span><span class=\"nx\">createUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">useMutation<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">updateUserMutation<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">example<\/span><span class=\"p\">.<\/span><span class=\"nx\">updateUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">useMutation<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">deleteUserMutation<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">api<\/span><span class=\"p\">.<\/span><span class=\"nx\">example<\/span><span class=\"p\">.<\/span><span class=\"nx\">deleteUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">useMutation<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"c1\">\/\/define handlers<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleCreateUser<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">createUserMutation<\/span><span class=\"p\">.<\/span><span class=\"nx\">mutateAsync<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nx\">setName<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">setEmail<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">fetchAllUsers<\/span><span class=\"p\">.<\/span><span class=\"nx\">refetch<\/span><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=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleUpdateUser<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">updateUserMutation<\/span><span class=\"p\">.<\/span><span class=\"nx\">mutateAsync<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userIdToUpdate<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">nameToUpdate<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">emailToUpdate<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nx\">setNameToUpdate<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">setEmailToUpdate<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">setUserIdToUpdate<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">fetchAllUsers<\/span><span class=\"p\">.<\/span><span class=\"nx\">refetch<\/span><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=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleDeleteUser<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">deleteUserMutation<\/span><span class=\"p\">.<\/span><span class=\"nx\">mutateAsync<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userIdToDelete<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nx\">setUserIdToDelete<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">fetchAllUsers<\/span><span class=\"p\">.<\/span><span class=\"nx\">refetch<\/span><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=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/return an empty div<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mx-auto p-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Get<\/span> <span class=\"nx\">All<\/span> <span class=\"nx\">Users<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">fetchAllUsers<\/span><span class=\"p\">.<\/span><span class=\"nx\">refetch<\/span><span class=\"p\">()}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"nx\">Get<\/span> <span class=\"nx\">All<\/span> <span class=\"nx\">Users<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text- mb-4 mt-4 grid grid-cols-3 gap-4 font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Id<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Name<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Email<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">fetchAllUsers<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span> <span class=\"o\">&amp;&amp;<\/span>\n        <span class=\"nx\">fetchAllUsers<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/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=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">my-4 grid grid-cols-3 gap-4 rounded border border-gray-300 bg-white p-4 shadow<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/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=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* Get one user UI *\/<\/span><span class=\"p\">}<\/span>\n\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Get<\/span> <span class=\"nx\">One<\/span> <span class=\"nx\">User<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 flex<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mr-2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Enter user id to get<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setUserId<\/span><span class=\"p\">(<\/span><span class=\"nb\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">))}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">fetchOneUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">refetch<\/span><span class=\"p\">()}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">Get<\/span> <span class=\"nx\">One<\/span> <span class=\"nx\">User<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"nx\">fetchOneUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">fetchOneUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Email<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">fetchOneUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* Create User *\/<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Create<\/span> <span class=\"nx\">New<\/span> <span class=\"nx\">User<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 flex<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mr-2 w-1\/2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Name<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setName<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-1\/2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Email<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">email<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setEmail<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleCreateUser<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"nx\">Create<\/span> <span class=\"nx\">User<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* Update User *\/<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Update<\/span> <span class=\"nx\">User<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 flex<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mr-2 w-1\/2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Name to update<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">nameToUpdate<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setNameToUpdate<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-1\/2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Email to update<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">emailToUpdate<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setEmailToUpdate<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Enter user id to update<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mr-2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userIdToUpdate<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setUserIdToUpdate<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n        <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mt-2 rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleUpdateUser<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"nx\">Update<\/span> <span class=\"nx\">User<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* Delete User *\/<\/span><span class=\"p\">}<\/span>\n\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-4 text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Delete<\/span> <span class=\"nx\">User<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Enter user id to delete<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mr-2 border border-gray-300 p-2<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userIdToDelete<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setUserIdToDelete<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n        <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mt-2 rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleDeleteUser<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"nx\">Delete<\/span> <span class=\"nx\">User<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\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\u0648\u0636\u06cc\u062d: <\/p>\n<ul>\n<li>\n<p>\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useRouter<\/code> \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0627\u0632 URL \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useMutation<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 <code>react-query<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0648 \u062d\u0630\u0641 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useQuery<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 <code>react-query<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0647\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0648\u0627\u06a9\u0634\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0627 \u067e\u0646\u062c \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u062f\u0627\u0631\u06cc\u0645:<\/p>\n<\/li>\n<li>\n<p><code>getAllUsers<\/code>  &#8211; \u0647\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<\/li>\n<li>\n<p><code>getOneUser<\/code>  &#8211; \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f <\/p>\n<\/li>\n<li>\n<p><code>handleCreateUser<\/code>  &#8211; \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<\/li>\n<li>\n<p><code>handleUpdateUser<\/code>  &#8211; \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<\/li>\n<li>\n<p><code>handleDeleteUser<\/code>  &#8211; \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u0628\u0627 Tailwind CSS \u0627\u0633\u062a\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0647\u0631 \u0639\u0645\u0644\u06cc\u0627\u062a\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u062c\u062f\u06cc\u062f\u060c \u0647\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631 \u062c\u062f\u06cc\u062f \u0631\u0627 \u062f\u0631 \u0644\u06cc\u0633\u062a \u0628\u0628\u06cc\u0646\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0628\u06cc\u0634\u062a\u0631\u060c \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f: https:\/\/youtu.be\/Gf9RkaHnsR8<\/p>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0646\u0647\u0627\u06cc\u06cc \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688493878_819_Typescript-CRUD-API-Nextjs\u060c-Tailwind\u060c-tRPC\u060c-Prisma-Postgres\u060c-Docker.png\" alt=\"Typescript CRUD API: Next.js\u060c TypeScript\u060c Tailwind\u060c tRPC\u060c Prisma Postgres\u060c Docker\" loading=\"lazy\" width=\"800\" height=\"676\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u0634\u0627\u0631\u06a9\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u06cc\u06a9 \u0631\u0648\u0627\u0628\u0637 \u0639\u0645\u0648\u0645\u06cc \u062f\u0631 GitHub \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f (\u0644\u06cc\u0646\u06a9 \u062f\u0631 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648\u06cc\u062f\u06cc\u0648).<\/p>\n<p>__<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8F%81_%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \ud83c\udfc1 \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u06cc\u06a9 CRUD API \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0633\u0627\u062e\u062a\u06cc\u0645:<\/p>\n<ul>\n<li>Next.js <\/li>\n<li>TypeScript <\/li>\n<li>Tailwind CSS<\/li>\n<li>tRPC<\/li>\n<li>\u067e\u0631\u06cc\u0633\u0645\u0627<\/li>\n<li>Postgres<\/li>\n<li>\u062f\u0627\u06a9\u0631<\/li>\n<\/ul>\n<p>\u0627\u06af\u0631 \u0646\u0633\u062e\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u06cc\u062f:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Gf9RkaHnsR8\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=Gf9RkaHnsR8<\/a><br \/>\n<\/iframe>\n<\/p>\n<p>\u0647\u0645\u0647 \u06a9\u062f\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646 \u062f\u0631 GitHub \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f (\u0644\u06cc\u0646\u06a9 \u062f\u0631 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648\u06cc\u062f\u06cc\u0648).<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0641\u0631\u0627\u0646\u0686\u0633\u06a9\u0648 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 FULL CRUD API\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0641\u0647\u0645\u06cc\u062f: Next.js TypeScript Tailwind CSS tRPC \u067e\u0631\u06cc\u0633\u0645\u0627 Postgres \u062f\u0627\u06a9\u0631 \u0622\u0646\u0647\u0627 \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u0645\u0627 \u0645\u062b\u0627\u0644 \u0631\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u0627\u0633\u06cc \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0642\u0627\u0628\u0644 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":29224,"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-29222","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\/29222","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=29222"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29222\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/29224"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=29222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=29222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=29222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}