{"id":351564,"date":"2024-05-20T21:49:57","date_gmt":"2024-05-20T21:49:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=351564"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=351564","title":{"rendered":"<span>\u0412\u0441\u0442\u0440\u0435\u0447\u0430\u0439\u0442\u0435 Next.js Commerce 2.0<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438\u00a0&#171;<a href=\"https:\/\/vercel.com\/blog\/introducing-next-js-commerce-2-0\" rel=\"noopener noreferrer nofollow\">Introducing Next.js Commerce 2.0<\/a>&#171;.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u201c<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\"><u>Frontend \u043f\u043e-\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/u><\/a>\u201d, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0441 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c Next.js Commerce 2.0.<\/p>\n<ul>\n<li>\n<p><strong>App Router Ready<\/strong>: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React Server, Server Actions, \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u0432, \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u0441\u0435\u0445 \u043d\u043e\u0432\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0438\u0437 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0432\u044b\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0433\u043e App Router.<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u0438\u0442\u0440\u0438\u043d\u0430<\/strong>: \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u0438\u0442\u0440\u0438\u043d\u0430 \u0441 Edge-\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u0441\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0435\u0437 \u0443\u0449\u0435\u0440\u0431\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430<\/strong>: Next.js Commerce \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043c \u043a\u043e\u0434\u0430 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d-\u0430\u043a\u0441\u0435\u043b\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 BigCommerce, Medusa, Saleor, Shopify \u0438 Swell.<\/p>\n<p><a href=\"https:\/\/demo.vercel.store\/\" rel=\"noopener noreferrer nofollow\">\u041e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 <\/a>\u0438\u043b\u0438 <a href=\"https:\/\/vercel.com\/templates\/next.js\/nextjs-commerce\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e <\/a>\u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430?<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 Google \u043e\u0431\u044a\u044f\u0432\u0438\u043b \u043e \u0442\u043e\u043c, \u0447\u0442\u043e <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" rel=\"noopener noreferrer nofollow\">\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <\/a>\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 Amazon \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0430, \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u043e <a href=\"https:\/\/www.forbes.com\/sites\/steveolenski\/2016\/11\/10\/why-brands-are-fighting-over-milliseconds\/?sh=6d1165864ad3\" rel=\"noopener noreferrer nofollow\">100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u043e\u044f\u0442 \u0435\u0439 1% \u043f\u0440\u043e\u0434\u0430\u0436<\/a>, \u044d\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043b\u043e \u0441\u0430\u0439\u0442\u044b \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043f\u043b\u0430\u043d\u043a\u0443 \u0438\u043b\u0438 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0439.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e \u0434\u0430\u043d\u043d\u044b\u043c Web Almanac, <a href=\"https:\/\/almanac.httparchive.org\/en\/2021\/ecommerce#lighthouse\" rel=\"noopener noreferrer nofollow\">\u0441\u0430\u0439\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u044e\u0442 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/796\/4e1\/2a4\/7964e12a4d93c58c0b3627814099b4b0.png\" width=\"640\" height=\"396\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/796\/4e1\/2a4\/7964e12a4d93c58c0b3627814099b4b0.png\"\/><\/figure>\n<p>\u0421\u0430\u0439\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434. \u0427\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438, \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439?<\/p>\n<ul>\n<li>\n<p><strong>\u041e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/strong>. \u0423 50-\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0431\u044b\u043b 101 \u0437\u0430\u043f\u0440\u043e\u0441. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e\u0431\u043e \u0432\u0441\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0442\u043e\u0432\u0430\u0440\u0430\u0445 \u0438 \u043f\u0440\u043e\u0434\u0430\u0436\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0434\u043e\u043c\u0430\u0448\u043d\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0435\u0441<\/strong>. \u0412\u0438\u0434\u0435\u043e \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u043e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043c \u0432 \u0432\u0435\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438 \u043f\u0440\u043e\u0434\u0430\u0436 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432 \u043d\u0438\u0445 \u0443\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/strong>. \u042d\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u043a\u0443\u043f\u043e\u043a, \u043f\u0440\u0438\u0432\u044b\u0447\u0435\u043a \u0438\u043b\u0438 \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0435, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 \u0438 \u0442.\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u043d\u043e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043e\u043d\u0438 \u043d\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0433\u043e\u0441\u0442\u044c\u044e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043c\u044b \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 Shopify \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/shopify.dev\/docs\/themes\/store\/requirements#5-lighthouse-performance-and-accessibility\" rel=\"noopener noreferrer nofollow\">\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 Lighthouse \u0432 60 \u0431\u0430\u043b\u043b\u043e\u0432 <\/a>\u0434\u043b\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0435\u043c\u044b, \u043a\u0430\u043a \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0440\u043e\u0437\u043d\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Under Armour, Walmart, Target, Nike \u0438 \u0434\u0440\u0443\u0433\u0438\u0435, \u0434\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u0441\u0432\u043e\u044e \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0443\u044e \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u044e Next.js, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u043c \u0434\u043e\u0431\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u0443\u0447\u0448\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h2>Next.js Commerce v1<\/h2>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/nextjs.org\/commerce\" rel=\"noopener noreferrer nofollow\">Next.js Commerce <\/a>\u0431\u044b\u043b\u0430 \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 <a href=\"https:\/\/nextjs.org\/2020\/conf\" rel=\"noopener noreferrer nofollow\">Next.js Conf 2020 <\/a>\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 <a href=\"https:\/\/nextjs.org\/blog\/next-10#nextjs-commerce\" rel=\"noopener noreferrer nofollow\">Next.js 10<\/a>. \u041d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Next.js \u0442\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>next\/image<\/code> \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b\u0438 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438.<\/p>\n<p>\u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043e\u0442 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043e\u0432 \u043a \u0431\u0435\u0437\u0433\u043e\u043b\u043e\u0432\u043e\u0439 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043f\u043b\u0430\u043d\u043a\u0443 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438. Next.js Commerce \u0432\u043e\u043f\u043b\u043e\u0442\u0438\u043b \u0432 \u0441\u0435\u0431\u0435 \u043b\u0443\u0447\u0448\u0438\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0435, \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0432\u0435\u0431-\u044f\u0434\u0440\u0430, SEO-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u043d\u0443\u044e \u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0441\u0442\u0430\u0442\u0438\u043a\u0438, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p>\u042d\u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f Next.js Commerce \u0441\u0442\u0430\u043b\u0430 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0432\u043f\u0435\u0440\u0435\u0434, \u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h2>Next.js Commerce 2.0 &#8212; \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0438\u0442\u0440\u0438\u043d\u044b \u0441\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445<\/h2>\n<p>\u0412 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043a\u043e\u0440\u0437\u0438\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430, \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u043c\u044b\u0435 \u0442\u043e\u0432\u0430\u0440\u044b \u0438 \u0438\u0445 \u043d\u0430\u043b\u0438\u0447\u0438\u0435, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0442\u043e\u0432\u0430\u0440\u0430\u043c \u0438 \u0442.\u0434.<\/p>\n<p>\u0414\u0430\u0436\u0435 \u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 Server-Side Rendering (SSR), Static Site Generation (SSG) \u0438 Incremental Static Regeneration (ISR) \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c Next.js 13 \u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 App Router \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u043c\u0443 \u0443\u0440\u043e\u0432\u043d\u044e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0442\u0440\u0438\u043d\u044b \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<h2>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u0435\u0439\u0448\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <a href=\"https:\/\/pagespeed.web.dev\/analysis\/https-demo-vercel-store\/26y7enx4ag\" rel=\"noopener noreferrer nofollow\">Next.js 13 \u0438 \u043e\u0431\u043b\u0430\u043a\u0430 Vercel Frontend Cloud, Next.js Commerce 2.0 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 \u0441\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/25c\/e01\/6ce\/25ce016ce370b5d4066f6b8c48255c56.jpg\" width=\"2160\" height=\"991\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/25c\/e01\/6ce\/25ce016ce370b5d4066f6b8c48255c56.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0432\u0438\u0442\u0440\u0438\u043d\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching\" rel=\"noopener noreferrer nofollow\">\u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <\/a>\u0432 Next.js App Router \u0438 <a href=\"https:\/\/vercel.com\/docs\/infrastructure\/data-cache\" rel=\"noopener noreferrer nofollow\">Vercel Data Cache<\/a>.<\/p>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0440\u0435\u043b\u0438\u0437\u0443 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0442\u0435\u043c\u0435 \u0441\u0432\u0435\u0436\u0438\u0439, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9e5\/721\/0ba\/9e57210ba9cace7668b030464bdb7d89.png\" width=\"1920\" height=\"1892\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9e5\/721\/0ba\/9e57210ba9cace7668b030464bdb7d89.png\"\/><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Next.js 13, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c.<\/p>\n<h2>\u041b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n<p>App Router \u0432\u0432\u043e\u0434\u0438\u0442 \u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u044e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u043d \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/pages-and-layouts\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/a>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0441\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0448\u0430\u043f\u043a\u0438 \u0438 \u0444\u0443\u0442\u0435\u0440\u044b, \u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 &#8212; \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041e\u0431\u0449\u0435\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u043c. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043b\u043e \u0435\u0449\u0435 \u043f\u0440\u043e\u0449\u0435.<\/p>\n<h2>React Server Components, Streaming, \u0438 Suspense<\/h2>\n<p><a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#server-components\" rel=\"noopener noreferrer nofollow\">React Server Components (RSC) <\/a>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b API, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u0430 JavaScript \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u044b\u0445 \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/loading-ui-and-streaming\" rel=\"noopener noreferrer nofollow\">Streaming \u0438 Suspense <\/a>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0445 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438, \u0430 \u043d\u0435 \u0436\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0430 \u0432\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0412\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c, \u043a\u0430\u043a \u0441\u0430\u043c\u044b\u0439 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434. \u0427\u0430\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043a\u0440\u0430\u043d\u0430, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u043f\u043e\u0437\u0436\u0435, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u0438\u0434\u044f\u0442 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<ul>\n<li>\n<p>\u041b\u0435\u0439\u0430\u0443\u0442, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043e\u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0440\u0437\u0438\u043d\u0430, \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430, \u0442\u043e\u0432\u0430\u0440\u044b \u0438 \u0444\u0443\u0442\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 Suspense, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043f\u0440\u0438 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0434\u0432\u0438\u0433 \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 Next.js 13 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438. \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u0435\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u0438 \u0433\u0434\u0435 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u044b <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/fetching\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f <\/a>\u0438 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching\" rel=\"noopener noreferrer nofollow\">\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <\/a>\u0434\u0430\u043d\u043d\u044b\u0445, \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f (\u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043a\u0430\u043a \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f) \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/shopify.dev\/docs\/api\/storefront\" rel=\"noopener noreferrer nofollow\">Shopify Storefront API<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 GraphQL. GraphQL \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438. \u041c\u044b \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432 Next.js \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u0439.<\/p>\n<pre><code class=\"javascript\">const domain = `https:\/\/${process.env.SHOPIFY_STORE_DOMAIN}`; const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`; const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;  export async function shopifyFetch({   cache = 'force-cache',   headers,   query,   tags,   variables }) {   const result = await fetch(endpoint, {     method: 'POST',     headers: {       'Content-Type': 'application\/json',       'X-Shopify-Storefront-Access-Token': key,       ...headers     },     body: JSON.stringify({       ...(query &amp;&amp; { query }),       ...(variables &amp;&amp; { variables })     }),     cache,     ...(tags &amp;&amp; { next: { tags } })   });    const body = await result.json();    if (body.errors) {     throw body.errors[0];   }    return {     status: result.status,     body   }; }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u044d\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e\u0432\u0430\u0440\u044b.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432 Shopify \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430, \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u044c \u0438 \u0442.\u0434., \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u043e\u0442\u0440\u0430\u0436\u0430\u043b \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u0434\u0435\u043b\u0430\u043b \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">import { getProductQuery } from '.\/queries\/product';  const res = await shopifyFetch({   query: getProductQuery,   tags: ['products'],   variables: {     handle: 'acme-t-shirt'   } });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/shopify.dev\/docs\/api\/admin-rest\/2023-07\/resources\/webhook\" rel=\"noopener noreferrer nofollow\">\u0432\u0435\u0431\u0445\u0443\u043a\u0438 Shopify<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0442\u043e\u0432\u0430\u0440\u0435, \u0438 \u043f\u0435\u0440\u0435\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0442\u043e\u0432\u0430\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/revalidateTag\" rel=\"noopener noreferrer nofollow\">revalidateTag<\/a>.<\/p>\n<pre><code class=\"javascript\">import { revalidateTag } from 'next\/cache'; import { NextRequest, NextResponse } from 'next\/server';  export const runtime = 'edge';  export async function POST(req) {   const productWebhooks = ['products\/create', 'products\/delete', 'products\/update'];   const topic = headers().get('x-shopify-topic') || 'unknown';   const isProductUpdate = productWebhooks.includes(topic);    if (!isProductUpdate) {     \/\/ We don't need to revalidate anything for any other topics.     return NextResponse.json({ status: 200 });   }    if (isProductUpdate) {     revalidateTag('products');   }    return NextResponse.json({ status: 200, revalidated: true, now: Date.now() }); }<\/code><\/pre>\n<h2>Edge Runtime<\/h2>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432\u0438\u0442\u0440\u0438\u043d\u044b \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0435\u0433\u0438\u043e\u043d\u0435. \u042d\u0442\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u0431\u044b \u043e\u043d\u0438 \u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0438\u0441\u044c. \u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0440\u043e\u0437\u043d\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438\u043c\u0435\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443, \u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0440\u043e\u0433\u043e \u0438 \u0441\u043b\u043e\u0436\u043d\u043e \u0432 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0438. Vercel \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0433\u0430\u0437\u0438\u043d. \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0433\u0438\u043e\u043d\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/edge-and-nodejs-runtimes\" rel=\"noopener noreferrer nofollow\">Edge Runtime <\/a>\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f\u043c\u0438, \u0434\u0435\u043b\u0430\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0432\u0435\u0431 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0438\u0445 \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u043a\u043e\u0434\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0432 API-\u043c\u0430\u0440\u0448\u0440\u0443\u0442, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 Next.js Commerce \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0432\u044b\u0441\u043e\u0447\u0430\u0439\u0448\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"javascript\">import { Carousel } from 'components\/carousel'; import { ThreeItemGrid } from 'components\/grid\/three-items'; import Footer from 'components\/layout\/footer'; import { Suspense } from 'react';  export const runtime = 'edge';  export const metadata = {   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',   openGraph: {     type: 'website'   } };  export default async function HomePage() {   return (     &lt;>       &lt;ThreeItemGrid \/>       &lt;Suspense>         &lt;Carousel \/>         &lt;Suspense>           &lt;Footer \/>         &lt;\/Suspense>       &lt;\/Suspense>     &lt;\/>   ); }<\/code><\/pre>\n<h2>Server Actions<\/h2>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/server-actions\" rel=\"noopener noreferrer nofollow\">Server Actions <\/a>(alpha) \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u0447\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b API, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e JavaScript \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n<pre><code class=\"javascript\">'use client';  import { addItem } from 'components\/cart\/actions'; import { useRouter } from 'next\/navigation'; import { useTransition } from 'react';  export function AddToCart({selectedVariantId}) {   const router = useRouter();   const [isPending, startTransition] = useTransition();    return (     &lt;button       aria-label=\"Add item to cart\"       disabled={isPending}       onClick={() => {         startTransition(async () => {           const error = await addItem(selectedVariantId);            if (error) {             alert(error);             return;           }            router.refresh();         });       }}     >       Add To Cart     &lt;\/button>   ); }<\/code><\/pre>\n<pre><code class=\"javascript\">'use server';  import { addToCart, createCart, getCart } from 'lib\/shopify'; import { cookies } from 'next\/headers';  export const addItem = async (variantId) => {   let cartId = cookies().get('cartId')?.value;   let cart;    if (cartId) {     cart = await getCart(cartId);   }    if (!cartId || !cart) {     cart = await createCart();     cartId = cart.id;     cookies().set('cartId', cartId);   }    if (!variantId) {     return new Error('Missing variantId');   }   try {     await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);   } catch (e) {     return new Error('Error adding item', { cause: e });   } };<\/code><\/pre>\n<h2>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u043c\u0438<\/h2>\n<p>\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 Next.js Commerce <code>v1<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0430 \u0441\u043e\u0431\u043e\u0439 \u043c\u0443\u043b\u044c\u0442\u0438\u0432\u0435\u043d\u0434\u043e\u0440\u043d\u043e\u0435, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0435\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 \u0434\u0435\u0441\u044f\u0442\u044c\u044e \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u0430\u043c\u0438 \u0443\u0441\u043b\u0443\u0433 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438. \u0412 \u0432\u0435\u0440\u0441\u0438\u0438 2 \u043c\u044b \u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u043e\u043a\u043e\u043b\u043e 145 000 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u0441\u0434\u0435\u043b\u0430\u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0432 \u043e \u043d\u043e\u0432\u0435\u0439\u0448\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 Next.js 13.<\/p>\n<p>\u041f\u0430\u0440\u0442\u043d\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f Next.js Commerce \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0432\u043e\u0435\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b. \u041c\u044b \u0440\u0430\u0434\u044b, \u0447\u0442\u043e \u043d\u0430\u0448\u0438 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u044b <a href=\"https:\/\/github.com\/bigcommerce\/nextjs-commerce\" rel=\"noopener noreferrer nofollow\">BigCommerce<\/a>, <a href=\"https:\/\/github.com\/medusajs\/vercel-commerce\" rel=\"noopener noreferrer nofollow\">Medusa<\/a>, <a href=\"https:\/\/github.com\/saleor\/nextjs-commerce\" rel=\"noopener noreferrer nofollow\">Saleor <\/a>\u0438 <a href=\"https:\/\/github.com\/swellstores\/verswell-commerce\" rel=\"noopener noreferrer nofollow\">Swell <\/a>\u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u044d\u0442\u0443 \u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0438 \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0442 <a href=\"https:\/\/github.com\/vercel\/commerce#providers\" rel=\"noopener noreferrer nofollow\">\u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u0434\u0435\u043c\u043e-\u0432\u0435\u0440\u0441\u0438\u0438<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 Next.js Commerce 2.0. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0432\u043e\u0435\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/vercel\/commerce#providers\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c <\/a>\u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u043c \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Next.js Commerce 2.0 + Shopify, <a href=\"https:\/\/vercel.com\/templates\/next.js\/nextjs-commerce\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0441\u0435\u0442\u0438\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 <\/a>\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 &#171;\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u0449\u0435\u043b\u0447\u043a\u043e\u043c&#187;.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/753174\/\"> https:\/\/habr.com\/ru\/articles\/753174\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438\u00a0&#171;<a href=\"https:\/\/vercel.com\/blog\/introducing-next-js-commerce-2-0\" rel=\"noopener noreferrer nofollow\">Introducing Next.js Commerce 2.0<\/a>&#171;.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u201c<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\"><u>Frontend \u043f\u043e-\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/u><\/a>\u201d, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0441 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c Next.js Commerce 2.0.<\/p>\n<ul>\n<li>\n<p><strong>App Router Ready<\/strong>: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React Server, Server Actions, \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u0432, \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u0441\u0435\u0445 \u043d\u043e\u0432\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0438\u0437 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0432\u044b\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0433\u043e App Router.<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u0438\u0442\u0440\u0438\u043d\u0430<\/strong>: \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u0438\u0442\u0440\u0438\u043d\u0430 \u0441 Edge-\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u0441\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0435\u0437 \u0443\u0449\u0435\u0440\u0431\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430<\/strong>: Next.js Commerce \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043c \u043a\u043e\u0434\u0430 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d-\u0430\u043a\u0441\u0435\u043b\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 BigCommerce, Medusa, Saleor, Shopify \u0438 Swell.<\/p>\n<p><a href=\"https:\/\/demo.vercel.store\/\" rel=\"noopener noreferrer nofollow\">\u041e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 <\/a>\u0438\u043b\u0438 <a href=\"https:\/\/vercel.com\/templates\/next.js\/nextjs-commerce\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e <\/a>\u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430?<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 Google \u043e\u0431\u044a\u044f\u0432\u0438\u043b \u043e \u0442\u043e\u043c, \u0447\u0442\u043e <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" rel=\"noopener noreferrer nofollow\">\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <\/a>\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 Amazon \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0430, \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u043e <a href=\"https:\/\/www.forbes.com\/sites\/steveolenski\/2016\/11\/10\/why-brands-are-fighting-over-milliseconds\/?sh=6d1165864ad3\" rel=\"noopener noreferrer nofollow\">100 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u043e\u044f\u0442 \u0435\u0439 1% \u043f\u0440\u043e\u0434\u0430\u0436<\/a>, \u044d\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043b\u043e \u0441\u0430\u0439\u0442\u044b \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043f\u043b\u0430\u043d\u043a\u0443 \u0438\u043b\u0438 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u0442\u044c \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0439.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e \u0434\u0430\u043d\u043d\u044b\u043c Web Almanac, <a href=\"https:\/\/almanac.httparchive.org\/en\/2021\/ecommerce#lighthouse\" rel=\"noopener noreferrer nofollow\">\u0441\u0430\u0439\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u044e\u0442 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439<\/a>.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0421\u0430\u0439\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434. \u0427\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438, \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439?<\/p>\n<ul>\n<li>\n<p><strong>\u041e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/strong>. \u0423 50-\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0431\u044b\u043b 101 \u0437\u0430\u043f\u0440\u043e\u0441. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e\u0431\u043e \u0432\u0441\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0442\u043e\u0432\u0430\u0440\u0430\u0445 \u0438 \u043f\u0440\u043e\u0434\u0430\u0436\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0434\u043e\u043c\u0430\u0448\u043d\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0435\u0441<\/strong>. \u0412\u0438\u0434\u0435\u043e \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u043e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043c \u0432 \u0432\u0435\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438 \u043f\u0440\u043e\u0434\u0430\u0436 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432 \u043d\u0438\u0445 \u0443\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/strong>. \u042d\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u043a\u0443\u043f\u043e\u043a, \u043f\u0440\u0438\u0432\u044b\u0447\u0435\u043a \u0438\u043b\u0438 \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0435, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 \u0438 \u0442.\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u043d\u043e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043e\u043d\u0438 \u043d\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0433\u043e\u0441\u0442\u044c\u044e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043c\u044b \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 Shopify \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/shopify.dev\/docs\/themes\/store\/requirements#5-lighthouse-performance-and-accessibility\" rel=\"noopener noreferrer nofollow\">\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 Lighthouse \u0432 60 \u0431\u0430\u043b\u043b\u043e\u0432 <\/a>\u0434\u043b\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0435\u043c\u044b, \u043a\u0430\u043a \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0440\u043e\u0437\u043d\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Under Armour, Walmart, Target, Nike \u0438 \u0434\u0440\u0443\u0433\u0438\u0435, \u0434\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u0441\u0432\u043e\u044e \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0443\u044e \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u044e Next.js, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u043c \u0434\u043e\u0431\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u0443\u0447\u0448\u0438\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h2>Next.js Commerce v1<\/h2>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/nextjs.org\/commerce\" rel=\"noopener noreferrer nofollow\">Next.js Commerce <\/a>\u0431\u044b\u043b\u0430 \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 <a href=\"https:\/\/nextjs.org\/2020\/conf\" rel=\"noopener noreferrer nofollow\">Next.js Conf 2020 <\/a>\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 <a href=\"https:\/\/nextjs.org\/blog\/next-10#nextjs-commerce\" rel=\"noopener noreferrer nofollow\">Next.js 10<\/a>. \u041d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Next.js \u0442\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>next\/image<\/code> \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b\u0438 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438.<\/p>\n<p>\u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043e\u0442 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043e\u0432 \u043a \u0431\u0435\u0437\u0433\u043e\u043b\u043e\u0432\u043e\u0439 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043f\u043b\u0430\u043d\u043a\u0443 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438. Next.js Commerce \u0432\u043e\u043f\u043b\u043e\u0442\u0438\u043b \u0432 \u0441\u0435\u0431\u0435 \u043b\u0443\u0447\u0448\u0438\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0435, \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0432\u0435\u0431-\u044f\u0434\u0440\u0430, SEO-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u043d\u0443\u044e \u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0441\u0442\u0430\u0442\u0438\u043a\u0438, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p>\u042d\u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f Next.js Commerce \u0441\u0442\u0430\u043b\u0430 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0432\u043f\u0435\u0440\u0435\u0434, \u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h2>Next.js Commerce 2.0 &#8212; \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0438\u0442\u0440\u0438\u043d\u044b \u0441\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445<\/h2>\n<p>\u0412 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043a\u043e\u0440\u0437\u0438\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430, \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u043c\u044b\u0435 \u0442\u043e\u0432\u0430\u0440\u044b \u0438 \u0438\u0445 \u043d\u0430\u043b\u0438\u0447\u0438\u0435, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0442\u043e\u0432\u0430\u0440\u0430\u043c \u0438 \u0442.\u0434.<\/p>\n<p>\u0414\u0430\u0436\u0435 \u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 Server-Side Rendering (SSR), Static Site Generation (SSG) \u0438 Incremental Static Regeneration (ISR) \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c Next.js 13 \u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 App Router \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u043c\u0443 \u0443\u0440\u043e\u0432\u043d\u044e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0442\u0440\u0438\u043d\u044b \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<h2>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u0435\u0439\u0448\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <a href=\"https:\/\/pagespeed.web.dev\/analysis\/https-demo-vercel-store\/26y7enx4ag\" rel=\"noopener noreferrer nofollow\">Next.js 13 \u0438 \u043e\u0431\u043b\u0430\u043a\u0430 Vercel Frontend Cloud, Next.js Commerce 2.0 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 \u0441\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u043a\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0432\u0438\u0442\u0440\u0438\u043d\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching\" rel=\"noopener noreferrer nofollow\">\u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <\/a>\u0432 Next.js App Router \u0438 <a href=\"https:\/\/vercel.com\/docs\/infrastructure\/data-cache\" rel=\"noopener noreferrer nofollow\">Vercel Data Cache<\/a>.<\/p>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0440\u0435\u043b\u0438\u0437\u0443 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0434\u0430\u0442\u044c \u0442\u0435\u043c\u0435 \u0441\u0432\u0435\u0436\u0438\u0439, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Next.js 13, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c.<\/p>\n<h2>\u041b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n<p>App Router \u0432\u0432\u043e\u0434\u0438\u0442 \u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u044e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u043d \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/pages-and-layouts\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/a>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0441\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0448\u0430\u043f\u043a\u0438 \u0438 \u0444\u0443\u0442\u0435\u0440\u044b, \u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 &#8212; \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u0437\u0438\u043d\u0443, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041e\u0431\u0449\u0435\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u043c. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043b\u043e \u0435\u0449\u0435 \u043f\u0440\u043e\u0449\u0435.<\/p>\n<h2>React Server Components, Streaming, \u0438 Suspense<\/h2>\n<p><a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#server-components\" rel=\"noopener noreferrer nofollow\">React Server Components (RSC) <\/a>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b API, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u0430 JavaScript \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u044b\u0445 \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/loading-ui-and-streaming\" rel=\"noopener noreferrer nofollow\">Streaming \u0438 Suspense <\/a>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0445 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438, \u0430 \u043d\u0435 \u0436\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0430 \u0432\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0412\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c, \u043a\u0430\u043a \u0441\u0430\u043c\u044b\u0439 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434. \u0427\u0430\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043a\u0440\u0430\u043d\u0430, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u043f\u043e\u0437\u0436\u0435, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u0438\u0434\u044f\u0442 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<ul>\n<li>\n<p>\u041b\u0435\u0439\u0430\u0443\u0442, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043e\u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0440\u0437\u0438\u043d\u0430, \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430, \u0442\u043e\u0432\u0430\u0440\u044b \u0438 \u0444\u0443\u0442\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 Suspense, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043f\u0440\u0438 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0434\u0432\u0438\u0433 \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 Next.js 13 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438. \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u0435\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u0438 \u0433\u0434\u0435 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u044b <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/fetching\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f <\/a>\u0438 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching\" rel=\"noopener noreferrer nofollow\">\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <\/a>\u0434\u0430\u043d\u043d\u044b\u0445, \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f (\u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043a\u0430\u043a \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f) \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/shopify.dev\/docs\/api\/storefront\" rel=\"noopener noreferrer nofollow\">Shopify Storefront API<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 GraphQL. GraphQL \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438. \u041c\u044b \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432 Next.js \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u0443\u0442\u0430\u0446\u0438\u0439.<\/p>\n<pre><code class=\"javascript\">const domain = `https:\/\/${process.env.SHOPIFY_STORE_DOMAIN}`; const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`; const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;  export async function shopifyFetch({   cache = 'force-cache',   headers,   query,   tags,   variables }) {   const result = await fetch(endpoint, {     method: 'POST',     headers: {       'Content-Type': 'application\/json',       'X-Shopify-Storefront-Access-Token': key,       ...headers     },     body: JSON.stringify({       ...(query &amp;&amp; { query }),       ...(variables &amp;&amp; { variables })     }),     cache,     ...(tags &amp;&amp; { next: { tags } })   });    const body = await result.json();    if (body.errors) {     throw body.errors[0];   }    return {     status: result.status,     body   }; }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u044d\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e\u0432\u0430\u0440\u044b.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432 Shopify \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430, \u0438\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u044c \u0438 \u0442.\u0434., \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u043e\u0442\u0440\u0430\u0436\u0430\u043b \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u0434\u0435\u043b\u0430\u043b \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">import { getProductQuery } from '.\/queries\/product';  const res = await shopifyFetch({   query: getProductQuery,   tags: ['products'],   variables: {     handle: 'acme-t-shirt'   } });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/shopify.dev\/docs\/api\/admin-rest\/2023-07\/resources\/webhook\" rel=\"noopener noreferrer nofollow\">\u0432\u0435\u0431\u0445\u0443\u043a\u0438 Shopify<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0442\u043e\u0432\u0430\u0440\u0435, \u0438 \u043f\u0435\u0440\u0435\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0442\u043e\u0432\u0430\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/revalidateTag\" rel=\"noopener noreferrer nofollow\">revalidateTag<\/a>.<\/p>\n<pre><code class=\"javascript\">import { revalidateTag } from 'next\/cache'; import { NextRequest, NextResponse } from 'next\/server';  export const runtime = 'edge';  export async function POST(req) {   const productWebhooks = ['products\/create', 'products\/delete', 'products\/update'];   const topic = headers().get('x-shopify-topic') || 'unknown';   const isProductUpdate =<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-351564","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=351564"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351564\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=351564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=351564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=351564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}