{"id":7448,"date":"2023-02-21T10:38:16","date_gmt":"2023-02-21T07:08:16","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-build-a-nextjs-blog-with-hygraph-and-deploy-to-vercel-in-2023-1ahd\/"},"modified":"2023-02-21T10:38:16","modified_gmt":"2023-02-21T07:08:16","slug":"how-to-build-a-nextjs-blog-with-hygraph-and-deploy-to-vercel-in-2023-1ahd","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-build-a-nextjs-blog-with-hygraph-and-deploy-to-vercel-in-2023-1ahd\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af Nextjs \u0628\u0627 Hygraph \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 Vercel \u062f\u0631 \u0633\u0627\u0644 2023."},"content":{"rendered":"
\n

\u0645\u0639\u0631\u0641\u06cc<\/strong>
\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0686\u0627\u0644\u0634 100 \u0631\u0648\u0632\u0647 \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0627\u0645\u0633\u0627\u0644\u060c \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af Next.js \u0628\u0627 Hygraph \u06a9\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0645\u0646 \u0631\u0627 \u062a\u0642\u0648\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0628\u0633\u0627\u0632\u0645 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0646\u062f \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0645\u0633\u062a\u0646\u062f \u06a9\u0646\u0645.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0646\u0648\u0634\u062a\u0647\u060c \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631 \u062f\u0648 \u0645\u0631\u062d\u0644\u0647 \u0633\u0627\u062f\u0647 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u06a9\u0627\u0645\u0644\u0627 \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0632 \u0648\u0628\u0644\u0627\u06af\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u0633\u0627\u0632\u06cc\u062f.<\/p>\n

\u062a\u0648\u0635\u06cc\u0647 \u0634\u062f\u0647<\/strong>: \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f Node v16<\/strong> \u06cc\u0627 \u0628\u0627\u0644\u0627\u062a\u0631 \u0648 \u0647\u06cc\u06af\u0631\u0627\u0641<\/strong>.<\/p>\n

Next.js \u0686\u06cc\u0633\u062a\u061f<\/strong>
Next.js \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0627\u06a9\u0646\u0634 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a. Next.js \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c \u062a\u0648\u0644\u06cc\u062f \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0627\u0641\u0632\u0627\u06cc\u0634\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0627\u0632 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0627\u0646\u062a\u0632\u0627\u0639 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n

GraphQL \u0686\u06cc\u0633\u062a\u061f<\/strong>
Graphql \u0627\u0633\u0627\u0633\u0627\u064b \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0628\u0647 \u06cc\u06a9 API \u0627\u0633\u062a.<\/p>\n

Hygraph \u0686\u06cc\u0633\u062a\u061f<\/strong>
Hygraph \u06cc\u06a9 cms \u0628\u062f\u0648\u0646 \u0647\u062f \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0642\u0648\u06cc\u062a \u06a9\u0646\u062f. \u0628\u0631 \u062e\u0644\u0627\u0641 \u0633\u0627\u06cc\u0631 cms \u0647\u0627\u06cc \u0628\u062f\u0648\u0646 \u0647\u062f\u060c Hygraph \u0627\u0632 graphql \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0631\u0627 \u0627\u0632 \u06cc\u06a9 API \u0648\u0627\u062d\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n

Vercel \u0686\u06cc\u0633\u062a\u061f<\/strong>
Vercel \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0633\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0634\u0645\u0627 \u0627\u0633\u062a.<\/p>\n

\u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631\u0633\u062a \u0634\u06cc\u0631\u062c\u0647 \u0628\u0632\u0646\u06cc\u0645.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 1: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc GRAPHCMS BackEND.<\/strong>
\u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0628\u0647 https:\/\/hygraph.com\/ \u0628\u0631\u0648\u06cc\u062f \u0648 \u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0646\u062f\u0627\u0631\u06cc\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u06a9\u0646\u0648\u0646\u060c \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u067e\u0631\u0648\u0698\u0647<\/strong> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u06cc\u06a9 \u0646\u0627\u0645\u060c \u062a\u0648\u0636\u06cc\u062d \u0628\u062f\u0647\u06cc\u062f \u0648 \u0645\u0646\u0637\u0642\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u062a\u0648\u0635\u06cc\u0647 \u0634\u062f\u0647:<\/strong> \u0646\u0632\u062f\u06cc\u06a9 \u062a\u0631\u06cc\u0646 \u0645\u0646\u0637\u0642\u0647 \u0628\u0647 \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u0647\u062f\u0641 \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

– \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0637\u0631\u062d \u0645\u062d\u062a\u0648\u0627<\/strong><\/p>\n

\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0648 \u0645\u062f\u0644 \u0631\u0627 \u0628\u0647 \u0637\u0631\u062d \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u06cc\u06a9\u06cc \u0628\u0631\u0627\u06cc \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0648 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0646\u0648\u06cc\u0633\u0646\u062f\u0647.<\/p>\n

\u0645\u062f\u0644 \u0647\u0627 \u062f\u0631 Hygraph \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u06cc\u06a9 \u0645\u062f\u0644 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f \u0641\u06cc\u0644\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u062e\u0634 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a<\/p>\n

\u0627\u0632 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Hygraph \u062e\u0648\u062f\u060c \u0631\u0648\u06cc Schema \u0648 \u0633\u067e\u0633 \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f + Add<\/code><\/strong>. \u062d\u0627\u0644\u0627\u060c \u0648\u0631\u0648\u062f\u06cc “\u0646\u0648\u06cc\u0633\u0646\u062f\u0647”<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0622\u0646 \u0648 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062f\u0644<\/strong>.<\/p>\n

\u0628\u0631\u0627\u06cc \u0645\u062f\u0644 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647\u060c \u062f\u0648 \u0641\u06cc\u0644\u062f \u0646\u0627\u0645 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0648 \u0641\u06cc\u0644\u062f \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0646\u0627\u0645 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647: \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0644\u0641 \u0641\u06cc\u0644\u062f \u062a\u06a9 \u062e\u0637\u06cc<\/strong> \u0627\u0632 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062f\u0631 \u0632\u0628\u0627\u0646\u0647 Advanced \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0646\u0648\u06cc\u0633\u0646\u062f\u0647: \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0644\u0641 \u0641\u06cc\u0644\u062f \u0686\u0646\u062f \u062e\u0637\u06cc<\/strong> \u0627\u0632 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062f\u0631 \u0632\u0628\u0627\u0646\u0647 Advanced \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0647\u0648\u0631\u0627\u06cc! \u0634\u0645\u0627 \u0627\u0648\u0644\u06cc\u0646 \u0645\u062f\u0644 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f.<\/p>\n

\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u062f\u0644 Blogpost \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u06cc\u0646 \u0645\u062f\u0644 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0639\u0646\u0648\u0627\u0646\u060c \u06cc\u06a9 \u0641\u06cc\u0644\u062f Excerpt\u060c \u06cc\u06a9 \u0641\u06cc\u0644\u062f Slug\u060c \u06cc\u06a9 \u0642\u0633\u0645\u062a \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0648\u06cc\u0698\u0647 \u067e\u0633\u062a\u060c \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0642\u0627\u0644\u0628 \u0645\u062a\u0646 \u063a\u0646\u06cc \u0628\u0631\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0633\u062a \u0648 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0645\u0631\u062c\u0639 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u062f\u0627\u062f\u0646 \u0645\u062f\u0644 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0628\u0647 \u0622\u0646 \u0627\u0633\u062a. \u0645\u062f\u0644 \u067e\u0633\u062a.<\/p>\n

\u0639\u0646\u0648\u0627\u0646: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u062a\u06a9 \u062e\u0637\u06cc<\/strong>\u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06af\u0632\u06cc\u062f\u0647: \u0627\u0644\u0641 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0641\u06cc\u0644\u062f \u0686\u0646\u062f \u062e\u0637\u06cc<\/strong>\u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

Slug: \u06cc\u06a9 \u0641\u06cc\u0644\u062f Slug \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0642\u0633\u0645\u062a Slug\u060c \u0628\u0627\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0648\u0644\u06cc\u062f \u0645\u062b\u0644 \u062d\u0644\u0632\u0648\u0646 \u062d\u0631\u06a9\u062a\u06cc \u0627\u0632 \u0627\u0644\u06af\u0648<\/strong> \u0632\u06cc\u0631 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u0633\u0644\u0627\u06af \u0648 \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f {title}<\/code> \u062f\u0631 \u0642\u0633\u0645\u062a \u0627\u0644\u06af\u0648\u06cc \u0627\u0633\u0644\u0627\u06af \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u0633\u0644\u0627\u06af \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u06cc\u0644\u062f \u0639\u0646\u0648\u0627\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062a\u0648\u0644\u06cc\u062f \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0628\u0631\u06af\u0647 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc\u060c \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u0641\u06cc\u0644\u062f \u0631\u0627 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f<\/strong>\u060c \u0641\u06cc\u0644\u062f \u0631\u0627 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/strong>\u060c \u0645\u0637\u0627\u0628\u0642\u062a \u0628\u0627 \u0627\u0644\u06af\u0648\u06cc \u062e\u0627\u0635\u060c<\/strong> \u0648 \u0645\u0648\u0631\u062f \u063a\u06cc\u0631 \u062d\u0633\u0627\u0633<\/strong>.<\/p>\n

\u062a\u0635\u0648\u06cc\u0631 \u0648\u06cc\u0698\u0647: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0642\u0633\u0645\u062a \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u062f\u0627\u0631\u0627\u06cc\u06cc<\/strong>\u060c \u0627\u0632 coverPhoto \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u062d\u062a\u0648\u0627: \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0645\u062a\u0646 \u063a\u0646\u06cc \u0627\u0632 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u0631\u062c\u0639 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647: \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0645\u0631\u062c\u0639 \u0628\u0647 \u0645\u062f\u0644 BlogPost \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.
\u062f\u0631 \u062a\u0628 Define \u0631\u0627\u0628\u0637\u0647\u060c Allow only one model to be reference \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0631\u062c\u0639 \u062f\u0648\u0637\u0631\u0641\u0647\u060c \u0648 \u0627\u062c\u0627\u0632\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0644\u0627\u06af \u067e\u0633\u062a \u0628\u0647 \u0627\u0632\u0627\u06cc \u0647\u0631 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0631\u0627 \u0628\u062f\u0647\u06cc\u062f.
\u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u0631\u062c\u0639 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f \u0648 \u0646\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634\u06cc Author \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0628\u062f\u0647\u06cc\u062f.
\u062f\u0631 \u0632\u06cc\u0631 \u0628\u0631\u06af\u0647 \u0641\u06cc\u0644\u062f \u0645\u0639\u06a9\u0648\u0633\u060c \u0646\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634\u06cc Blogposts \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0628\u062f\u0647\u06cc\u062f.<\/p>\n

\u062e\u0648\u0628\u060c \u0627\u06cc\u0646 \u062a\u0645\u0627\u0645 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u0644 \u067e\u0633\u062a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc<\/strong>\u060c \u0631\u0641\u062a\u0646 \u0628\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc<\/strong> \u062f\u0631 \u0633\u0645\u062a \u0686\u067e \u0648 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u062a\u06a9 \u062e\u0637\u06cc \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc alt \u062a\u0635\u0648\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0647 \u0645\u062f\u0644 \u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0627\u06cc\u062f \u062f\u0631\u0633\u062a \u0628\u0627\u0634\u062f.<\/p>\n

\u062a\u0648\u0635\u06cc\u0647 \u0634\u062f\u0647:<\/strong> \u0642\u0628\u0644 \u0627\u0632 \u0627\u062f\u0627\u0645\u0647 \u0628\u0627 \u0628\u0642\u06cc\u0647 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u062f\u0644 \u067e\u0633\u062a \u062e\u0648\u062f \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u0633\u0627\u062e\u062a\u0646 \u062c\u0628\u0647\u0647<\/strong><\/p>\n

– \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Next.js<\/strong><\/p>\n

\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0628\u0627 Next.js \u0627\u0642\u062f\u0627\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f npx create-next-app@latest<\/code> \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0634\u0645\u0627<\/p>\n

\u062f\u0633\u062a\u0648\u0631 create-next-app \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u062a\u0648\u062c\u0647: \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0647\u0627\u06cc create-next-app \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc \u067e\u0631\u0633\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0645\u0627\u06cc\u0644 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u062e\u06cc\u0631 \/src<\/code> \u06cc\u0627 \u062a\u062c\u0631\u0628\u06cc \/app<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \/src<\/code> \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627.<\/p>\n

\u0628\u0639\u062f \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 Next.js \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0646\u0635\u0628 \u0634\u062f\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f cd project_name<\/code> \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644\u060c \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f code .<\/code> \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u06a9\u062f\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631\u06cc<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f npm install next-mdx-remote graphql-request graphql<\/code> \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0686\u0646\u062f \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u0648 \u0633\u067e\u0633 npm dev \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0648\u0631\u062a 3000 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u062c\u0631\u0627 \u0634\u0648\u062f http:\/\/localhost:3000.<\/code><\/strong><\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u062d\u0631\u06a9\u062a\u060c \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \/src \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n

\n
|--\/src\n|  |--\/Components\n|  |  |--Layout.js\n|  |--\/pages\n|  |  |--\/api\n|  |  |--_app.js\n|  |  |--_document.js\n|  |  |--index.js\n|  |  |--[slug].js\n|  |--\/styles\n|  |  |--global.css\n|  |  |--Home.module.css\n|  |  |--Layout.module.css\n|  |  |--SinglePost.module.css\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0631\u0627 \/\u062c\u0632\u0621<\/strong> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0634\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0645\u0648\u0644\u0641\u0647 layout.<\/p>\n
\u0631\u0627 \/\u0635\u0641\u062d\u0627\u062a<\/strong> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062d\u0627\u0648\u06cc \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
\u0631\u0627 \/\u0633\u0628\u06a9 \u0647\u0627<\/strong> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062d\u0627\u0648\u06cc \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0645\u0627 \u0627\u0633\u062a.<\/p>\n
– \u0633\u0627\u062e\u062a \u0627\u062c\u0632\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9<\/strong><\/p>\n
1. \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Layout.js.<\/strong><\/p>\n
\u062f\u0631 \u067e\u0648\u0634\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 Layout.js \u062d\u0627\u0648\u06cc \u06a9\u062f \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n
\n
import Link from \"next\/link\";\nimport styles from \"..\/styles\/Layout.module.css\";\n\nfunction Layout({ children }) {\n  return (\n    <>\n      <nav className={styles.nav}>\n        <div>\n          <Link href=\"https:\/\/dev.to\/\">\n            <h1>NextBlog 0.1<\/h1>\n          <\/Link>\n        <\/div>\n      <\/nav>\n      {children}\n    <\/>\n  );\n}\n\nexport default Layout;\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0628\u0644\u0648\u06a9 \u06a9\u062f \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f '{children}'<\/code> props \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f \u0648 \u06cc\u06a9 \u0644\u0648\u06af\u0648\u06cc \u0645\u062a\u0646\u06cc \u0633\u0627\u062f\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f \u0648 \u0648\u0633\u0627\u06cc\u0644 \u06a9\u0648\u062f\u06a9\u0627\u0646 \u062f\u0631 \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0634\u062f\u0647\u200c\u0627\u0646\u062f.<\/p>\n
2. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc CSS.<\/strong>
\u062a\u0648\u062c\u0647: \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0645\u0627 \u0628\u0647 \u0633\u0628\u06a9 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0646\u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u0686\u0646\u062f \u0641\u0627\u06cc\u0644 CSS \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u062f\u0631 \u0645\u0642\u0637\u0639\u06cc \u0628\u0647 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n
\u06cc\u06a9 \u0641\u0627\u06cc\u0644 Layout.module.css \u062d\u0627\u0648\u06cc \u06a9\u062f \u0632\u06cc\u0631 \u062f\u0631 \u067e\u0648\u0634\u0647 \/styles \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n
\n
.nav {\n  overflow: hidden;\n  padding: 0 50px;\n}\n.nav div {\n  max-width: 80%;\n  margin: auto;\n  border-bottom: 2px solid #3f3f3f67;\n}\n\n.nav h1 {\n  color: #202020;\n  text-align: center;\n  padding: 20px 26px;\n  text-decoration: none;\n  font-size: 3rem;\n}\n\n\/* CSS for tablets and small laptops *\/\n@media (min-width: 701px) and (max-width: 1120px) {\n  .nav {\n    overflow: hidden;\n    padding: 0 50px;\n  }\n  .nav div {\n    max-width: 95%;\n    margin: auto;\n    border-bottom: 2px solid #3f3f3f67;\n  }\n\n  .nav h1 {\n    color: #202020;\n    text-align: center;\n    padding: 20px 26px;\n    text-decoration: none;\n    font-size: 2.5rem;\n  }\n}\n\n\/* CSS for mobiles *\/\n@media (max-width: 700px) {\n  .nav {\n    overflow: hidden;\n    padding: 0 50px;\n  }\n  .nav div {\n    max-width: 95%;\n    margin: auto;\n    border-bottom: 2px solid #3f3f3f67;\n  }\n\n  .nav h1 {\n    color: #202020;\n    text-align: center;\n    padding: 20px 26px;\n    text-decoration: none;\n    font-size: 1.9rem;\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0641\u0627\u06cc\u0644 global.css \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u0644\u063a\u0648 \u06a9\u0646\u06cc\u062f.<\/p>\n
\n
:root {\n  --max-width: 1100px;\n  --border-radius: 12px;\n  --font-mono: ui-monospace, Menlo, Monaco, \"Cascadia Mono\", \"Segoe UI Mono\",\n    \"Roboto Mono\", \"Oxygen Mono\", \"Ubuntu Monospace\", \"Source Code Pro\",\n    \"Fira Mono\", \"Droid Sans Mono\", \"Courier New\", monospace;\n\n  --foreground-rgb: 0, 0, 0;\n  --background-start-rgb: 214, 219, 220;\n  --background-end-rgb: 255, 255, 255;\n\n  --primary-glow: conic-gradient(\n    from 180deg at 50% 50%,\n    #16abff33 0deg,\n    #0885ff33 55deg,\n    #54d6ff33 120deg,\n    #0071ff33 160deg,\n    transparent 360deg\n  );\n  --secondary-glow: radial-gradient(\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n\n  --tile-start-rgb: 239, 245, 249;\n  --tile-end-rgb: 228, 232, 233;\n  --tile-border: conic-gradient(\n    #00000080,\n    #00000040,\n    #00000030,\n    #00000020,\n    #00000010,\n    #00000010,\n    #00000080\n  );\n\n  --callout-rgb: 238, 240, 241;\n  --callout-border-rgb: 172, 175, 176;\n  --card-rgb: 180, 185, 188;\n  --card-border-rgb: 131, 134, 135;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --foreground-rgb: 255, 255, 255;\n    --background-start-rgb: 0, 0, 0;\n    --background-end-rgb: 0, 0, 0;\n\n    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));\n    --secondary-glow: linear-gradient(\n      to bottom right,\n      rgba(1, 65, 255, 0),\n      rgba(1, 65, 255, 0),\n      rgba(1, 65, 255, 0.3)\n    );\n\n    --tile-start-rgb: 2, 13, 46;\n    --tile-end-rgb: 2, 5, 19;\n    --tile-border: conic-gradient(\n      #ffffff80,\n      #ffffff40,\n      #ffffff30,\n      #ffffff20,\n      #ffffff10,\n      #ffffff10,\n      #ffffff80\n    );\n\n    --callout-rgb: 20, 20, 20;\n    --callout-border-rgb: 108, 108, 108;\n    --card-rgb: 100, 100, 100;\n    --card-border-rgb: 200, 200, 200;\n  }\n}\n\n* {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n}\n\nhtml,\nbody {\n  max-width: 100vw;\n  overflow-x: hidden;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  html {\n    color-scheme: dark;\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
3. \u062c\u0647\u0627\u0646\u06cc \u06a9\u0631\u062f\u0646 \u062c\u0632\u0621 \u0645\u0634\u062a\u0631\u06a9 \u0645\u0627.<\/strong>
\u062f\u0631 pages\/_app.js\u060c \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n
\n
import '@\/styles\/globals.css'\nimport Layout from '..\/Components\/Layout'\n\nexport default function App({ Component, pageProps }) {\n  return (\n  <Layout>\n    <Component {...pageProps} \/>\n  <\/Layout>\n  )\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0628\u0644\u0648\u06a9 \u06a9\u062f \u0645\u0648\u0644\u0641\u0647 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 ” \u0645\u06cc\u200c\u067e\u06cc\u0686\u062f.  _app.js \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u0635\u0641\u062d\u0627\u062a \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
– \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 Hygraph.<\/strong><\/p>\n
1. \u0635\u0641\u062d\u0647 \u0641\u0647\u0631\u0633\u062a<\/strong><\/p>\n
\u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u067e\u0648\u0634\u0647 pages \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0641\u0627\u06cc\u0644 index.js \u0627\u0633\u062a.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 index.js \u062c\u062f\u06cc\u062f \u062d\u0627\u0648\u06cc \u06a9\u062f \u0632\u06cc\u0631\u060c \u0622\u0646 \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0646\u06cc\u0645.<\/p>\n
\n
import Head from \"next\/head\";\nimport Style from \"..\/styles\/Home.module.css\";\nimport Image from \"next\/image\";\nimport { GraphQLClient, gql } from \"graphql-request\";\nimport Link from \"next\/link\";\n\nconst url =\n  \"https:\/\/api-us-east-1-shared-usea1-02.hygraph.com\/v2\/cld3i52fm0lpi01up5mpk5v3i\/master\";\n\nconst graphConnect = new GraphQLClient(url);\n\nconst query = gql`\n  query {\n    blogposts {\n      title\n      slug\n      coverPhoto {\n        url\n      }\n      excerpt\n      id\n      author {\n        authorName\n      }\n    }\n  }\n`;\n\nexport async function getServerSideProps() {\n  const { blogposts } = await graphConnect.request(query);\n\n  return { props: { blogposts } };\n}\n\nfunction Homepage({ blogposts }) {\n  return (\n    <>\n      <Head>\n        <title>Blog Tutorial<\/title>\n      <\/Head>\n      <div className={Style.postcontainer}>\n        {blogposts.map((blogposts) => {\n          return (\n            <div  key={blogposts.id}>\n              <div className={Style.inside}>\n                <div className={Style.img}>\n                  <Image\n                    src={blogposts.coverPhoto.url}\n                    alt=\"featured text\"\n                    fill\n                  \/>\n                <\/div>\n                <div className={Style.container}>\n                  <Link href={blogposts.slug}>\n                    <h2>{blogposts.title}<\/h2>\n                  <\/Link>\n                  <p>{blogposts.excerpt}<\/p>\n                  <p>By {blogposts.author.authorName}<\/p>\n                  <Link href={blogposts.slug}>\n                    <button className={Style.readButton}>Read More<\/button>{\" \"}\n                  <\/Link>\n                <\/div>\n              <\/div>\n            <\/div>\n          );\n        })}\n        ;\n      <\/div>\n\n\n    <\/>\n  );\n}\n\nexport default Homepage;\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u062e\u0648\u062f\u060c \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 Hygraph \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f\u060c \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u0631\u0648\u0698\u0647 > \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 API \u0628\u0631\u0648\u06cc\u062f\u060c \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 Content API \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 URL \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f.<\/p>\n
\u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 API \u0645\u062d\u062a\u0648\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc \u0628\u0631\u0648\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f read all...<\/code><\/strong>  \u062a\u062d\u062a \u0645\u062c\u0648\u0632\u0647\u0627\u06cc \u0645\u062d\u062a\u0648\u0627<\/p>\n
\u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 const \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 graphql \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 Hygraph \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n
\u0631\u0627 **new GraphQLClient()**<\/code> \u0645\u062a\u062f \u06cc\u06a9 GraphQLClient \u062c\u062f\u06cc\u062f \u0631\u0627 \u0646\u0645\u0648\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0645\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u062f\u0631 Hygraph \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0628\u0644\u0648\u06a9 \u06a9\u062f \u0634\u0627\u0645\u0644 \u062f\u0648 \u062a\u0627\u0628\u0639 \u0627\u0633\u062a getServerSideProps<\/code> \u062a\u0627\u0628\u0639 \u0648 \u062a\u0627\u0628\u0639 Home.<\/p>\n
\u0631\u0627 async<\/code><\/strong> getServerSideProps<\/code>  \u062a\u0627\u0628\u0639 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0647\u06cc\u06af\u0631\u0627\u0641 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u0645\u060c \u0633\u067e\u0633 \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 (\u0628\u0644\u0627\u06af \u067e\u0633\u062a\u200c\u0647\u0627) \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 props \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0628\u0647 \u062a\u0627\u0628\u0639 Home \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
\u062a\u0627\u0628\u0639 Home \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 getServerSideProps<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0622\u0631\u06af\u0648\u0645\u0627\u0646\u060c \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0631\u0627\u06cc\u0647 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc \u0634\u0648\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 UI \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n
2. \u0635\u0641\u062d\u0647 SinglePost.<\/strong>
\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0627\u062d\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u067e\u0633\u062a \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.
\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f ‘[slug].js \u062d\u0627\u0648\u06cc \u06a9\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a.<\/p>\n
\n
import { GraphQLClient, gql } from \"graphql-request\";\nimport Head from \"next\/head\";\nimport Style from \"..\/styles\/SinglePost.module.css\";\nimport Image from \"next\/image\";\nimport { serialize } from \"next-mdx-remote\/serialize\";\nimport { MDXRemote } from \"next-mdx-remote\";\n\nconst url =\n  \"https:\/\/api-us-east-1-shared-usea1-02.hygraph.com\/v2\/cld3i52fm0lpi01up5mpk5v3i\/master\";\n\nconst graphConnect = new GraphQLClient(url);\n\nconst query = gql`\n  query MyQuery($slug: String!) {\n    blogpost(where: { slug: $slug }) {\n      title\n      author {\n        authorName\n      }\n      content {\n        markdown\n      }\n      coverPhoto {\n        alt\n        url\n      }\n    }\n  }\n`;\n\nexport async function getStaticPaths() {\n  const { blogposts } = await graphConnect.request(gql`\n    query {\n      blogposts {\n        slug\n      }\n    }\n  `);\n\n  return {\n    paths: blogposts.map(({ slug }) => ({\n      params: {\n        slug,\n      },\n    })),\n    fallback: \"blocking\",\n  };\n}\n\nexport async function getStaticProps({ params }) {\n  const { blogpost } = await graphConnect.request(query, { slug: params.slug });\n  const content = blogpost.content.markdown;\n  const MdxSource = await serialize(content);\n  return { props: { post: blogpost, source: MdxSource } };\n}\n\nfunction SinglePost({ post, source }) {\n  return (\n    <>\n      <Head>\n        <title>Blog<\/title>\n      <\/Head>\n      <div className={Style.main}>\n        <div className={Style.header}>\n          <h1>{post.title}<\/h1>\n          <h3>Author: {post.author.authorName}<\/h3>\n        <\/div>\n        <div className={Style.img}>\n          <Image src={post.coverPhoto.url} alt={post.coverPhoto.alt} fill \/>\n        <\/div>\n\n        <div className={Style.mdxs}>\n          <MDXRemote {...source} \/>\n        <\/div>\n      <\/div>\n    <\/>\n  );\n}\n\nexport default SinglePost;\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0628\u0644\u0648\u06a9 \u06a9\u062f \u0628\u0627\u0644\u0627 \u062f\u0627\u0631\u0627\u06cc \u0633\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u062a\u060c getStaticPath<\/code>\u060c getStaticProps,<\/code> \u0648 \u06cc\u06a9 \u062c\u0632\u0621 \u062a\u0627\u0628\u0639.<\/p>\n
getStaticPaths<\/code>  \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0628\u0647 API \u0645\u0627 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0633\u06cc\u0631\u0647\u0627 (slug) \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 props \u0628\u0647 getStaticProps \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n
\u0631\u0627 getStaticProps<\/code> \u062a\u0627\u0628\u0639 \u067e\u0631\u0648\u067e \u0647\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 getStaticPaths<\/code> \u0648 \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0631\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0628\u0631\u0627\u06cc \u067e\u0633\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0633\u0644\u0627\u06af \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.
\u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0627\u0632 \u0631\u0627\u0647 \u062f\u0648\u0631 next-mdx \u0628\u0631\u0627\u06cc \u0633\u0631\u06cc\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0639\u0644\u0627\u0645\u062a\u200c\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628\u06cc \u0642\u0627\u0628\u0644 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0648 \u067e\u0633\u062a \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0631\u06cc\u0627\u0644 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0628\u0647 \u0645\u0648\u0644\u0641\u0647 \u062a\u0627\u0628\u0639 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.
**<\/p>\n
4. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u062e\u0627\u0631\u062c\u06cc.<\/strong>
\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062e\u0627\u0631\u062c\u06cc Hygraph \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u06a9\u0645\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 next.config \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n
\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0641\u0627\u06cc\u0644 next.config \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u062f \u0644\u063a\u0648 \u06a9\u0646\u06cc\u0645.<\/p>\n
\n
\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  reactStrictMode: true,\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 'media.graphassets.com',\n        port: '',\n        pathname: '\/**',\n      },\n    ],\n  },\n}\n\nmodule.exports = nextConfig\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc CSS<\/strong><\/p>\n
\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u0631\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u0645.  \u0633\u0647 \u0641\u0627\u06cc\u0644 \u0645\u0627\u0698\u0648\u0644 CSS \u0628\u0627 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.
\u06cc\u06a9 Home.module.css \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062d\u0627\u0648\u06cc \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0627\u0634\u062f.<\/p>\n
\n
.postcontainer {\n  max-width: 800px;\n  margin: auto;\n  margin-top: 30px;\n  margin-bottom: 30px;\n  padding: 0 5px;\n}\n.inside {\n  margin-bottom: 30px;\n  padding: 10px 20px;\n  box-shadow: 2px 3px 2px rgb(218, 218, 218);\n  display: flex;\n  flex-direction: row;\n}\n\n.inside div:last-child {\n  margin-left: 25px;\n}\n\n.inside h2 {\n  text-align: justify;\n  margin-bottom: 15px;\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n.inside p {\n  margin-bottom: 15px;\n  font-size: 0.9rem;\n}\n\n.readButton {\n  padding: 10px 16px;\n  background-color: aliceblue;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.img {\n  width: 260px;\n  height: 200px;\n  position: relative;\n}\n.container {\n  width: 555px;\n}\n\/* Tablet and Smaller Desktop *\/\n@media (min-width: 701px) and (max-width: 1120px) {\n  .postcontainer {\n    max-width: 80%;\n    margin: auto;\n    margin-top: 30px;\n    margin-bottom: 30px;\n  }\n  .inside {\n    margin-bottom: 30px;\n    padding: 10px 20px;\n    box-shadow: 2px 3px 2px rgb(218, 218, 218);\n    display: flex;\n    flex-direction: row;\n  }\n\n  .postcontainer h2 {\n    text-align: justify;\n    margin-bottom: 10px;\n    font-size: 1.9rem;\n    font-weight: 600;\n  }\n  .inside p {\n    margin-bottom: 10px;\n    font-size: 0.9rem;\n  }\n\n  .readButton {\n    padding: 10px 16px;\n    background-color: aliceblue;\n    font-weight: 500;\n  }\n\n  .img {\n    width: 250px;\n    height: 200px;\n    position: relative;\n  }\n  .container {\n    width: 65%;\n  }\n}\n\n\/* Mobile *\/\n@media (max-width: 700px) {\n  .postcontainer {\n    max-width: 90%;\n    margin: auto;\n    margin-top: 30px;\n    margin-bottom: 30px;\n  }\n  .inside {\n    margin-bottom: 30px;\n    padding: 10px 20px;\n    box-shadow: 2px 3px 2px rgb(218, 218, 218);\n    display: flex;\n    flex-direction: column;\n  }\n  .inside div:last-child {\n    margin-left: 0;\n  }\n\n  .postcontainer h2 {\n    text-align: justify;\n    margin-bottom: 10px;\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  .inside p {\n    margin-bottom: 10px;\n    font-size: 0.9rem;\n  }\n\n  .readButton {\n    padding: 10px 16px;\n    background-color: aliceblue;\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  .img {\n    width: 100%;\n    height: 200px;\n    position: relative;\n  }\n  .container {\n    width: 100%;\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 SinglePost.module.css \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062d\u0627\u0648\u06cc \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0627\u0634\u062f.<\/p>\n
\n
.main {\n  max-width: 700px;\n  margin: auto;\n}\n.header {\n  margin-top: 40px;\n}\n.header h1,\n.header h3 {\n  margin-top: 10px;\n}\n.header h1 {\n  font-size: 2rem;\n}\n.header h3 {\n  color: #777777;\n}\n.img {\n  margin-top: 20px;\n  width: 100%;\n  height: 500px;\n  position: relative;\n}\n.mdxs {\n  padding: 60px 0;\n  font-size: 1.4rem;\n  line-height: 1.5;\n}\n\/* CSS for tablets and small laptops *\/\n@media (min-width: 701px) and (max-width: 1120px) {\n  .main {\n    max-width: 90%;\n    margin: auto;\n  }\n  .header {\n    margin-top: 40px;\n  }\n  .header h1,\n  .header h3 {\n    margin-top: 10px;\n  }\n  .header h1 {\n    font-size: 2rem;\n  }\n  .header h3 {\n    color: #777777;\n  }\n  .img {\n    margin-top: 20px;\n    width: 100%;\n    height: 470px;\n    position: relative;\n  }\n  .mdxs {\n    padding: 60px 0;\n    font-size: 1.4rem;\n    line-height: 1.5;\n  }\n}\n\n\/* CSS for mobiles *\/\n@media (max-width: 700px) {\n  .main {\n    max-width: 85%;\n    margin: auto;\n  }\n  .header {\n    margin-top: 40px;\n  }\n  .header h1,\n  .header h3 {\n    margin-top: 10px;\n  }\n  .header h1 {\n    font-size: 2rem;\n  }\n  .header h3 {\n    color: #777777;\n  }\n  .img {\n    margin-top: 20px;\n    width: 100%;\n    height: 280px;\n    position: relative;\n  }\n  .mdxs {\n    padding: 60px 0;\n    font-size: 1.4rem;\n    line-height: 1.5;\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u062e\u0648\u062f\u0634\u0647!  \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n
\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u067e\u0631\u0648\u0698\u0647<\/strong><\/p>\n
1. \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u062f\u0631 GitHub<\/strong><\/p>\n
\u0627\u06af\u0631 \u062a\u0627 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u0634 \u0631\u0641\u062a\u0647 \u0627\u06cc\u062f\u060c \u0641\u0631\u0636 \u0645\u06cc \u06a9\u0646\u0645 \u0647\u06cc\u0686 \u062e\u0637\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0646 \u062f\u0631 Vercel\u060c \u0628\u0631\u0631\u0633\u06cc \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n
    \n
  1. \u0627\u0648\u0644\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f npm run lint<\/code> \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627<\/li>\n<\/ol>\n
    \u06a9\u062f eslint \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u062e\u0637\u0627\u0647\u0627\u06cc \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
    \u0627\u06af\u0631 \u062e\u0637\u0627\u06cc\u06cc \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f\u060c \u067e\u06cc\u0627\u0645 \u00abNo Eslint warnings or error\u00bb \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n
      \n
    1. \u0627\u062c\u0631\u0627 \u06a9\u0646 git init<\/code> \u062a\u0627 \u0645\u062d\u06cc\u0637 \u0645\u062d\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u062e\u0632\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u0645.<\/li>\n
    2. \u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u0647 \u0627\u06a9\u0627\u0646\u062a GitHub \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u0645\u062e\u0632\u0646 \u062c\u062f\u06cc\u062f \u0628\u0633\u0627\u0632\u06cc\u062f.<\/li>\n
    3. \u0628\u0647 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0628\u0631\u06af\u0631\u062f\u06cc\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u062e\u0632\u0646 \u0645\u062d\u0644\u06cc \u0631\u0627 \u0628\u0647 GitHub \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u0645\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 git remote add origin <url to your GitHub repository><\/code>.<\/li>\n
    4. \u0634\u0639\u0628\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0634\u0627\u062e\u0647 \u062f\u0631 GitHub \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f git branch -M main<\/code>\n<\/li>\n
    5. \u0627\u062c\u0631\u0627 \u06a9\u0646 git add -all<\/code>\u060c \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n
    6. \u0627\u062c\u0631\u0627 \u06a9\u0646 git commit -m \"<message>\"<\/code> \u062a\u0627 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 commit \u06a9\u0646\u06cc\u062f.<\/li>\n
    7. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f git push -u origin main<\/code> \u0628\u0631\u0627\u06cc \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646 \u0628\u0647 GitHub.<\/li>\n<\/ol>\n
      2. \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 Vercel.<\/strong><\/p>\n
      \u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0628\u0627 \u0622\u0646\u0647\u0627 \u062d\u0633\u0627\u0628 \u0646\u062f\u0627\u0631\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 https:\/\/vercel.com\/signup \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n
      \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f: \u0628\u0627 \u062d\u0633\u0627\u0628 GitHub \u062e\u0648\u062f \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n
        \n
      1. \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n
      2. \u0645\u062e\u0632\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 Vercel \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n
      3. \u067e\u0633 \u0627\u0632 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632\u060c \u0631\u0648\u06cc deploy \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 Vercel \u0627\u062c\u0631\u0627 \u0634\u0648\u062f.<\/li>\n
      4. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0627\u0634\u062f\u060c \u0622\u062f\u0631\u0633 \u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627 \u062f\u0648\u0633\u062a\u0627\u0646 \u062e\u0648\u062f \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f.<\/li>\n<\/ol>\n
        \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc.<\/strong><\/p>\n
        \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u0627\u0646\u062f\u06cc\u062f \u0648 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631 \u06af\u0631\u0641\u062a\u06cc\u062f.  \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u0632 \u0633\u0641\u0631 \u0644\u0630\u062a \u0628\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n
        PS: \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0628\u0627 \u06a9\u062f \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0627\u0631\u062a\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0645\u0646 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f\u060c \u062f\u0631 \u062a\u0648\u06cc\u06cc\u062a\u0631 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0648 \u0645\u0631\u0627 FineyKempt@ \u062a\u06af \u06a9\u0646\u06cc\u062f.<\/p>\n
        \u06a9\u062f \u0645\u0646\u0628\u0639 \u0631\u0627 \u062f\u0631 GitHub \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n
        *\u0645\u0646\u0628\u0639: *<\/em>
        \u0628\u0631\u0627\u06cc \u06a9\u0633\u0628 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f graphql\u060c \u0628\u0647 https:\/\/graphql.org\/ \u0633\u0631 \u0628\u0632\u0646\u06cc\u062f.<\/p>\n
        \u062f\u0631\u0628\u0627\u0631\u0647 Hygraph \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f.<\/p>\n
        \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 Next.js \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u06cc\u0627\u0628\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
        \u0645\u0639\u0631\u0641\u06cc\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0686\u0627\u0644\u0634 100 \u0631\u0648\u0632\u0647 \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0627\u0645\u0633\u0627\u0644\u060c \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af Next.js \u0628\u0627 Hygraph \u06a9\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0645\u0646 \u0631\u0627 \u062a\u0642\u0648\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0628\u0633\u0627\u0632\u0645 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u0646\u062f \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0645\u0633\u062a\u0646\u062f \u06a9\u0646\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u0646\u0648\u0634\u062a\u0647\u060c \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631 \u062f\u0648 \u0645\u0631\u062d\u0644\u0647 \u0633\u0627\u062f\u0647 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u06a9\u0627\u0645\u0644\u0627 \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f. …<\/p>\n","protected":false},"author":2,"featured_media":7449,"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-7448","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\/7448","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=7448"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/7448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/7449"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=7448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=7448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=7448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}