{"id":17106,"date":"2023-04-12T16:48:46","date_gmt":"2023-04-12T13:18:46","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/"},"modified":"2023-04-12T16:48:46","modified_gmt":"2023-04-12T13:18:46","slug":"internationalization-i18n-in-nextjs-13-with-react-server-components-2jod","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/","title":{"rendered":"\u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0633\u0627\u0632\u06cc (i18n) \u062f\u0631 Next.js 13 \u0628\u0627 React Server Components"},"content":{"rendered":"<div data-article-id=\"1433471\" id=\"article-body\">\n<p>\u0628\u0627 \u0645\u0639\u0631\u0641\u06cc Next.js 13 \u0648 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u062a\u0627 App Router\u060c React Server Components \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0639\u0645\u0648\u0645 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a.  \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u062f\u0627\u06cc\u0645 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc React \u0645\u0627\u0646\u0646\u062f <code>useState<\/code> \u0648 <code>useEffect<\/code> \u0641\u0642\u0637 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0627\u0642\u06cc \u0628\u0645\u0627\u0646\u062f.<\/p>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u062d\u0648\u0632\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062c\u062f\u06cc\u062f \u0633\u0648\u062f \u0645\u06cc \u0628\u0631\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a <strong>\u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0634\u062f\u0646<\/strong>.<br \/>\u0628\u0647\u200c\u0637\u0648\u0631 \u0633\u0646\u062a\u06cc\u060c \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc\u200c\u0633\u0627\u0632\u06cc \u0628\u0647 \u06cc\u06a9 \u0645\u0639\u0627\u0648\u0636\u0647 \u062f\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f\u060c \u0632\u06cc\u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062a\u0631\u062c\u0645\u0647\u200c\u0647\u0627 \u0645\u0646\u062c\u0631 \u0628\u0647 \u0628\u0633\u062a\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631\u06cc \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u062c\u0632\u06cc\u0647\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0627\u0645 \u0628\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u062a\u0623\u062b\u06cc\u0631 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f.<\/p>\n<p>\u0648\u0639\u062f\u0647 \u0627\u0632 <strong>\u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06a9\u06cc\u06a9 \u062e\u0648\u062f \u0631\u0627 \u0628\u062e\u0648\u0631\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0647\u0645 \u0628\u062e\u0648\u0631\u06cc\u0645.  \u0627\u06af\u0631 \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc\u200c\u0633\u0627\u0632\u06cc \u0628\u0647\u200c\u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0633\u0637\u0648\u062d \u062c\u062f\u06cc\u062f\u06cc \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u0645\u0627\u0646 \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u0645 \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0627\u0632 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0647\u0627 \u06a9\u0646\u06cc\u0645.  \u0627\u0645\u0627 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u062f\u0627\u06cc\u0645 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645\u060c \u0648\u0642\u062a\u06cc \u0628\u0647 \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644\u200c\u0634\u062f\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc \u0645\u0646\u0639\u06a9\u0633 \u0634\u0648\u0646\u062f\u061f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0686\u0646\u062f \u0632\u0628\u0627\u0646\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0639\u06a9\u0627\u0633\u06cc \u062e\u06cc\u0627\u0628\u0627\u0646\u06cc \u0631\u0627 \u0627\u0632 Unsplash \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>next-intl<\/code> \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc\u200c\u0633\u0627\u0632\u06cc \u062e\u0648\u062f \u062f\u0631 React Server Components \u0648 \u0628\u0647 \u062a\u06a9\u0646\u06cc\u06a9\u06cc \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0631\u062f\u067e\u0627\u06cc \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u062a\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0646\u06af\u0627\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p><\/p>\n<p>\u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%B9%DA%A9%D8%B3_%D9%87%D8%A7_%D8%A7%D8%B2_Unsplash\" >\u0648\u0627\u06a9\u0634\u06cc \u0639\u06a9\u0633 \u0647\u0627 \u0627\u0632 Unsplash<\/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\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%A8%DB%8C%D9%86_%D8%A7%D9%84%D9%85%D9%84%D9%84%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%A8%D8%A7_next-intl\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0633\u0627\u0632\u06cc \u0628\u0627 next-intl<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D9%82%D8%A7%D9%84%D8%A8_%D8%A8%D9%86%D8%AF%DB%8C_%D8%AA%D8%A7%D8%B1%DB%8C%D8%AE_%D9%87%D8%A7\" >\u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u062a\u0627\u0631\u06cc\u062e \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D9%87%D9%88%D9%84%D8%A7_%F0%9F%91%8B_%D8%AA%D8%B1%D8%AC%D9%85%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%85%D8%A7_%D8%A8%D9%87_%D8%A7%D8%B3%D9%BE%D8%A7%D9%86%DB%8C%D8%A7%DB%8C%DB%8C\" >\u0647\u0648\u0644\u0627!  \ud83d\udc4b \u062a\u0631\u062c\u0645\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0628\u0647 \u0627\u0633\u067e\u0627\u0646\u06cc\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B9%DA%A9%D8%B3_%D9%87%D8%A7\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0639\u0627\u0645\u0644: \u062a\u0631\u062a\u06cc\u0628 \u067e\u0648\u06cc\u0627 \u0639\u06a9\u0633 \u0647\u0627<\/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\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0639\u0627\u0645\u0644 \u0628\u06cc\u0634\u062a\u0631: \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647<\/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\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1_%DB%8C%DA%A9_%D8%A8%D8%A7%D8%B2%DB%8C_%D8%B9%D8%A7%D9%84%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%DB%8C%D9%86_%D8%A7%D9%84%D9%85%D9%84%D9%84%DB%8C_%D8%B4%D8%AF%D9%86_%D9%87%D8%B3%D8%AA%D9%86%D8%AF\" >\u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0634\u062f\u0646 \u0647\u0633\u062a\u0646\u062f<\/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\/internationalization-i18n-in-nextjs-13-with-react-server-components-2jod\/#%D9%BE%D8%A7%D8%B1%D8%A7%D9%85%D8%AA%D8%B1%D9%87%D8%A7%DB%8C_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88_%DB%8C%DA%A9_%D8%AC%D8%A7%DB%8C%DA%AF%D8%B2%DB%8C%D9%86_%D8%B9%D8%A7%D9%84%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_useState\" >\u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u06cc\u06a9 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc useState<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%B9%DA%A9%D8%B3_%D9%87%D8%A7_%D8%A7%D8%B2_Unsplash\"><\/span>\n<p>  \u0648\u0627\u06a9\u0634\u06cc \u0639\u06a9\u0633 \u0647\u0627 \u0627\u0632 Unsplash<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0632\u0627\u06cc\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0627\u0632 \u062f\u0627\u062e\u0644 \u0627\u062c\u0632\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a <code>async<\/code>\/<code>await<\/code>.  \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0639\u06a9\u0633\u200c\u0647\u0627 \u0627\u0632 Unsplash \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0635\u0641\u062d\u0647\u200c\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u06a9\u0644\u0627\u06cc\u0646\u062a API \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 Unsplash SDK \u0631\u0633\u0645\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">createApi<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">unsplash-js<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">createApi<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">accessKey<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">UNSPLASH_ACCESS_KEY<\/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>\u0648\u0642\u062a\u06cc \u0645\u0634\u062a\u0631\u06cc Unsplash API \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0634\u062a\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0635\u0641\u062d\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">OrderBy<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">unsplash-js<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">UnsplashApiClient<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/UnsplashApiClient<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">Index<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">topicSlug<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">street-photography<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">topicRequest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">photosRequest<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nb\">Promise<\/span><span class=\"p\">.<\/span><span class=\"nx\">all<\/span><span class=\"p\">([<\/span>\n    <span class=\"nx\">UnsplashApiClient<\/span><span class=\"p\">.<\/span><span class=\"nx\">topics<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">({<\/span><span class=\"na\">topicIdOrSlug<\/span><span class=\"p\">:<\/span> <span class=\"nx\">topicSlug<\/span><span class=\"p\">}),<\/span>\n    <span class=\"nx\">UnsplashApiClient<\/span><span class=\"p\">.<\/span><span class=\"nx\">topics<\/span><span class=\"p\">.<\/span><span class=\"nx\">getPhotos<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">topicIdOrSlug<\/span><span class=\"p\">:<\/span> <span class=\"nx\">topicSlug<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">perPage<\/span><span class=\"p\">:<\/span> <span class=\"mi\">4<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">PhotoViewer<\/span>\n      <span class=\"na\">coverPhoto<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">topicRequest<\/span><span class=\"p\">.<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">cover_photo<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">photos<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">photosRequest<\/span><span class=\"p\">.<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">results<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/strong> \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>Promise.all<\/code> \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0647\u0631 \u062f\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0648\u0627\u0632\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.  \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0622\u0628\u0634\u0627\u0631 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0639\u06a9\u0633 \u0633\u0627\u062f\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1681305526_762_\u0628\u06cc\u0646-\u0627\u0644\u0645\u0644\u0644\u06cc-\u0633\u0627\u0632\u06cc-i18n-\u062f\u0631-Nextjs-13-\u0628\u0627-React-Server.png\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0648\u0644\u06cc\u0647\" loading=\"lazy\" width=\"800\" height=\"779\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0632 \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627\u06cc \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0633\u062e\u062a\u200c\u06a9\u062f \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u062a\u0627\u0631\u06cc\u062e \u0639\u06a9\u0633\u200c\u0647\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u0647\u0631 \u0632\u0645\u0627\u0646\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u2014\u0647\u0646\u0648\u0632 \u062e\u06cc\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0646\u06cc\u0633\u062a\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%A8%DB%8C%D9%86_%D8%A7%D9%84%D9%85%D9%84%D9%84%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%A8%D8%A7_next-intl\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0633\u0627\u0632\u06cc \u0628\u0627 <code>next-intl<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc\u060c \u0645\u0627 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0628\u0647 \u0632\u0628\u0627\u0646 \u0627\u0633\u067e\u0627\u0646\u06cc\u0627\u06cc\u06cc \u0646\u06cc\u0632 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f.  \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u0646\u0633\u062e\u0647 \u0628\u062a\u0627 \u0627\u0633\u062a <code>next-intl<\/code>\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0646\u0635\u0628 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0628\u062a\u0627 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0633\u0627\u0632\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%82%D8%A7%D9%84%D8%A8_%D8%A8%D9%86%D8%AF%DB%8C_%D8%AA%D8%A7%D8%B1%DB%8C%D8%AE_%D9%87%D8%A7\"><\/span>\n<p>  \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u062a\u0627\u0631\u06cc\u062e \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06af\u0630\u0634\u062a\u0647 \u0627\u0632 \u0627\u0641\u0632\u0648\u062f\u0646 \u0632\u0628\u0627\u0646 \u062f\u0648\u0645\u060c \u0642\u0628\u0644\u0627\u064b \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0647\u200c\u0627\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u0646\u06cc\u0633\u062a \u0632\u06cc\u0631\u0627 \u062a\u0627\u0631\u06cc\u062e\u200c\u0647\u0627 \u0628\u0627\u06cc\u062f \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u0634\u0648\u0646\u062f.  \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u0628\u060c \u0645\u0627\u06cc\u0644\u06cc\u0645 \u0632\u0645\u0627\u0646 \u0646\u0633\u0628\u06cc \u0622\u067e\u0644\u0648\u062f \u0639\u06a9\u0633 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u06af\u0648\u06cc\u06cc\u0645 (\u0645\u062b\u0644\u0627\u064b &#8220;8 \u0631\u0648\u0632 \u067e\u06cc\u0634&#8221;).<\/p>\n<p>\u06cc\u06a9 \u0628\u0627\u0631  <code>next-intl<\/code> \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u060c \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u06cc\u0645 <code>format.relativeTime<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0647\u0631 \u0639\u06a9\u0633 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">useFormatter<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-intl<\/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\">PhotoGridItem<\/span><span class=\"p\">({<\/span><span class=\"nx\">photo<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">format<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useFormatter<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">updatedAt<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">photo<\/span><span class=\"p\">.<\/span><span class=\"nx\">updated_at<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">photo<\/span><span class=\"p\">.<\/span><span class=\"nx\">links<\/span><span class=\"p\">.<\/span><span class=\"nx\">html<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"cm\">\/* ... *\/<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">format<\/span><span class=\"p\">.<\/span><span class=\"nx\">relativeTime<\/span><span class=\"p\">(<\/span><span class=\"nx\">updatedAt<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"err\">\/<\/span><span class=\"na\">a<\/span><span class=\"p\">&gt;<\/span>\n  );\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>\u0627\u06a9\u0646\u0648\u0646 \u062a\u0627\u0631\u06cc\u062e \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06cc\u06a9 \u0639\u06a9\u0633 \u0631\u0627\u062d\u062a \u062a\u0631 \u062e\u0648\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1681305526_928_\u0628\u06cc\u0646-\u0627\u0644\u0645\u0644\u0644\u06cc-\u0633\u0627\u0632\u06cc-i18n-\u062f\u0631-Nextjs-13-\u0628\u0627-React-Server.png\" alt=\"\u062a\u0627\u0631\u06cc\u062e \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0631\u0645\u062a \u0634\u062f\u0647 \u0627\u0633\u062a\" loading=\"lazy\" width=\"800\" height=\"547\" title=\"\"><\/p>\n<p><strong>\u0627\u0634\u0627\u0631\u0647:<\/strong> \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0646\u062a\u06cc React \u06a9\u0647 \u0647\u0645 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0648 \u0647\u0645 \u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0647\u0645\u06af\u0627\u0645 \u0628\u0648\u062f\u0646 \u062a\u0627\u0631\u06cc\u062e \u0646\u0633\u0628\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u0627\u0645\u0644\u0627\u064b \u0686\u0627\u0644\u0634 \u0628\u0631\u0627\u0646\u06af\u06cc\u0632 \u0628\u0627\u0634\u062f.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0645\u062d\u06cc\u0637\u200c\u0647\u0627\u06cc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0647\u0633\u062a\u0646\u062f \u0648 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0645\u0646\u0627\u0637\u0642 \u0632\u0645\u0627\u0646\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0627\u0634\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0645\u06a9\u0627\u0646\u06cc\u0632\u0645\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u0632\u0645\u0627\u0646 \u0633\u0631\u0648\u0631 \u0628\u0647 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0641\u0631\u0645\u062a \u0641\u0642\u0637 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c \u062f\u0631 \u0648\u0647\u0644\u0647 \u0627\u0648\u0644 \u0646\u06af\u0631\u0627\u0646 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0646\u0628\u0627\u0634\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%87%D9%88%D9%84%D8%A7_%F0%9F%91%8B_%D8%AA%D8%B1%D8%AC%D9%85%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%85%D8%A7_%D8%A8%D9%87_%D8%A7%D8%B3%D9%BE%D8%A7%D9%86%DB%8C%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u0647\u0648\u0644\u0627!  \ud83d\udc4b \u062a\u0631\u062c\u0645\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0628\u0647 \u0627\u0633\u067e\u0627\u0646\u06cc\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u0686\u0633\u0628\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u062f\u0631 \u0647\u062f\u0631 \u0631\u0627 \u0628\u0627 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u0645\u062d\u0644\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u0647 \u0627\u0632 <code>PhotoViewer<\/code> \u062c\u0632\u0621\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06cc\u0646 \u0634\u0627\u0646\u0633 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0633\u062a <code>useTranslations<\/code> \u0642\u0644\u0627\u0628.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">useTranslations<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-intl<\/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\">PhotoViewer<\/span><span class=\"p\">(<\/span><span class=\"cm\">\/* ... *\/<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">t<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useTranslations<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">PhotoViewer<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Header<\/span>\n        <span class=\"na\">title<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">title<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n        <span class=\"na\">description<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">description<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">\/&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"cm\">\/* ... *\/<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">&lt;\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0686\u0633\u0628 \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u06a9\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0632\u0628\u0627\u0646 \u0647\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ en.json<\/span>\n<span class=\"p\">{<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">PhotoViewer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Street photography<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">description<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Street photography captures real-life moments and human interactions in public places. It is a way to tell visual stories and freeze fleeting moments of time, turning the ordinary into the extraordinary.<\/span><span class=\"dl\">\"<\/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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ es.json<\/span>\n<span class=\"p\">{<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">PhotoViewer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Street photography<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">description<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">La fotograf\u00eda callejera capta momentos de la vida real y interacciones humanas en lugares p\u00fablicos. Es una forma de contar historias visuales y congelar momentos fugaces del tiempo, convirtiendo lo ordinario en lo extraordinario.<\/span><span class=\"dl\">\"<\/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><strong>\u0646\u06a9\u062a\u0647:<\/strong> <code>next-intl<\/code>  \u06cc\u06a9 \u0627\u062f\u063a\u0627\u0645 TypeScript \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0641\u0642\u0637 \u0628\u0647 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u067e\u06cc\u0627\u0645 \u0645\u0639\u062a\u0628\u0631 \u0627\u0631\u062c\u0627\u0639 \u0645\u06cc \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0646\u0633\u062e\u0647 \u0627\u0633\u067e\u0627\u0646\u06cc\u0627\u06cc\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u06cc\u062f\u0646 \u06a9\u0646\u06cc\u0645 <code>\/es<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1681305526_215_\u0628\u06cc\u0646-\u0627\u0644\u0645\u0644\u0644\u06cc-\u0633\u0627\u0632\u06cc-i18n-\u062f\u0631-Nextjs-13-\u0628\u0627-React-Server.png\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u0627\u0633\u067e\u0627\u0646\u06cc\u0627\u06cc\u06cc \u062a\u0631\u062c\u0645\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\" loading=\"lazy\" width=\"800\" height=\"859\" title=\"\"><\/p>\n<p>\u062a\u0627 \u0627\u06cc\u0646\u062c\u0627\u06cc \u06a9\u0627\u0631 \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628\u0647!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B9%DA%A9%D8%B3_%D9%87%D8%A7\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0639\u0627\u0645\u0644: \u062a\u0631\u062a\u06cc\u0628 \u067e\u0648\u06cc\u0627 \u0639\u06a9\u0633 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636\u060c Unsplash API \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u0639\u06a9\u0633 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0628\u062a\u0648\u0627\u0646\u062f \u0627\u0628\u062a\u062f\u0627 \u062a\u0631\u062a\u06cc\u0628 \u0646\u0645\u0627\u06cc\u0634 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0639\u06a9\u0633 \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0645\u0637\u0631\u062d \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0645\u062a\u0648\u0633\u0644 \u0634\u0648\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0628\u0627 <code>useState<\/code>.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u0633\u062a\u0644\u0632\u0645 \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0647 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u0645 \u0648 \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0633\u062a\u0647\u200c\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u06cc\u0627\u0628\u062f.<\/p>\n<p>\u0622\u06cc\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc \u062f\u0627\u0631\u06cc\u0645\u061f  \u0622\u0631\u0647.  \u0648 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u0644\u0647\u0627 \u062f\u0631 \u0648\u0628 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0627\u0633\u062a: \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 (\u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 <em>\u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648<\/em>).  \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u06af\u0632\u06cc\u0646\u0647 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0627 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u062e\u0648\u0627\u0646\u062f.<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u062c\u0632\u0621 \u0635\u0641\u062d\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 <code>searchParams<\/code> \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0648\u0633\u0627\u06cc\u0644<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">Index<\/span><span class=\"p\">({<\/span><span class=\"nx\">searchParams<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">orderBy<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">searchParams<\/span><span class=\"p\">.<\/span><span class=\"nx\">orderBy<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">OrderBy<\/span><span class=\"p\">.<\/span><span class=\"nx\">POPULAR<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"cm\">\/* ... *\/<\/span><span class=\"p\">,<\/span> <span class=\"nx\">photosRequest<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nb\">Promise<\/span><span class=\"p\">.<\/span><span class=\"nx\">all<\/span><span class=\"p\">([<\/span>\n    <span class=\"cm\">\/* ... *\/<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">UnsplashApiClient<\/span><span class=\"p\">.<\/span><span class=\"nx\">topics<\/span><span class=\"p\">.<\/span><span class=\"nx\">getPhotos<\/span><span class=\"p\">({<\/span><span class=\"nx\">orderBy<\/span><span class=\"p\">,<\/span> <span class=\"cm\">\/* ... *\/<\/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>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631\u060c \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 <code>\/?orderBy=latest<\/code> \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0631\u062a\u06cc\u0628 \u0639\u06a9\u0633 \u0647\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u062a\u0648\u0627\u0646\u062f \u0645\u0642\u062f\u0627\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u0645. <code>select<\/code> \u0639\u0646\u0635\u0631 \u0627\u0632 \u062f\u0631\u0648\u0646 \u06cc\u06a9 \u062c\u0632\u0621<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1681305526_2_\u0628\u06cc\u0646-\u0627\u0644\u0645\u0644\u0644\u06cc-\u0633\u0627\u0632\u06cc-i18n-\u062f\u0631-Nextjs-13-\u0628\u0627-React-Server.png\" alt=\"\u0633\u0641\u0627\u0631\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"364\" height=\"230\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062c\u0632\u0621 \u0631\u0627 \u0628\u0627 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645 <code>'use client';<\/code> \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0633\u062a \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u067e\u0631\u062f\u0627\u0632\u0634 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 <code>select<\/code> \u0639\u0646\u0635\u0631  \u0628\u0627 \u0627\u06cc\u0646 \u0648\u062c\u0648\u062f\u060c \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627\u06cc \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0633\u0627\u0632\u06cc \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0633\u062a\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\u06cc \u0645\u0634\u062a\u0631\u06cc \u06a9\u0627\u0647\u0634 \u06cc\u0627\u0628\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u0645 <code>select<\/code> \u0639\u0646\u0635\u0631<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;select&gt;<\/span>\n  <span class=\"nt\">&lt;option<\/span> <span class=\"na\">value=<\/span><span class=\"s\">\u201cpopular\u201d<\/span><span class=\"nt\">&gt;<\/span>Popular<span class=\"nt\">&lt;\/option&gt;<\/span>\n  <span class=\"nt\">&lt;option<\/span> <span class=\"na\">value=<\/span><span class=\"s\">\"latest\"<\/span><span class=\"nt\">&gt;<\/span>Latest<span class=\"nt\">&lt;\/option&gt;<\/span>\n<span class=\"nt\">&lt;\/select&gt;<\/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>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0648 \u0642\u0633\u0645\u062a \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f <code>select<\/code> \u0639\u0646\u0635\u0631 \u0628\u0627 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0645\u0634\u062a\u0631\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc.<\/li>\n<li>\u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f <code>option<\/code> \u0639\u0646\u0627\u0635\u0631 \u0628\u0627 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0631\u0648\u0631 \u0648 \u0627\u0631\u0633\u0627\u0644 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 <code>children<\/code> \u0628\u0647 <code>select<\/code> \u0639\u0646\u0635\u0631<\/li>\n<\/ol>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 <code>select<\/code> \u0639\u0646\u0635\u0631 \u0628\u0631\u0627\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">useRouter<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-intl\/client<\/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\">OrderBySelect<\/span><span class=\"p\">({<\/span><span class=\"nx\">orderBy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">children<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRouter<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">function<\/span> <span class=\"nx\">onChange<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ The `useRouter` hook from `next-intl` automatically<\/span>\n    <span class=\"c1\">\/\/ considers a potential locale prefix of the pathname.<\/span>\n    <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">replace<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/?orderBy=<\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">event<\/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=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">select<\/span> <span class=\"na\">defaultValue<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">orderBy<\/span><span class=\"si\">}<\/span> <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onChange<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">select<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>PhotoViewer<\/code> \u0648 \u0628\u0648\u0645\u06cc \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f <code>option<\/code> \u0639\u0646\u0627\u0635\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646  <code>children<\/code>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">useTranslations<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-intl<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">OrderBySelect<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/OrderBySelect<\/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\">PhotoViewer<\/span><span class=\"p\">({<\/span><span class=\"nx\">orderBy<\/span><span class=\"p\">,<\/span> <span class=\"cm\">\/* ... *\/<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">t<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useTranslations<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">PhotoViewer<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"cm\">\/* ... *\/<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">OrderBySelect<\/span> <span class=\"na\">orderBy<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">orderBy<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">option<\/span> <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"s\">\"popular\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">orderBy.popular<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">option<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">option<\/span> <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"s\">\"latest\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">orderBy.latest<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">option<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">OrderBySelect<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u060c \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc  <code>option<\/code> \u0639\u0646\u0627\u0635\u0631 \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0648 \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f <code>OrderBySelect<\/code>\u060c \u06a9\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0646\u06a9\u062a\u0647:<\/strong> \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0641\u0627\u0631\u0634 \u0628\u0627\u06cc\u062f \u0645\u0646\u062a\u0638\u0631 \u0628\u0645\u0627\u0646\u06cc\u0645 \u062a\u0627 \u0646\u0634\u0627\u0646\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0628\u0647\u200c\u0631\u0648\u0632 \u0634\u062f\u0647 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645.  React 18 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f <code>useTransition<\/code> \u0647\u0648\u06a9\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u0645 <code>select<\/code> \u0639\u0646\u0635\u0631 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0646\u062a\u0638\u0631 \u067e\u0627\u0633\u062e \u0627\u0632 \u0633\u0631\u0648\u0631 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">useRouter<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-intl\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">useTransition<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">OrderBySelect<\/span><span class=\"p\">({<\/span><span class=\"nx\">orderBy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">children<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isTransitioning<\/span><span class=\"p\">,<\/span> <span class=\"nx\">startTransition<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useTransition<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRouter<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">function<\/span> <span class=\"nx\">onChange<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">startTransition<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">replace<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/?orderBy=<\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">event<\/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=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">select<\/span> <span class=\"na\">disabled<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">isTransitioning<\/span><span class=\"si\">}<\/span> <span class=\"cm\">\/* ... *\/<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">select<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0639\u0627\u0645\u0644 \u0628\u06cc\u0634\u062a\u0631: \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0645\u0627\u0646 \u0627\u0644\u06af\u0648\u06cc\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u0645\u0639\u0631\u0641\u06cc a \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0631\u062f <code>page<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062c\u0633\u062a\u062c\u0648<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1681305526_749_\u0628\u06cc\u0646-\u0627\u0644\u0645\u0644\u0644\u06cc-\u0633\u0627\u0632\u06cc-i18n-\u062f\u0631-Nextjs-13-\u0628\u0627-React-Server.png\" alt=\"\u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc\" loading=\"lazy\" width=\"752\" height=\"144\" title=\"\"><\/p>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0632\u0628\u0627\u0646 \u0647\u0627 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u062f\u0627\u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u0627\u0639\u0634\u0627\u0631\u06cc \u0648 \u0647\u0632\u0627\u0631 \u062f\u0627\u0631\u0646\u062f.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0632\u0628\u0627\u0646\u200c\u0647\u0627 \u0627\u0634\u06a9\u0627\u0644 \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u06a9\u062b\u0631\u062a\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u0631\u0646\u062f: \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0641\u0642\u0637 \u0628\u06cc\u0646 \u06cc\u06a9 \u0648 \u0635\u0641\u0631\/\u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u062a\u0645\u0627\u06cc\u0632 \u062f\u0633\u062a\u0648\u0631\u06cc \u0642\u0627\u0626\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u06a9\u0631\u0648\u0627\u062a\u06cc \u06cc\u06a9 \u0634\u06a9\u0644 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u00ab\u0686\u0646\u062f\u00bb \u062f\u0627\u0631\u062f.<\/p>\n<p><code>next-intl<\/code>  \u0627\u0632 \u0646\u062d\u0648 ICU \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0638\u0631\u0627\u0641\u062a \u0647\u0627\u06cc \u0632\u0628\u0627\u0646 \u0631\u0627 \u0645\u0645\u06a9\u0646 \u0645\u06cc \u0633\u0627\u0632\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ en.json<\/span>\n<span class=\"p\">{<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">Pagination<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">info<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Page {page, number} of {totalPages, number} ({totalElements, plural, =1 {one result} other {# results}} in total)<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"c1\">\/\/ ...<\/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>\u0627\u06cc\u0646 \u0628\u0627\u0631 \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645 <code>'use client';<\/code>.  \u062f\u0631 \u0639\u0648\u0636\u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0627 \u062a\u06af \u0647\u0627\u06cc \u0644\u0646\u06af\u0631 \u0645\u0639\u0645\u0648\u0644\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">ArrowLeftIcon<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ArrowRightIcon<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@heroicons\/react\/24\/solid<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useTranslations<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-intl<\/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\">Pagination<\/span><span class=\"p\">({<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">,<\/span> <span class=\"nx\">orderBy<\/span><span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">t<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useTranslations<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Pagination<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">totalPages<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">ceil<\/span><span class=\"p\">(<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">totalElements<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">pageInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">size<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">function<\/span> <span class=\"nx\">getHref<\/span><span class=\"p\">(<\/span><span class=\"nx\">page<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Since we're using `Link` from next-intl, a potential locale<\/span>\n      <span class=\"c1\">\/\/ prefix of the pathname is automatically considered.<\/span>\n      <span class=\"na\">pathname<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"c1\">\/\/ Keep a potentially existing `orderBy` parameter. <\/span>\n      <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">orderBy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">page<\/span><span class=\"p\">}<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">aria-label<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">prev<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">getHref<\/span><span class=\"p\">(<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">ArrowLeftIcon<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">info<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">,<\/span> <span class=\"nx\">totalPages<\/span><span class=\"p\">})<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">totalPages<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">aria-label<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">t<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">prev<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">getHref<\/span><span class=\"p\">(<\/span><span class=\"nx\">pageInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">ArrowRightIcon<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">&lt;\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%B3%D8%B1%D9%88%D8%B1_%DB%8C%DA%A9_%D8%A8%D8%A7%D8%B2%DB%8C_%D8%B9%D8%A7%D9%84%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%DB%8C%D9%86_%D8%A7%D9%84%D9%85%D9%84%D9%84%DB%8C_%D8%B4%D8%AF%D9%86_%D9%87%D8%B3%D8%AA%D9%86%D8%AF\"><\/span>\n<p>  \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u06cc\u06a9 \u0628\u0627\u0632\u06cc \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u0634\u062f\u0646 \u0647\u0633\u062a\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc\u200c\u0633\u0627\u0632\u06cc \u0628\u062e\u0634 \u0645\u0647\u0645\u06cc \u0627\u0632 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u060c \u0686\u0647 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0632\u0628\u0627\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0686\u0647 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0632 \u0638\u0631\u0627\u0641\u062a\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u0627\u0646\u0646\u062f <code>next-intl<\/code> \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0647\u0631 \u062f\u0648 \u0645\u0648\u0631\u062f \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<p>\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc\u200c\u0633\u0627\u0632\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc Next.js \u0627\u0632 \u0644\u062d\u0627\u0638 \u062a\u0627\u0631\u06cc\u062e\u06cc \u0628\u0627 \u06cc\u06a9 \u0645\u0628\u0627\u062f\u0644\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0647\u0645\u0631\u0627\u0647 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0646\u06cc\u0633\u062a.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u06a9\u0627\u0648\u0634 \u0648 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627\u06cc \u0628\u06cc\u0646 \u0627\u0644\u0645\u0644\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06a9\u0645\u06cc \u0637\u0648\u0644 \u0628\u06a9\u0634\u062f.<\/p>\n<p>\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0645\u0627\u06cc\u0634\u06af\u0631 \u0639\u06a9\u0627\u0633\u06cc \u062e\u06cc\u0627\u0628\u0627\u0646\u06cc \u0645\u0627\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062c\u0632\u0621 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u0645: <code>OrderBySelect<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1681305526_177_\u0628\u06cc\u0646-\u0627\u0644\u0645\u0644\u0644\u06cc-\u0633\u0627\u0632\u06cc-i18n-\u062f\u0631-Nextjs-13-\u0628\u0627-React-Server.png\" alt=\"\u0646\u0645\u0648\u062f\u0627\u0631 \u0627\u062c\u0632\u0627\u0621\" loading=\"lazy\" width=\"800\" height=\"515\" title=\"\"><\/p>\n<p>\u062c\u0646\u0628\u0647 \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u062c\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0632\u06cc\u0631\u0627 \u062a\u0623\u062e\u06cc\u0631 \u0634\u0628\u06a9\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0646\u062a\u06cc\u062c\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u0646\u062f \u062a\u0627\u062e\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%A7%D8%B1%D8%A7%D9%85%D8%AA%D8%B1%D9%87%D8%A7%DB%8C_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88_%DB%8C%DA%A9_%D8%AC%D8%A7%DB%8C%DA%AF%D8%B2%DB%8C%D9%86_%D8%B9%D8%A7%D9%84%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_useState\"><\/span>\n<p>  \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u06cc\u06a9 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc <code>useState<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u06cc\u06a9 \u0631\u0627\u0647 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Next.js \u0647\u0633\u062a\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0628\u0647 \u06a9\u0627\u0647\u0634 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0633\u062a\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\u06cc \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u063a\u06cc\u0631 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f\u060c \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631\u06cc \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <strong>\u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648<\/strong>:<\/p>\n<ol>\n<li>URL \u0647\u0627\u06cc \u062f\u0627\u0631\u0627\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062d\u0641\u0638 \u0648\u0636\u0639\u06cc\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a.<\/li>\n<li>\u0646\u0634\u0627\u0646\u06a9 \u0647\u0627 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u0646\u06cc\u0632 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<li>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u062f\u063a\u0627\u0645 \u0634\u0648\u06cc\u062f \u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062f\u06a9\u0645\u0647 \u0628\u0631\u06af\u0634\u062a\u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062d\u0627\u0644\u062a \u0631\u0627 \u0644\u063a\u0648 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ol>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f <strong>\u0645\u0639\u0627\u0648\u0636\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f<\/strong>:<\/p>\n<ol>\n<li>\u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0631\u0634\u062a\u0647\u200c\u0647\u0627 \u0647\u0633\u062a\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li>URL \u0628\u062e\u0634\u06cc \u0627\u0632 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0631 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u062a\u0623\u062b\u06cc\u0631 \u0628\u06af\u0630\u0627\u0631\u062f.<\/li>\n<\/ol>\n<hr\/>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0646\u0645\u0648\u0646\u0647 \u0631\u0627 \u062f\u0631 GitHub \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u062a\u0634\u06a9\u0631 \u0641\u0631\u0627\u0648\u0627\u0646 \u0627\u0632 <a href=\"https:\/\/twitter.com\/delba_oliveira\" rel=\"nofollow noopener\" target=\"_blank\">\u062f\u0644\u062a\u0627\u06cc \u062f\u0631\u062e\u062a \u0632\u06cc\u062a\u0648\u0646<\/a> \u0627\u0632 Vercel \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647!<\/p>\n<p>\u0639\u06a9\u0633 \u0631\u0648\u06cc \u062c\u0644\u062f \u062a\u0648\u0633\u0637 \u0646\u0627\u0633\u0627 \u062f\u0631 Unsplash<\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0627 \u0645\u0639\u0631\u0641\u06cc Next.js 13 \u0648 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u062a\u0627 App Router\u060c React Server Components \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0639\u0645\u0648\u0645 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a. \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u062f\u0627\u06cc\u0645 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc React \u0645\u0627\u0646\u0646\u062f useState \u0648 useEffect \u0641\u0642\u0637 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0627\u0642\u06cc \u0628\u0645\u0627\u0646\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u062d\u0648\u0632\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062c\u062f\u06cc\u062f \u0633\u0648\u062f \u0645\u06cc \u0628\u0631\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u0628\u06cc\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":17107,"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-17106","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\/17106","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=17106"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/17106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/17107"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=17106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=17106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=17106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}