{"id":346296,"date":"2023-03-05T21:01:13","date_gmt":"2023-03-05T21:01:13","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=346296"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=346296","title":{"rendered":"<span>\u041f\u0440\u043e\u0431\u0443\u044e \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Next.js 13<\/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>\u0412\u0441\u0435\u0445 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0438 \u0436\u0435\u043b\u0430\u044e \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n<p><a href=\"https:\/\/nextjs.org\/\" rel=\"noopener noreferrer nofollow\">Next.js<\/a> \u044d\u0442\u043e fullstack \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 <a href=\"https:\/\/vercel.com\/\" rel=\"noopener noreferrer nofollow\">Vercel<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 React.<\/p>\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e <a href=\"https:\/\/nextjs.org\/blog\/next-13\" rel=\"noopener noreferrer nofollow\">25 \u043e\u043a\u0442\u044f\u0431\u0440\u044f 2022 \u0433\u043e\u0434\u0430<\/a> \u0432\u044b\u0448\u043b\u0430 \u0432\u0435\u0440\u0441\u0438\u044f 13. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f 13.2.3,  \u0438 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0431\u0435\u0442\u0430 \u0442\u0435\u0441\u0442\u0430, \u0438 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d.<\/p>\n<p>13 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 12. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f app. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u0438 12.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u043e\u0431\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 13, \u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e Next.js \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e: <a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/588498\/\" rel=\"noopener noreferrer nofollow\">Next.js: \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e. \u0418\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0432\u0430\u044f<\/a>.<\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<\/h2>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432:<\/p>\n<p><strong>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u0442\u0430\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p><strong>\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 fetch c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.  \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<blockquote>\n<p>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 &#8212; \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c URL \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u043b\u0435\u0448\u0430\u043c\u0438.<\/p>\n<\/blockquote>\n<p><strong>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043d\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u043c\u044b:<\/p>\n<ul>\n<li>\n<p>\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <strong>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u0435\u0440\u0442\u043a\u0438<\/strong> \u043d\u0430\u0434 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442: \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0441\u043b\u043e\u0438, \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0424\u0430\u0439\u043b\u044b \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route groups<\/a>  &#8212; \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u043d\u0438\u043c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043d\u0435 \u0432\u043b\u0438\u044f\u044f \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 URL, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 layout.<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b<\/strong> &#8212; \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u0438\u0437 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a \u0432 \u0438\u043c\u0435\u043d\u0430\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439, \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 pages. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/route-handlers\" rel=\"noopener noreferrer nofollow\">Route Handlers<\/a> &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e API \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 http \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 pages\/api. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435  &#171;\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430&#187;.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 Http \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Suspense<\/strong><\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 Http  \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Suspense \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432  &#171;HTTP Streaming \u0438 Suspense&#187;<\/p>\n<p><strong>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0438 SEO \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 js \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <a href=\"https:\/\/json-ld.org\/\" rel=\"noopener noreferrer nofollow\">JSON-LD<\/a> &#8212; \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u0438\u043a\u0440\u043e\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u044f <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Linked_data\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/a>.<\/p>\n<p><strong>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438 \u0432\u044b\u0432\u043e\u0434\u044b<\/strong><\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430\u2026<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430<\/h2>\n<p>\u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/denisso\/next13-app-exp\" rel=\"noopener noreferrer nofollow\">Github next13-app-exp<\/a> \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b \u043d\u0430 <a href=\"https:\/\/vercel.com\/\" rel=\"noopener noreferrer nofollow\">Vercel<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u043a\u0430\u0436\u0434\u0443\u044e \u0432\u0435\u0442\u043a\u0443.<\/p>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0432\u0435\u0442\u043e\u043a:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/router-dynamic\" rel=\"noopener noreferrer nofollow\">Code router-dynamic<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-router-dynamic-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u0442\u0435\u0441\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 dynamicParams \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u041f\u043e\u043a\u0430 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 <a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/45939\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0435\u0433\u043e not-found.js<\/a> \u0438 \u0432 \u044d\u0442\u043e\u043c <a href=\"https:\/\/github.com\/vercel\/next.js\/discussions\/45927\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/context\" rel=\"noopener noreferrer nofollow\">Code context<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-context-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/server-fetch-standalone\" rel=\"noopener noreferrer nofollow\">Code server-fetch-standalone<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-server-fetch-standalone-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online demo<\/a>&#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e fetch \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 revalidate: 60, \u0441 \u043a\u044d\u0448\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435&#187;. \u041f\u043e\u043a\u0430 \u043e\u043f\u0446\u0438\u044f revalidate: 60 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/46732\" rel=\"noopener noreferrer nofollow\">\u0431\u0430\u0433 \u0440\u0435\u043f\u043e\u0440\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/static-dynamic-segments\" rel=\"noopener noreferrer nofollow\">Code static-dynamic-segments<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-static-dynamic-segments-denisso.vercel.app\" rel=\"noopener noreferrer nofollow\">Online demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c URL \u043f\u0443\u0442\u0438, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c \u043f\u0443\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/suspense\" rel=\"noopener noreferrer nofollow\">Code suspense<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-suspense-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Suspense \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Suspense&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/server-fetch-custom-cache\" rel=\"noopener noreferrer nofollow\">server-fetch-custom-cache<\/a>, &#8212; \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0432\u043e\u0439 \u043a\u044d\u0448 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438&#187;.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f&#187;:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/loading\" rel=\"noopener noreferrer nofollow\">Code loading<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-loading-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212;  \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0430\u0439\u043b\u0430 loading.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 Suspense \u043a \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0443<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/error-boundaries\" rel=\"noopener noreferrer nofollow\">Code error-boundaries<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-error-boundaries-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212;  \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0430\u0439\u043b\u0430 error.js \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u043e\u0448\u0438\u0431\u043e\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/templates\" rel=\"noopener noreferrer nofollow\">Code templates<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-templates-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0430\u0439\u043b\u0430 template.tsx, \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043e\u0434\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route Groups<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/multiple-root-layouts\" rel=\"noopener noreferrer nofollow\">Code multiple-root-layouts<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-multiple-root-layouts-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#example-creating-multiple-root-layouts\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 Root Layout<\/a>, \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 layout.js, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0434\u0432\u0435 \u043f\u0430\u043f\u043a\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c layout.js <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/pages-and-layouts#root-layout-required\" rel=\"noopener noreferrer nofollow\">Root Layout<\/a>. \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 Root Layout \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 13.1.6  \u0431\u044b\u043b\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0438 \u044f \u043d\u0430\u0434\u0435\u044f\u043b\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. <a href=\"https:\/\/github.com\/orgs\/vercel\/discussions\/1414\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435<\/a> \u0442\u0430\u043a \u0431\u044b\u043b\u043e \u0432 <a href=\"https:\/\/multiple-root-layouts-e20pt24sg-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">13.1.6<\/a> \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 root layout 3 \u0440\u0430\u0437\u0430 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0430\u044f <a href=\"https:\/\/vercel.com\/templates\/next.js\/app-directory\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043a\u0430<\/a> \u043e\u0442 Vercel \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0412 github \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 Next.js 13 \u0432 \u043f\u0430\u043f\u043a\u0435 examples \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f app:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/app-dir-i18n-routing\" rel=\"noopener noreferrer nofollow\">app-dir-i18n-routing<\/a> &#8212; \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 RootLayout<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/app-dir-mdx\" rel=\"noopener noreferrer nofollow\">app-dir-mdx<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/reproduction-template-app-dir\" rel=\"noopener noreferrer nofollow\">reproduction-template-app-dir<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/with-grafbase\" rel=\"noopener noreferrer nofollow\">with-grafbase<\/a> &#8212; \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 graphlq<\/p>\n<\/li>\n<\/ul>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439<\/h2>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439  \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c create-next-app \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 experimental-app<\/p>\n<pre><code>npx create-next-app@latest --experimental-app <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0432\u043e\u0448\u043b\u0438 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e canary \u0432\u043c\u0435\u0441\u0442\u043e latest.<\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0431\u044b\u043b\u0430 \u0431\u0435\u0437 experimental-app<\/p>\n<pre><code class=\"json\">next.config.js const nextConfig = {   experimental: {     appDir: true,   }, } <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 <a href=\"https:\/\/beta.nextjs.org\/docs\/app-directory-roadmap\" rel=\"noopener noreferrer nofollow\">\u043f\u0430\u043f\u043a\u0430 app<\/a> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u0430\u043f\u043a\u0430 pages \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 12 \u0432\u0435\u0440\u0441\u0438\u0438. pages \u0438 app \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0432 app \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 pages \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c. \u041e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043f\u043e\u043a app \u0438 pages \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 app.<\/p>\n<p>\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c <a href=\"https:\/\/beta.nextjs.org\/docs\/upgrade-guide\" rel=\"noopener noreferrer nofollow\">\u0433\u0430\u0439\u0434 \u043f\u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 pages \u0432 app.<\/p>\n<h2>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 Next.js 12 <a href=\"https:\/\/nextjs.org\/blog\/next-12#react-server-components\" rel=\"noopener noreferrer nofollow\">\u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 (\u0430\u043b\u044c\u0444\u0430)<\/a>, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e server \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430 &#171;component.server.js&#187;.  \u0412 13 \u0432\u0435\u0440\u0441\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412  \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 app \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438, \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 app \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043d\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 app \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u043e\u0434\u0443\u043b\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#client-components\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 &#171;use client&#187;<\/a>, \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043b\u0435\u0435 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.npmjs.com\/package\/server-only\" rel=\"noopener noreferrer nofollow\">server-only<\/a> \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 <a href=\"https:\/\/www.npmjs.com\/package\/client-only\" rel=\"noopener noreferrer nofollow\">client-only<\/a>.<\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u043e \u0431\u0435\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0445\u0443\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n<pre><code>React Class Components only works in Client Components <\/code><\/pre>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412 <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#importing-server-components-into-client-components\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439<\/a>, \u043d\u0443\u0436\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 props children.<\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/fetching#asyncawait-in-server-components\" rel=\"noopener noreferrer nofollow\">\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438<\/a>.<\/p>\n<p>\u0412 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0441\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439  \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 Typescript \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0435<\/p>\n<pre><code>'ServerComponent' cannot be used as a JSX component.   Its return type 'Promise&lt;Element>' is not a valid JSX element.     Type 'Promise&lt;Element>' is missing the following properties from type 'ReactElement&lt;any, any>': type, props, key <\/code><\/pre>\n<p>\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/p>\n<pre><code>{\/* @ts-expect-error Server Component *\/} <\/code><\/pre>\n<p>\u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e.<\/p>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/loading\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a><\/p>\n<p>app\/page.tsx<\/p>\n<pre><code>import { ServerComponent } from \"@\/components\/ServerComponent\"; import { ClientComponent } from \"@\/components\/ClientComponent\";  export default async function Page({ params }: { params: { page: string } }) {   return (     &lt;ClientComponent header={params.page}>       {\/* @ts-expect-error Server Component *\/}       &lt;ServerComponent page={params.page} \/>     &lt;\/ClientComponent>   ); } <\/code><\/pre>\n<p>components\/ClientComponent.tsx<\/p>\n<pre><code>'use client';  export default function ClientComponent({children}) {   return (     &lt;>       {children}     &lt;\/>   ); } <\/code><\/pre>\n<p>components\/ServerComponent.tsx<\/p>\n<pre><code>import { fetchData } from \"@\/lib\/fetchData\";  export const ServerComponent = async ({ page }: { page: string }) => {   const {data} = await fetchData(page)   return &lt;>{data}&lt;\/> } <\/code><\/pre>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#when-to-use-server-vs-client-components\" rel=\"noopener noreferrer nofollow\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/a> \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 Client Side React \u043a\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e render \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0433\u043e\u0442\u043e\u0432\u044b\u0439 HTML CSS \u0438 JS \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/fetch\" rel=\"noopener noreferrer nofollow\">fetch<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 API.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441  \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c API Next.js \u0438 Node.js.<\/p>\n<\/li>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 Client Side React \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0438 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u043c\u0438 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 React.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\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.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u043c API.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/h3>\n<ul>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/cookies\" rel=\"noopener noreferrer nofollow\">cookies<\/a> &#8212; \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c cookie \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 HTTP.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/fetch\" rel=\"noopener noreferrer nofollow\">fetch<\/a> &#8212; \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/headers\" rel=\"noopener noreferrer nofollow\">headers<\/a> &#8212; \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 HTTP.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/generate-static-params\" rel=\"noopener noreferrer nofollow\">generateStaticParams<\/a> &#8212; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/notfound\" rel=\"noopener noreferrer nofollow\">notFound<\/a> &#8212; \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 not-found.js \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u0430 \u0442\u044d\u0433 name=&#187;robots&#187; content=&#187;noindex&#187;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/redirect\" rel=\"noopener noreferrer nofollow\">redirect<\/a> &#8212; \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 URL<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/request\" rel=\"noopener noreferrer nofollow\">NextRequest<\/a> \u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/response\" rel=\"noopener noreferrer nofollow\">NextResponse<\/a> &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 Route handler, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430&#187;<\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>\u0412 app \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 fetch \u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<h3>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0438 \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 fetch<\/h3>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/fetch\" rel=\"noopener noreferrer nofollow\">fetch<\/a> \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 Next.js 13 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\" rel=\"noopener noreferrer nofollow\">fetch Web Api<\/a>.<\/p>\n<p>Fetch \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>{cache: &#171;no-store&#187;} &#8212; \u043d\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c &#8212; {cache: &#171;force-cache&#187;} (default) &#8212; \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>{next: { revalidate: number } } &#8212; \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u044d\u0448 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/next13-app-exp-templates-git-server-fetch-standalone-denisso.vercel.app\" rel=\"noopener noreferrer nofollow\">online demo<\/a> &#8212; \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 fetch \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u044d\u0448 60 \u0441\u0435\u043a\u0443\u043d\u0434:<\/p>\n<pre><code>      const response = await fetch(url, {         next: { revalidate: 60 },       }); <\/code><\/pre>\n<p>\u0412 \u0434\u0435\u043c\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f fetch \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0430 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c id, \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043a\u044d\u0448 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0434\u0430\u043b\u0435\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0434\u0438\u043e \u043a\u043d\u043e\u043f\u043e\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 fetch:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/871\/50b\/71b\/87150b71bc43f27441e17af4dfa2f703.jpeg\" alt=\"\" title=\"\" width=\"671\" height=\"259\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/871\/50b\/71b\/87150b71bc43f27441e17af4dfa2f703.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (Chrome | Firefox) \u043e\u043f\u0446\u0438\u044f revalidate \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e.<\/p>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/discussions\/46729\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 revalidate \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/a><\/p>\n<p>\u041e\u043f\u0446\u0438\u044f cache \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. <a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/server-fetch\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430<\/a>. \u041a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0444\u0444\u043b\u0430\u0439\u043d, \u044f \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u043e\u043d\u043b\u0430\u0439\u043d \u043f\u0440\u0438\u043c\u0435\u0440  \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u043a\u044d\u0448 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412  \u0434\u0435\u043c\u043a\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/typicode\/json-server\" rel=\"noopener noreferrer nofollow\">json-server<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435, \u0441\u043c\u043e\u0442\u0440\u0438 readme \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f).  Json-server \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b. \u0415\u0441\u043b\u0438 \u0432 \u0434\u0435\u043c\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u043c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a json-server \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<p>\u041d\u0435 \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u044d\u0442\u0438\u0445 \u0443\u0442\u0438\u043b\u0438\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/axios-http.com\/docs\/intro\" rel=\"noopener noreferrer nofollow\">axios<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching\/client-side#client-side-data-fetching-with-swr\" rel=\"noopener noreferrer nofollow\">SWR<\/a> \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0443\u0442 \u0434\u043b\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443:<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0438\u043c\u0435\u043d\u0438 \u0445\u043e\u0441\u0442\u0430 &#171;localhost&#187; \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e fetch, \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 127.0.0.1 \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n<pre><code>{\"cause\":{\"errno\":-4078,\"code\":\"ECONNREFUSED\",\"syscall\":\"connect\",\"address\":\"::1\",\"port\":3000}} <\/code><\/pre>\n<p>\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 localhost, \u0442.\u0435. \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435  \u0441\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f. \u0422\u043e\u0447\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u0438 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u044f \u043d\u0435 \u0432\u044b\u044f\u0432\u0438\u043b, \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u044f \u0447\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Node.js 18 \u043f\u0440\u0438 \u043d\u0435 \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445.<\/p>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/46120\" rel=\"noopener noreferrer nofollow\">\u0423 fetch \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043a\u044d\u0448\u0435\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043e \u0432\u0435\u0440\u0441\u0438\u0438 13.2<\/a>.<\/p>\n<h3>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u044d\u0448 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u041d\u043e\u0432\u044b\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0438\u043c\u0435\u0435\u0442 \u043a\u044d\u0448 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/linking-and-navigating#client-side-caching-of-rendered-server-components\" rel=\"noopener noreferrer nofollow\">in-memory client-side cache<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (render result) \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e.<\/p>\n<p>\u041a\u044d\u0448 \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u043d\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e router.refresh().<\/p>\n<h3>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u042d\u0442\u043e SSG \u0438 SSR \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b \u0438 \u0432 pages \u0432\u0435\u0440\u0441\u0438\u0438 12. \u0412 pages \u0440\u0430\u0431\u043e\u0442\u0430 \u0431\u044b\u043b\u0430 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u0432 app  \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0430\u0441\u0442\u044c URL \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439  &#171;\/&#187;.<\/p>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/caching#segment-level-caching\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/p>\n<p>\u0412 app \u0441\u0432\u043e\u0435 API, \u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 pages:<\/p>\n<ul>\n<li>\n<p>\u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 404 \u0438\u043b\u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u043b\u0438 \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438  \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b,  \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0444\u0430\u0439\u043b\u0430\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 &#171;\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f&#187;.<\/p>\n<pre><code>export const dynamic = 'auto' export const dynamicParams = true export const revalidate = false <\/code><\/pre>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043e\u043f\u0446\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/segment-config\" rel=\"noopener noreferrer nofollow\">Route Segment Config<\/a>.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 <a href=\"https:\/\/next13-app-exp-templates-git-static-dynamic-segments-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a>.<\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u0435\u043c\u043a\u0438:<\/p>\n<pre><code>app \u2502   globals.css \u2502   layout.module.scss \u2502   layout.tsx \u2502   page.tsx \u2502 \u2514\u2500\u2500\u2500static     \u2502   layout.tsx     \u2502   page.tsx     \u2502     \u2514\u2500\u2500\u2500dynamic             page.tsx <\/code><\/pre>\n<p>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u0430\u043f\u043e\u043a.<\/p>\n<p>\u0412 \u0434\u0435\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u044c \/static\/dynamic, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0434\u0443\u0449\u0438\u0445 \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>static &#8212; \u044d\u0442\u043e\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 static\\layout.tsx \u043e\u043f\u0446\u0438\u044f dynamic=force-static \u0438 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \/static.<\/p>\n<\/li>\n<li>\n<p>dynamic &#8212; \u044d\u0442\u043e\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u043d\u0435 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 static\\dynamic\\page.tsx \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u043e\u043f\u0446\u0438\u044f dynamic=force-dynamic, \u0438 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \/static\/dynamic.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u044d\u0448 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \/static \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0442.\u0435. \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \/static\/dynamic \u043d\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u0442 \u043a\u044d\u0448 \/static.<\/p>\n<p>\u042d\u0442\u0430 \u0434\u0435\u043c\u043a\u0430 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0434\u043d\u0443 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 &#171;\u0441\u043b\u043e\u0438&#187; \u043e\u043d\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 &#171;\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f&#187;. \u0421\u043b\u043e\u0439 &#8212; \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u0438 \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c. \u0412 \u0434\u0435\u043c\u043a\u0435 \u0441\u043b\u043e\u0439 \u0434\u043b\u044f static \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u0432\u043e\u0435\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0418 \u043f\u043e \u0438\u0434\u0435\u0435 \u0435\u0441\u043b\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 &#171;force-static&#187; \u043e\u043d \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u044d\u0442\u043e \u0442\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0441\u0442\u0430\u0442\u0438\u043a.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0441\u043e static \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043d\u0430 dynamic \u0441\u0435\u0433\u043c\u0435\u043d\u0442, \u0442\u043e \u0443 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 layout  \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 static \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 \u043a\u044d\u0448\u0430. \u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/fundamentals#partial-rendering\" rel=\"noopener noreferrer nofollow\">Partial Rendering<\/a> \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0442.\u0435. \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u0435\u0440\u043d\u043e, \u043a\u0430\u043a \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/7b8\/a1b\/eda\/7b8a1bedaa607010dc5e9ec05609582d.jpeg\" alt=\"\" title=\"\" width=\"639\" height=\"239\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7b8\/a1b\/eda\/7b8a1bedaa607010dc5e9ec05609582d.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0427\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u044d\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430 dynamic \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 &#171;Refresh\u00a0current\u00a0segment&#187;, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/use-router#userouter\" rel=\"noopener noreferrer nofollow\">router.refresh()<\/a>, \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u044d\u0448\u0430 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, layout \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0448\u0435\u043b \u0438\u0437 static \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u043e\u043d force-static:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/73b\/35a\/3a8\/73b35a3a840a7112051e7c471bf0e1c8.png\" alt=\"\" title=\"\" width=\"649\" height=\"250\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/73b\/35a\/3a8\/73b35a3a840a7112051e7c471bf0e1c8.png\"\/><\/figure>\n<p>\u041d\u0430 \u043a\u044d\u0448  \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \/static \u044d\u0442\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0447\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u044f \u044d\u0442\u043e \u0443\u0437\u043d\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 console.log(&#171;generation&#187;), \u0441\u043e\u0431\u0440\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0441\u0435\u0440\u0432\u0435\u0440,  \u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 &#171;Refresh\u00a0current\u00a0segment&#187; \u0432 \u043b\u043e\u0433\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u0438\u0434\u0435\u043b \u044d\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 dynamic \u043d\u0430\u0436\u0430\u0442\u044c &#171;Refresh\u00a0current\u00a0segment&#187; \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 home \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 dynamic, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0436\u0435, \u043a\u0430\u043a \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438  &#171;Refresh\u00a0current\u00a0segment&#187;.<\/p>\n<p>\u041f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u044d\u0442\u043e \u0431\u0430\u0433 \u0438\u043b\u0438 \u0444\u0438\u0447\u0430, \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c <a href=\"https:\/\/github.com\/vercel\/next.js\/discussions\/46695\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<h2>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>\u041d\u043e\u0432\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f Next.js 13 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0430\u0441\u0442\u044c URL \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 &#171;\/&#187;.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/150\/3e0\/855\/1503e085521ccaf0fad5d64e4449b786.jpeg\" alt=\"\" title=\"\" width=\"1600\" height=\"367\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/150\/3e0\/855\/1503e085521ccaf0fad5d64e4449b786.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>. <\/p>\n<p>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 js \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 , \u043e\u0448\u0438\u0431\u043e\u043a (Error boundaries \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c), \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404. \u041f\u0430\u043f\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u044b.<\/p>\n<p>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 &#8212; \u044d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c,<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d7b\/6ac\/dc6\/d7b6acdc64e1d0f47fbb009f6169564c.jpeg\" alt=\"\" title=\"\" width=\"1600\" height=\"849\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d7b\/6ac\/dc6\/d7b6acdc64e1d0f47fbb009f6169564c.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0441\u043e\u0437\u0434\u0430\u0432 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043b\u043e\u0439 (layout.js), \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u043e\u0439 \u0434\u043b\u044f \u0432\u0441\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043b\u043e\u0438. \u042d\u0442\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u0435\u0440\u0442\u043e\u043a: \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043e\u0448\u0438\u0431\u043e\u043a. \u0421\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044f \u0441  <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/layouts\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043b\u043e\u0435\u0432 \u0432 pages<\/a>, \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u0435\u0440\u0442\u043e\u043a app \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<h3>\u0424\u0430\u0439\u043b\u044b \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430<\/h3>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f  \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 Typescript.<\/p>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 app \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u043d\u0430 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b\u0438 \u0441\u043e \u0441\u043f\u0435\u0446. \u0444\u0430\u0439\u043b\u0430\u043c\u0438.<\/p>\n<p>\u0424\u0430\u0439\u043b\u044b \u0438\u0437 pages <a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/custom-app\" rel=\"noopener noreferrer nofollow\">_app<\/a> \u0438 <a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/custom-document\" rel=\"noopener noreferrer nofollow\">_document<\/a> \u0432 app \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c \u0444\u0430\u0439\u043b\u043e\u0432 layout \u0438 page.<\/p>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/fundamentals#file-conventions\" rel=\"noopener noreferrer nofollow\">\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/a> \u0432 \u043f\u0430\u043f\u043a\u0435 app \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0435\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/cf5\/74d\/406\/cf574d406bb1bad3c6667b2cf36dffc8.jpeg\" alt=\"\" title=\"\" width=\"1600\" height=\"643\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cf5\/74d\/406\/cf574d406bb1bad3c6667b2cf36dffc8.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>page.js: \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 UI \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c <\/p>\n<ul>\n<li>\n<p>route.js: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/route-handlers\" rel=\"noopener noreferrer nofollow\">Route Handlers<\/a> \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 HTTP (server-side API endpoints).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>layout.js: \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043e\u0431\u0449\u0438\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 \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041c\u0430\u043a\u0435\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442. <\/p>\n<ul>\n<li>\n<p>template.js: \u041f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 layout.js , \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>loading.js: \u041e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/beta.reactjs.org\/reference\/react\/Suspense\" rel=\"noopener noreferrer nofollow\">React Suspense<\/a>.<\/p>\n<\/li>\n<li>\n<p>error.js: \u041e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/ru.reactjs.org\/docs\/error-boundaries.html\" rel=\"noopener noreferrer nofollow\">React Error Boundary<\/a> <\/p>\n<ul>\n<li>\n<p>global-error.js: \u041f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 error.js, \u043d\u043e \u043b\u043e\u0432\u0438\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c layout.js.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>not-found.js: r\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u043e\u0432\u00a0<a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/notfound\" rel=\"noopener noreferrer nofollow\">notFound<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h4>page.js<\/h4>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \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 \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0444\u0430\u0439\u043b page \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 404 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443.<\/p>\n<\/li>\n<li>\n<p>Page \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/guides\/seo\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445<\/a> \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f generateStaticParams.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0431\u043e page \u043b\u0438\u0431\u043e route.js, \u043d\u043e \u043d\u0435 \u043e\u0431\u0430 \u0441\u0440\u0430\u0437\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>[slug]\\page.tsx<\/p>\n<pre><code>export type TProps = {   params: { slug: string };   searchParams?: { [key: string]: string | string[] | undefined }; };  export default function Page(props: TProps) {   return &lt;PageComponent {...props} \/>; } <\/code><\/pre>\n<p>Props:<\/p>\n<ul>\n<li>\n<p>params &#8212; \u0438\u043c\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>searchParams &#8212; <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\/searchParams\" rel=\"noopener noreferrer nofollow\">\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u0430<\/a><\/p>\n<\/li>\n<\/ul>\n<h4>layout.js<\/h4>\n<p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \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, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u0438\u043d <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/pages-and-layouts#root-layout-required\" rel=\"noopener noreferrer nofollow\">RootLayout<\/a><\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0444\u0430\u0439\u043b layout.js \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0435\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432 ( \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u044b \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 ) \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>RootLayout \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u043e\u0434\u0438\u043d, \u0441\u043c\u043e\u0442\u0440\u0438 \u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#example-creating-multiple-root-layouts\" rel=\"noopener noreferrer nofollow\">Example: Creating multiple root layouts<\/a>. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 RootLayout \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e [\u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e]. <a href=\"https:\/\/multiple-root-layouts-pv0yi955m-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0421\u043c\u043e\u0442\u0440\u0438 \u0434\u0435\u043c\u043a\u0443<\/a> \u0438 \u044f \u043d\u0435 \u043f\u043e\u043d\u044f\u043b \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u043e\u043b\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0442\u0430\u043a \u043a\u0430\u043a \u0432 <a href=\"https:\/\/multiple-root-layouts-o7f75stl3-denisso.vercel.app\/about\" rel=\"noopener noreferrer nofollow\">13.1.6<\/a> \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043f\u043e\u0447\u0442\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043d\u043e \u0432 [13.1.7] \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430. \u042d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c <a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/app-dir-i18n-routing\" rel=\"noopener noreferrer nofollow\">\u043c\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442<\/a>.<\/p>\n<\/li>\n<li>\n<p>layout \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/guides\/seo\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445<\/a> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u0433\u043e\u0432 script \u0438 link, \u0442\u0430\u043a head.js \u0432 13.2 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0430\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0430\u043a\u0442, \u043d\u0435 \u0437\u043d\u0430\u044e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442 \u043b\u0438 \u043e\u043d \u0432 \u0434\u043e\u043a\u0435, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0430\u043f\u043a\u0435 app \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 RootLayout, \u0442\u043e<\/p>\n<p>\u0432 \u043b\u043e\u0433\u0435 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:<\/p>\n<pre><code>Your page app\/page.tsx did not have a root layout. We created app\\layout.tsx for you. <\/code><\/pre>\n<p>layut.js \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code>export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html>       &lt;head \/>       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) } <\/code><\/pre>\n<p>\u0421 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b.<\/p>\n<p>Props:<\/p>\n<ul>\n<li>\n<p>children &#8212; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 page \u044d\u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u044d\u0442\u043e\u0439 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/fundamentals#component-hierarchy\" rel=\"noopener noreferrer nofollow\">\u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p>params &#8212; \u0438\u043c\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<\/ul>\n<h4>route.js<\/h4>\n<p>\u0412 \u0432\u0435\u0440\u0441\u0438\u0438 13.1.7-canary.23 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/route-handlers\" rel=\"noopener noreferrer nofollow\">Route Handlers<\/a>, \u0437\u0430\u043c\u0435\u043d\u0430 <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/api-routes\" rel=\"noopener noreferrer nofollow\">API Routes<\/a> \u0432 \u043f\u0430\u043f\u043a\u0435 pages. \u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 13.2 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 canary. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430&#187;<\/p>\n<h4>\u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432: layout, page, route<\/h4>\n<p>Layout, page, route \u043c\u043e\u0433\u0443\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/segment-config\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0435<\/a>:<\/p>\n<ul>\n<li>\n<p>dynamic &#8212; \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\/ \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: &#8216;auto'(default) | &#8216;force-dynamic&#8217; | &#8216;error&#8217; | &#8216;force-static&#8217;. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 . \u0421\u043c\u043e\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 static vs dynamic fallback<\/p>\n<\/li>\n<li>\n<p>dynamicParams &#8212; \u044d\u0442\u0430 \u043e\u043f\u0446\u0438\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 fallback \u0438\u0437 <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching\/get-static-paths\" rel=\"noopener noreferrer nofollow\">getStaticPaths<\/a> Next.js 12,<\/p>\n<\/li>\n<li>\n<p>revalidate &#8212; false \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e &#8212; \u044d\u0442\u0430 \u043e\u043f\u0446\u0438\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 revalidate \u0438\u0437 getStaticProps  Next.js 12,<\/p>\n<\/li>\n<li>\n<p>fetchCache &#8212; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u044d\u0448\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/fundamentals#the-fetch-api\" rel=\"noopener noreferrer nofollow\">fetch<\/a>,<\/p>\n<\/li>\n<li>\n<p>runtime &#8212; \u0432\u044b\u0431\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/edge-and-nodejs-runtimes\" rel=\"noopener noreferrer nofollow\">edge \u0438 nodejs runtimes<\/a>,<\/p>\n<\/li>\n<li>\n<p>preferredRegion &#8212; \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0430\u043c, \u0447\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. <a href=\"https:\/\/vercel.com\/docs\/concepts\/functions\/serverless-functions\/regions\" rel=\"noopener noreferrer nofollow\">Setting Serverless Function Regions<\/a> <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/fundamentals#fetching-data-on-the-server\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e layout \u0438 page \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u0442\u0443. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;SEO \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438  \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435&#187;<\/p>\n<h4>template.js<\/h4>\n<p>Templates \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 layouts \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0439 \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c, \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 template, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route Groups<\/a>.<\/p>\n<p><a href=\"https:\/\/next13-app-exp-templates-git-templates-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">online demo<\/a>.<\/p>\n<p>\u0424\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<pre><code>app \u2502   layout.tsx \u2502   page.tsx \u2502   template.tsx \u2502 \u251c\u2500\u2500\u2500(marketing) \u2502   \u251c\u2500\u2500\u2500about \u2502   \u2502       page.tsx \u2502   \u2502 \u2502   \u2514\u2500\u2500\u2500blog \u2502           page.tsx \u2502 \u2514\u2500\u2500\u2500(shop)     \u2514\u2500\u2500\u2500account             page.tsx <\/code><\/pre>\n<p>\u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0444\u0430\u0439\u043b template.tsx \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 template \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c.<\/p>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0444\u043e\u0440\u043c\u044b &#171;\u0433\u043e\u0442\u043e\u0432\u0430 \u043a \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435&#187;, \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c &#171;\u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c&#187; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 &#171;\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e&#187;, \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0441\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0444\u043e\u0440\u043c\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>\u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b About \u0438 Blog, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432  <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route Groups<\/a> \u044d\u0442\u043e \u043f\u0430\u043f\u043a\u0430 marketing \u0441 \u043a\u0440\u0443\u0433\u043b\u044b\u043c\u0438 \u0441\u043a\u043e\u0431\u043a\u0430\u043c\u0438.<\/p>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route Groups<\/a> \u043d\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0443\u0442\u0438, \u0442.\u0435. \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043f\u0443\u0442\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, marketing \u0432 \u043f\u0443\u0442\u044c URL Route Groups \u0438 \u0441\u043b\u0443\u0436\u0430\u0442 \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 &#171;Route Groups&#187; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 template \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f. \u0422.\u0435. \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 About \u043d\u0430\u0436\u043c\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 Blog \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0444\u043e\u0440\u043c\u044b \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438.<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 <a href=\"https:\/\/github.com\/vercel\/next.js\/discussions\/45546\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0440\u043e\u0441 \u0431\u0430\u0433 \u0438\u043b\u0438 \u0444\u0438\u0447\u0430<\/a>.<\/p>\n<p>Template \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0434\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 stateless \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044f css\/js \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0437\u044b\u0432\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. <a href=\"https:\/\/next13-app-exp-templates.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0434\u0435\u043c\u043e<\/a><\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0435\u0440\u0442\u043a\u0430 Suspense \u0432\u043d\u0443\u0442\u0440\u0438 layout \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c fallback \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0432\u043d\u0443\u0442\u0440\u0438 template fallback \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<\/li>\n<\/ul>\n<p>Props:<br \/> \u2022 children &#8212; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 page \u044d\u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u044d\u0442\u043e\u0439 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/fundamentals#component-hierarchy\" rel=\"noopener noreferrer nofollow\">\u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438<\/a><\/p>\n<h4>loading.js<\/h4>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \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 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432 &#171;\u043e\u0434\u043d\u0443&#187; \u043e\u0431\u0435\u0440\u0442\u043a\u0443 <a href=\"https:\/\/beta.reactjs.org\/reference\/react\/Suspense#suspense\" rel=\"noopener noreferrer nofollow\">React Suspense<\/a>. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0438 &#171;\u043a\u0430\u0436\u0434\u043e\u0433\u043e&#187; Suspense \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435, \u0432\u0441\u0435 \u043e\u043d\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c \u0432 loading.js. <a href=\"https:\/\/next13-app-exp-templates-git-loading-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043e \u0434\u043b\u044f loading.js<\/a>.<\/p>\n<pre><code>export default function Loading() {   return &lt;LoadingSkeleton \/> } <\/code><\/pre>\n<p>NoProps<\/p>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/error-handling\" rel=\"noopener noreferrer nofollow\">error.js \u0438 global-error.js<\/a><\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432 \u00a0<a href=\"https:\/\/reactjs.org\/docs\/error-boundaries.html\" rel=\"noopener noreferrer nofollow\">React Error Boundary<\/a>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c. <a href=\"https:\/\/next13-app-exp-templates-git-error-boundaries-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">online demo<\/a> \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/p>\n<p>Props:<br \/> \u2022 error &#8212; \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u00a0Error\u00a0<br \/> \u2022 reset &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u044f Error Boundary.<\/p>\n<h4>head.js<\/h4>\n<p>\u0412 13.2 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/metadata\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0442\u0430\u0434\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 laout \u0438 page <\/a><br \/> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u0433\u0430 .\u00a0\u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 app, \u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 RootLayout \u043c\u043e\u0436\u0435\u0442  \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 RootLayout. \u0432 head.js \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433\u0438 style \u0438 script,  \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0438 \u0441\u0443\u0434\u044f \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 layout.js.<br \/> \u041f\u043b\u044e\u0441\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0432 layout \u0438 pages:<br \/> \u2022 \u041c\u0435\u0442\u0430\u0434\u0430\u0442\u0430 \u0441\u043c\u043e\u0436\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0432 layout \u0438 page.<br \/> \u2022 VSCode \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b head.js:<\/p>\n<pre><code>export default function Head() {   return (     &lt;>       &lt;title>Create Next App&lt;\/title>       &lt;meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" \/>       &lt;meta name=\"description\" content=\"Generated by create next app\" \/>       &lt;link rel=\"icon\" href=\"\/favicon.ico\" \/>     &lt;\/>   ) } <\/code><\/pre>\n<p>\u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442  \u043d\u043e\u0432\u0430\u044f metadata \u0432 layout.js<\/p>\n<pre><code>export\u00a0const\u00a0metadata\u00a0=\u00a0{ \u00a0\u00a0title:\u00a0\"Create\u00a0Next\u00a0App\", \u00a0\u00a0description:\u00a0\"Generated\u00a0by\u00a0create\u00a0next\u00a0app\", \u00a0\u00a0icons:\u00a0{ \u00a0\u00a0\u00a0\u00a0icon:\u00a0\"\/favicon.ico\", \u00a0\u00a0}, }; <\/code><\/pre>\n<h4>not-found.js<\/h4>\n<p>\u0424\u0430\u0439\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/notfound\" rel=\"noopener noreferrer nofollow\">notFound<\/a>, \u043f\u043e\u043a\u0430 not-found.js \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0435\u0441\u043b\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 404 \u043d\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 &#171;not-found.js&#187;, \u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432 <a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/45939\" rel=\"noopener noreferrer nofollow\">\u0431\u0430\u0433 \u0440\u0435\u043f\u043e\u0440\u0442\u0435<\/a> \u043c\u043d\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 &#171;We are working on that&#187;.<\/p>\n<p><a href=\"https:\/\/next13-app-exp-templates-git-router-dynamic-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online demo<\/a><\/p>\n<p>NoProps<\/p>\n<h3>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c, \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0432 \u0438\u043c\u044f \u043f\u0430\u043f\u043a\u0438, \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: [id] \u0438\u043b\u0438 [slug].<\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u043c\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 page.js,  layout.js, route.js.<\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n<pre><code>import { Blog as BlogComponent } from \"@\/components\/blog\";  export type TProps = {   params: { slug: string };   searchParams?: { [key: string]: string | string[] | undefined }; }; interface IPage {   (props: TProps): JSX.Element; }  export default function Blog(props: Tprops) {   console.log(props.params);   return &lt;BlogComponent {...props} \/>; } <\/code><\/pre>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>Route<\/p>\n<\/th>\n<th>\n<p>Example URL<\/p>\n<\/th>\n<th>\n<p>params<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/blog\/[slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/blog\/a<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: &#8216;a&#8217; }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/blog\/[slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/blog\/a<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: &#8216;a&#8217; }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/blog\/[slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/blog\/b<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: &#8216;b&#8217; }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/blog\/[slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/blog\/c<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: &#8216;c&#8217; }<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 dynamicParams \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 layout.js \/ page.js \/ route.js<\/p>\n<pre><code>export const dynamicParams = true | false; <\/code><\/pre>\n<p>\u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b, \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u0445 \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/segment-config#generatestaticparams\" rel=\"noopener noreferrer nofollow\">generateStaticParams<\/a>. \u0412 page.js &#8212; \u044d\u0442\u0430 \u043e\u043f\u0446\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433 \u043e\u043f\u0446\u0438\u0438 fallback \u0438\u0437 <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching\/get-static-paths\" rel=\"noopener noreferrer nofollow\">getStaticPaths<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 pages. <a href=\"https:\/\/next13-app-exp-templates-git-router-dynamic-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">online demo<\/a><\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f generateStaticParams \u0432 \u0434\u0435\u043c\u043a\u0435<\/p>\n<p>[slug]\\page.tsx<\/p>\n<pre><code>import { Page as PageComponent} from \"@\/components\/page\";  export async function generateStaticParams() {   return [{slug: \"1\"}, {slug: \"2\"}]; }  export type TProps = {   params: { slug: string };   searchParams?: { [key: string]: string | string[] | undefined }; }; interface IPage {   (props: TProps): JSX.Element; }  export default function Page(props: Tprops) {   return &lt;PageComponent {...props} \/>; } export const dynamicParams = false; <\/code><\/pre>\n<p><strong>catch-all<\/strong><\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0438\u043c\u0435\u043d \u0432\u0441\u0435\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 [&#8230;slug] \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043c\u043d\u043e\u0433\u043e\u0442\u043e\u0447\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043a\u043e\u0431\u043e\u043a<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>Route<\/p>\n<\/th>\n<th>\n<p>Example URL<\/p>\n<\/th>\n<th>\n<p>params<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[&#8230;slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop\/a<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: [&#8216;a&#8217;] }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[&#8230;slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop\/a\/b<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: [&#8216;a&#8217;, &#8216;b&#8217;] }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[&#8230;slug]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop\/a\/b\/c<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: [&#8216;a&#8217;, &#8216;b&#8217;, &#8216;c&#8217;] }<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>optional catch-all<\/strong><\/p>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 catch-all \u0438 optional catch-all \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 optional \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 (\/shop \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435).<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>Route<\/p>\n<\/th>\n<th>\n<p>Example URL<\/p>\n<\/th>\n<th>\n<p>params<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[[&#8230;slug]]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop<\/p>\n<\/td>\n<td>\n<p align=\"left\">{}<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[[&#8230;slug]]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop\/a<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: [&#8216;a&#8217;] }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[[&#8230;slug]]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop\/a\/b<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: [&#8216;a&#8217;, &#8216;b&#8217;] }<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">app\/shop\/[[&#8230;slug]]\/page.js<\/p>\n<\/td>\n<td>\n<p align=\"left\">\/shop\/a\/b\/c<\/p>\n<\/td>\n<td>\n<p align=\"left\">{ slug: [&#8216;a&#8217;, &#8216;b&#8217;, &#8216;c&#8217;] }<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c generateStaticParams \u0434\u043b\u044f catch-all \u0438 optional catch-all \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 slug \u043a\u0430\u043a \u043c\u0430\u0441\u0441\u0438\u0432:<\/p>\n<pre><code>export async function generateStaticParams() {   return [{slug: [\"1\"]}, {slug: [\"2\"]}]; } <\/code><\/pre>\n<h3>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430<\/h3>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 app \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 http \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/route-handlers\" rel=\"noopener noreferrer nofollow\">Route Handlers<\/a>, \u043f\u0440\u0438\u0448\u0435\u043b \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/api-routes\" rel=\"noopener noreferrer nofollow\">API Routes<\/a> \u0432 \u043f\u0430\u043f\u043a\u0435 pages. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/file-conventions\/route\" rel=\"noopener noreferrer nofollow\">route.js<\/a><\/p>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b: GET,\u00a0POST,\u00a0PUT,\u00a0PATCH,\u00a0DELETE,\u00a0HEAD, and\u00a0OPTIONS<\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c API \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c  <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Request\" rel=\"noopener noreferrer nofollow\">Request<\/a>  \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Response\" rel=\"noopener noreferrer nofollow\">Response<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u0432 \u0442\u0438\u043f\u044b next.js \u0441\u0435\u0440\u0432\u0435\u0440\u0430 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/request\" rel=\"noopener noreferrer nofollow\">NextRequest<\/a> \u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/response\" rel=\"noopener noreferrer nofollow\">NextResponse<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 cookie \u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 nextUrl \u0434\u043b\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\" rel=\"noopener noreferrer nofollow\">URL<\/a>.<\/p>\n<pre><code>export async function GET(request: Request) {   const res = await fetch(url);   const data = await res.json();   return Response.json({ data }) } <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 &#171;\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432&#187; \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/segment-config\" rel=\"noopener noreferrer nofollow\">Route Segment Config Options<\/a>, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0443\u044e \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0441 \u0444\u0430\u0439\u043b\u043e\u043c route.js \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>api[\u2026slug]\\route.js<\/p>\n<pre><code>import { NextResponse, type NextRequest } from \"next\/server\";  export async function generateStaticParams() {   return [{slug: \"1\"}, {slug: \"2\"}]; }  export async function GET(   request: NextRequest,   { params }: { params: { slug: [string] } } ) {   return NextResponse.json({ slug: params }); \/\/ slug: \"1\" or slug: \"2\" }  export const dynamicParams = false; <\/code><\/pre>\n<p>\u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e: \/api\/1 \u0438 \/api\/2 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 404.<\/p>\n<p>\u0412 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 Next.js API.<\/p>\n<p>\u041c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0434\u043b\u044f \u043d\u0438\u0445 \u0442\u0430\u043a \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/segment-config\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u00a0Route Segment<\/a>.<\/p>\n<p><a href=\"https:\/\/next13-app-exp-templates-git-server-fetch-standalone-denisso.vercel.app\" rel=\"noopener noreferrer nofollow\">online demo<\/a> &#8212; \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0434\u0435\u043c\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043e \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435&#187;. \u0412 \u044d\u0442\u043e\u043c \u0434\u0435\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a Get \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<pre><code>import { NextResponse, type NextRequest } from \"next\/server\";  export async function GET(   request: NextRequest,   { params }: { params: { id: string } } ) {   let payload = Date.now();   if (params.id === \"gettimezoneoffset\")     payload = new Date().getTimezoneOffset();   return NextResponse.json({ id: params.id, payload }); }  export const dynamic = \"force-dynamic\"; <\/code><\/pre>\n<h3>\u041f\u043b\u0430\u043d\u044b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435<\/h3>\n<p>\u0412 <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/fundamentals#advanced-routing-patterns\" rel=\"noopener noreferrer nofollow\">\u0431\u0443\u0434\u0443\u0449\u0435\u043c<\/a>, \u0432 Next.js \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438. \u041a \u043d\u0438\u043c \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b: \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0434\u0432\u0435 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432: \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 page.js \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b: \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u0430\u043c \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u043e\u0448\u0435\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Suspense<\/h2>\n<p>\u041f\u0440\u0438 <a href=\"https:\/\/www.pubnub.com\/learn\/glossary\/what-is-http-streaming\/\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435<\/a> HTTP \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u0443\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043c\u043e\u0433 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435. \u041a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u0445 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 HTTP-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/streaming-and-suspense\" rel=\"noopener noreferrer nofollow\">\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 Suspense<\/a>, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043f\u043e HTTP.<\/p>\n<p>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e React, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 (chunk). \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0430\u043d\u044c\u0448\u0435, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \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.<\/p>\n<p>\u0412 Next.js \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f loading.js, \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430,  \u0438\u043b\u0438 \u0441 <a href=\"https:\/\/beta.reactjs.org\/reference\/react\/Suspense\" rel=\"noopener noreferrer nofollow\">Suspense<\/a>, \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f.<\/p>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/suspense\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a>, <a href=\"https:\/\/next13-app-exp-templates-git-suspense-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">demo online<\/a><\/p>\n<pre><code>import { Suspense } from \"react\"; import { Spinner } from \"@\/components\/Spinner\"; import { ServerComponent } from \"@\/components\/ServerComponent\"; import { ClientComponent } from \"@\/components\/ClientComponent\";  export default async function Page({ params }: { params: { id: string } }) {   return (     &lt;ClientComponent id={params.id}>       &lt;Suspense fallback={&lt;Spinner \/>}>         {\/* @ts-expect-error Server Component *\/}         &lt;ServerComponent delay={1} \/>       &lt;\/Suspense>       &lt;Suspense fallback={&lt;Spinner \/>}>         {\/* @ts-expect-error Server Component *\/}         &lt;ServerComponent delay={2} \/>       &lt;\/Suspense>       &lt;Suspense fallback={&lt;Spinner \/>}>         {\/* @ts-expect-error Server Component *\/}         &lt;ServerComponent delay={3} \/>       &lt;\/Suspense>     &lt;\/ClientComponent>   ); } export const dynamic = \"force-dynamic\"; <\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Suspense \u0431\u043b\u043e\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<h2>SEO \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438  \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/h2>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/guides\/seo\" rel=\"noopener noreferrer nofollow\">Next.js SEO &amp; Metadata<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 meta \u0438 <a href=\"https:\/\/json-ld.org\/\" rel=\"noopener noreferrer nofollow\">JSON-LD<\/a> \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u0438\u043a\u0440\u043e\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 WEB. \u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438\u0437 layout.js \u0438 page.js. \u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<h3>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0442\u0435\u0433\u0430\u0445 meta<\/h3>\n<p>\u0414\u043e 13.2 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u043b\u0438\u0441\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/file-conventions\/head\" rel=\"noopener noreferrer nofollow\">head.js<\/a> \u044d\u0442\u043e \u0431\u044b\u043b \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 html \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<pre><code>export default function Head() {   return (     &lt;>       &lt;title>Create Next App&lt;\/title>       &lt;meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" \/>       &lt;meta name=\"description\" content=\"Generated by create next app\" \/>       &lt;link rel=\"icon\" href=\"\/favicon.ico\" \/>     &lt;\/>   ) } <\/code><\/pre>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 13.2 \u043d\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c metadata \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e generateMetadata. \u0424\u043e\u0440\u043c\u0430\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0438\u0441\u0430\u043d \u0432 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/metadata\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a><\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 (<a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/metadata-for-each-page\" rel=\"noopener noreferrer nofollow\">Code repository<\/a> , <a href=\"https:\/\/codesandbox.io\/p\/github\/denisso\/next13-app-exp\/metadata-for-each-page?workspaceId=18dbcb21-f19f-4aca-a6ae-6859de0638c0&amp;selection=%5B%7B%22endColumn%22%3A18%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A18%2C%22startLineNumber%22%3A4%7D%5D&amp;file=%2FREADME.md\" rel=\"noopener noreferrer nofollow\">sandbox<\/a>, <a href=\"https:\/\/lk2sob-3000.preview.csb.app\/\" rel=\"noopener noreferrer nofollow\">deploy<\/a>) \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430:<\/p>\n<p>app\\services\\page.tsx<\/p>\n<pre><code>import { metaTags } from \"@\/data\";  export const metadata = {   title: metaTags.services.title,   description: metaTags.services.description,   keywords: metaTags.services.keywords,   icons: {     icon: \"\/favicon.ico\",   }, };  export default async function Page (){   return &lt;>Service page&lt;\/> }  <\/code><\/pre>\n<p>app\\solutions\\page.tsx<\/p>\n<pre><code>import { metaTags } from \"@\/data\";  export const metadata = {   title: metaTags.solutions.title,   description: metaTags.solutions.description,   keywords: metaTags.solutions.keywords,   icons: {     icon: \"\/favicon.ico\",   }, };  export default async function Page (){   return &lt;>Solutions page&lt;\/> }  <\/code><\/pre>\n<h3>JSON-LD<\/h3>\n<p><a href=\"https:\/\/json-ld.org\/\" rel=\"noopener noreferrer nofollow\">JSON-LD<\/a> \u2014 \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u0438\u043a\u0440\u043e\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u044f <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Linked_data\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/a>. JSON-LD \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 <a href=\"https:\/\/yandex.ru\/support\/webmaster\/json-ld\/about.html\" rel=\"noopener noreferrer nofollow\">Yandex<\/a> \u0438 <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/intro-structured-data\" rel=\"noopener noreferrer nofollow\">Google<\/a><\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<pre><code>export default async function Page({ params }) {     const product = await getProduct(params.id);      const jsonLd = {         \"@context\": \"http:\/\/schema.org\",         \"@type\": \"FlightReservation\",         reservationId: \"RXJ34P\",     };      return (         &lt;section>             {\/* Add JSON-LD to your page *\/}             &lt;script type=\"application\/ld+json\">{JSON.stringify(jsonLd)}&lt;\/script>             {\/* ... *\/}         &lt;\/section>     ); } <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0442\u0440\u0438 \u043a\u043b\u044e\u0447\u0430:<\/p>\n<ul>\n<li>\n<p><a href=\"\/users\/context\" rel=\"noopener noreferrer nofollow\">@context<\/a>\u00a0(\u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439) \u2014 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0432\u0430\u0440\u044c\u00a0<a href=\"https:\/\/yandex.ru\/support\/webmaster\/schema-org\/what-is-schema-org.html\" rel=\"noopener noreferrer nofollow\">Schema.org<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"\/users\/type\" rel=\"noopener noreferrer nofollow\">@type<\/a>\u00a0(\u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439) \u2014 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u00a0<a href=\"https:\/\/schema.org\/FlightReservation\" rel=\"noopener noreferrer nofollow\">\u0442\u0438\u043f FlightReservation<\/a>, \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u0438\u043b\u0435\u0442\u0430 \u043d\u0430 \u0430\u0432\u0438\u0430\u0440\u0435\u0439\u0441.<\/p>\n<\/li>\n<li>\n<p>reservationId\u00a0\u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u00a0<a href=\"https:\/\/schema.org\/reservationId\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 reservationId \u0442\u0438\u043f\u0430 FlightReservation<\/a>\u00a0\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u043e\u043c\u0435\u0440 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u043b\u0435\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/h2>\n<h3>\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 JSX \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u0421 \u0432\u0438\u0434\u0443 \u0431\u0435\u0437\u0432\u0440\u0435\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n<pre><code>          &lt;div>             {moment(value).format(\"MMMM Do YYYY, h:mm:ss a\")}           &lt;\/div> <\/code><\/pre>\n<p>\u0434\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435<\/p>\n<pre><code> Text content did not match. Server: \"February 27th 2023, 10:44:57 pm\" Client: \"February 27th 2023, 10:44:59 pm\" <\/code><\/pre>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 ]\u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u0430\u0434\u043e\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e &#171;use client&#187;](<a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#convention\" rel=\"noopener noreferrer nofollow\">https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#convention<\/a>)<\/p>\n<pre><code>\"use client\"  const ClientMoment = ({ val }: { val?: string }) => {   const [valDate, setValDate] = React.useState&lt;string>();   React.useEffect(() => {     setValDate(moment(val).format(\"MMMM Do YYYY, h:mm:ss a\"));   }, [val]);   return &lt;div>{valDate}&lt;\/div>; }; <\/code><\/pre>\n<p>\u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 useEffect, \u0435\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e<\/p>\n<pre><code>const [valDate, setValDate] = React.useState(moment(val).format(\"MMMM Do YYYY, h:mm:ss a\")); <\/code><\/pre>\n<p>\u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/h3>\n<p><a href=\"https:\/\/beta.reactjs.org\/reference\/react\/useContext\" rel=\"noopener noreferrer nofollow\">React Context<\/a> &#8212; \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b \u043d\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0443\u0440\u043e\u0432\u043d\u044f\u0445. <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#context\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043a\u0430<\/a>  \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432 app.<\/p>\n<p><a href=\"https:\/\/next13-app-exp-templates-git-context-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043a\u0430<\/a> \u0438 <a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/context\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434<\/a><\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 layout.js \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 about, blog \u0438 shop.<\/p>\n<\/li>\n<\/ul>\n<pre><code>\u2502   ClientContext.tsx \u2502   globals.css \u2502   layout.module.scss \u2502   layout.tsx \u2502   page.tsx \u2502 \u251c\u2500\u2500\u2500(marketing) \u2502   \u251c\u2500\u2500\u2500about \u2502   \u2502       page.tsx \u2502   \u2502 \u2502   \u2514\u2500\u2500\u2500blog \u2502           page.tsx \u2502 \u2514\u2500\u2500\u2500(shop)     \u2514\u2500\u2500\u2500account             page.tsx <\/code><\/pre>\n<p>\u0444\u0430\u0439\u043b app\\ClientContext.tsx &#8212; \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0435 layout.js.<\/p>\n<pre><code>\"use client\"; import React from \"react\"; interface IContexte { \u00a0 id: string; \u00a0 setId: (id: string) => void; }  export const Context = React.createContext&lt;IContexte | null>(null);  export function ClientContext({ children }: { children: React.ReactNode }) { \u00a0 const [id, setId] = React.useState(\"\"); \u00a0 return &lt;Context.Provider value={{ id, setId }}>{children}&lt;\/Context.Provider>; } <\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 layout.js<\/p>\n<pre><code>export default function RootLayout({   children, }: {   children: React.ReactNode; }) {   return ( \u2026         &lt;main className={styles.main}>           &lt;ClientContext>{children}&lt;\/ClientContext>         &lt;\/main> \u2026   ); }  <\/code><\/pre>\n<p>\u0432 page.js \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u0434\u0430\u043b\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 useContext \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e.<\/p>\n<p>app\\page.js<\/p>\n<pre><code>import { Page } from \"@\/components\/Page\";  export default function Home() {   return &lt;Page headerText=\"Home\"\/>; } <\/code><\/pre>\n<p>components\\Page.tsx<\/p>\n<pre><code>\"use client\"; import styles from \".\/Page.module.scss\"; import React from \"react\"; import { Context } from \"@\/app\/ClientContext\";  export const Page = ({ headerText }: { headerText: string; }) => {   const context = React.useContext(Context);   const [input, setInput] = React.useState(context?.id as string);   const handlerSetId = () => {     context?.setId(input);   };   return (     &lt;section className={styles.section}>       &lt;h2 className={styles.header}>{headerText}&lt;\/h2>       &lt;div>Current id: {context?.id} &lt;\/div>       &lt;div className={styles.inputGroup}>         &lt;input           type=\"text\"           onChange={(e) => setInput(e.target.value)}           value={input}           className={styles.input}         \/>         &lt;button onClick={handlerSetId} className={styles.button}>           setId         &lt;\/button>       &lt;\/div>     &lt;\/section>   ); }; <\/code><\/pre>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0435\u043d\u043e.<\/p>\n<h3>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/h3>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0441\u043e\u0441\u0430\u043d\u0438\u0435\u043c \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#sharing-data-between-server-components\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u043a\u044d\u0448 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a fetch, \u0442.\u0435. \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0438\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u043b \u043b\u0438 \u043a\u044d\u0448. \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u044b\u043c. \u0422\u0443\u0442 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0432\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435&#187; <a href=\"https:\/\/next13-app-exp-templates-git-server-fetch-standalone-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">server-fetch-standalone<\/a>, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c radiobutton \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 fetch, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 revalidate \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b JavaScript, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b, \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c. \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0432 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/server-fetch-custom-cache\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a> \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0443\u043b\u0438 es6 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u044d\u0448.<\/p>\n<p>\u042d\u0442\u043e \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 fetch<\/p>\n<pre><code>import \"server-only\";  interface IfetchData {   (id: string): Promise&lt;string>; }  type TCache = {   [key: string]: string; };  const cache: TCache = {};  export const fetchData: IfetchData = (id) =>   new Promise(async (resolve) => {     let data = \"\";     try {       if (cache[id]) {         data = cache[id];       } else {         const response = await fetch(\"http:\/\/localhost:3001\/users\/\" + id, {           cache: \"no-store\",         });         data = JSON.stringify(await response.json());         cache[id] = data;       }     } catch (e) {       if (typeof e === \"string\") {         data = `Error: ${e.toUpperCase()} `;       } else if (e instanceof Error) {         data = `Error: ${e.message}`;       }     }      resolve(data);   }); <\/code><\/pre>\n<p>\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u043a\u044d\u0448\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f cache. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 fetch \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u044d\u0448 ( cache: &#171;no-store&#187; ).<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f fetch \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/github.com\/typicode\/json-server\" rel=\"noopener noreferrer nofollow\">json-server<\/a> \u0438 <a href=\"https:\/\/www.mockaroo.com\/\" rel=\"noopener noreferrer nofollow\">\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 json mockaroo<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/blob\/518ea53e5ef65e6e40ee61bb71a51948a3dd2692\/db.json\" rel=\"noopener noreferrer nofollow\">db.json<\/a> &#8212; \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f json-server<\/p>\n<p>\u0437\u0430\u043f\u0443\u0441\u043a json-server<\/p>\n<pre><code>json-server --watch .\/db.json -p 3001 <\/code><\/pre>\n<p>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u043b\u043e\u0433 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<pre><code>GET \/users\/1 200 45.345 ms - 157 GET \/users\/2 200 27.988 ms - 155 GET \/users\/3 200 20.497 ms - 155 <\/code><\/pre>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0431\u0435\u0442\u044b \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<br \/> \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0438\u0437 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 13.2 \u044d\u0442\u043e <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/route-handlers\" rel=\"noopener noreferrer nofollow\">Route Handlers<\/a>, \u0435\u0441\u0442\u044c Api \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0436\u0435 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/file-conventions\/head\" rel=\"noopener noreferrer nofollow\">\u0443\u0441\u0442\u0430\u0440\u0435\u043b\u043e<\/a>.<\/p>\n<p>\u0415\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/45939\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404<\/a> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/notfound#notfound\" rel=\"noopener noreferrer nofollow\">notFound<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/46732\" rel=\"noopener noreferrer nofollow\">Next.js fetch \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 revalidate<\/a> &#8212; \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432, \u0441\u0432\u043e\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0441 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0437 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0445 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 typescript.<\/p>\n<\/li>\n<li>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u0435\u0440\u0442\u043e\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e HTTP \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c React.Suspense.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043c\u0435\u043d\u044f, \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 JSON-LD.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0412\u0430\u043c \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e!<\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u043c\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435:<\/p>\n<p><a href=\"https:\/\/mrdramm.netlify.app\/posts\/probuyu-novye-vozmozhnosti-next-js-13-part-1\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0431\u0443\u044e \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Next.js 13. \u0427\u0430\u0441\u0442\u044c 1.<\/a><br \/><a href=\"https:\/\/mrdramm.netlify.app\/posts\/probuyu-novye-vozmozhnosti-next-js-13-part-2\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0431\u0443\u044e \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Next.js 13. \u0427\u0430\u0441\u0442\u044c 2.<\/a><\/p>\n<h2><\/h2>\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\/post\/720578\/\"> https:\/\/habr.com\/ru\/post\/720578\/<\/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>\u0412\u0441\u0435\u0445 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0438 \u0436\u0435\u043b\u0430\u044e \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n<p><a href=\"https:\/\/nextjs.org\/\" rel=\"noopener noreferrer nofollow\">Next.js<\/a> \u044d\u0442\u043e fullstack \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 <a href=\"https:\/\/vercel.com\/\" rel=\"noopener noreferrer nofollow\">Vercel<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 React.<\/p>\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e <a href=\"https:\/\/nextjs.org\/blog\/next-13\" rel=\"noopener noreferrer nofollow\">25 \u043e\u043a\u0442\u044f\u0431\u0440\u044f 2022 \u0433\u043e\u0434\u0430<\/a> \u0432\u044b\u0448\u043b\u0430 \u0432\u0435\u0440\u0441\u0438\u044f 13. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f 13.2.3,  \u0438 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0431\u0435\u0442\u0430 \u0442\u0435\u0441\u0442\u0430, \u0438 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d.<\/p>\n<p>13 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 12. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f app. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u0438 12.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u043e\u0431\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 13, \u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e Next.js \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e: <a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/588498\/\" rel=\"noopener noreferrer nofollow\">Next.js: \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e. \u0418\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0432\u0430\u044f<\/a>.<\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<\/h2>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432:<\/p>\n<p><strong>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u0442\u0430\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p><strong>\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 fetch c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.  \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u044d\u0448 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<blockquote>\n<p>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 &#8212; \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c URL \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u043b\u0435\u0448\u0430\u043c\u0438.<\/p>\n<\/blockquote>\n<p><strong>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043d\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u043c\u044b:<\/p>\n<ul>\n<li>\n<p>\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <strong>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u0435\u0440\u0442\u043a\u0438<\/strong> \u043d\u0430\u0434 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442: \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0441\u043b\u043e\u0438, \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0424\u0430\u0439\u043b\u044b \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route groups<\/a>  &#8212; \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u043d\u0438\u043c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043d\u0435 \u0432\u043b\u0438\u044f\u044f \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 URL, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 layout.<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b<\/strong> &#8212; \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u0438\u0437 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a \u0432 \u0438\u043c\u0435\u043d\u0430\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439, \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 pages. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/route-handlers\" rel=\"noopener noreferrer nofollow\">Route Handlers<\/a> &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e API \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 http \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 pages\/api. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435  &#171;\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430&#187;.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 Http \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Suspense<\/strong><\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 Http  \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Suspense \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432  &#171;HTTP Streaming \u0438 Suspense&#187;<\/p>\n<p><strong>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0438 SEO \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 js \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <a href=\"https:\/\/json-ld.org\/\" rel=\"noopener noreferrer nofollow\">JSON-LD<\/a> &#8212; \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u0438\u043a\u0440\u043e\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u044f <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Linked_data\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/a>.<\/p>\n<p><strong>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438 \u0432\u044b\u0432\u043e\u0434\u044b<\/strong><\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430\u2026<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430<\/h2>\n<p>\u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/denisso\/next13-app-exp\" rel=\"noopener noreferrer nofollow\">Github next13-app-exp<\/a> \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b \u043d\u0430 <a href=\"https:\/\/vercel.com\/\" rel=\"noopener noreferrer nofollow\">Vercel<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u043a\u0430\u0436\u0434\u0443\u044e \u0432\u0435\u0442\u043a\u0443.<\/p>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0432\u0435\u0442\u043e\u043a:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/router-dynamic\" rel=\"noopener noreferrer nofollow\">Code router-dynamic<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-router-dynamic-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u0442\u0435\u0441\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 dynamicParams \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u041f\u043e\u043a\u0430 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 <a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/45939\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0435\u0433\u043e not-found.js<\/a> \u0438 \u0432 \u044d\u0442\u043e\u043c <a href=\"https:\/\/github.com\/vercel\/next.js\/discussions\/45927\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/context\" rel=\"noopener noreferrer nofollow\">Code context<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-context-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/server-fetch-standalone\" rel=\"noopener noreferrer nofollow\">Code server-fetch-standalone<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-server-fetch-standalone-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online demo<\/a>&#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e fetch \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 revalidate: 60, \u0441 \u043a\u044d\u0448\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435&#187;. \u041f\u043e\u043a\u0430 \u043e\u043f\u0446\u0438\u044f revalidate: 60 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/46732\" rel=\"noopener noreferrer nofollow\">\u0431\u0430\u0433 \u0440\u0435\u043f\u043e\u0440\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/static-dynamic-segments\" rel=\"noopener noreferrer nofollow\">Code static-dynamic-segments<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-static-dynamic-segments-denisso.vercel.app\" rel=\"noopener noreferrer nofollow\">Online demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c URL \u043f\u0443\u0442\u0438, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c \u043f\u0443\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/suspense\" rel=\"noopener noreferrer nofollow\">Code suspense<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-suspense-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Suspense \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Suspense&#187;.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/server-fetch-custom-cache\" rel=\"noopener noreferrer nofollow\">server-fetch-custom-cache<\/a>, &#8212; \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0432\u043e\u0439 \u043a\u044d\u0448 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438&#187;.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f&#187;:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/loading\" rel=\"noopener noreferrer nofollow\">Code loading<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-loading-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212;  \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0430\u0439\u043b\u0430 loading.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 Suspense \u043a \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0443<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/error-boundaries\" rel=\"noopener noreferrer nofollow\">Code error-boundaries<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-error-boundaries-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212;  \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0430\u0439\u043b\u0430 error.js \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u043e\u0448\u0438\u0431\u043e\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/templates\" rel=\"noopener noreferrer nofollow\">Code templates<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-templates-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0430\u0439\u043b\u0430 template.tsx, \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043e\u0434\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#route-groups\" rel=\"noopener noreferrer nofollow\">Route Groups<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/multiple-root-layouts\" rel=\"noopener noreferrer nofollow\">Code multiple-root-layouts<\/a> \/ <a href=\"https:\/\/next13-app-exp-templates-git-multiple-root-layouts-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">Online Demo<\/a> &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/defining-routes#example-creating-multiple-root-layouts\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 Root Layout<\/a>, \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 layout.js, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0434\u0432\u0435 \u043f\u0430\u043f\u043a\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c layout.js <a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/pages-and-layouts#root-layout-required\" rel=\"noopener noreferrer nofollow\">Root Layout<\/a>. \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 Root Layout \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 13.1.6  \u0431\u044b\u043b\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0438 \u044f \u043d\u0430\u0434\u0435\u044f\u043b\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. <a href=\"https:\/\/github.com\/orgs\/vercel\/discussions\/1414\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435<\/a> \u0442\u0430\u043a \u0431\u044b\u043b\u043e \u0432 <a href=\"https:\/\/multiple-root-layouts-e20pt24sg-denisso.vercel.app\/\" rel=\"noopener noreferrer nofollow\">13.1.6<\/a> \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 root layout 3 \u0440\u0430\u0437\u0430 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0430\u044f <a href=\"https:\/\/vercel.com\/templates\/next.js\/app-directory\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043a\u0430<\/a> \u043e\u0442 Vercel \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0412 github \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 Next.js 13 \u0432 \u043f\u0430\u043f\u043a\u0435 examples \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f app:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/app-dir-i18n-routing\" rel=\"noopener noreferrer nofollow\">app-dir-i18n-routing<\/a> &#8212; \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 RootLayout<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/app-dir-mdx\" rel=\"noopener noreferrer nofollow\">app-dir-mdx<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/reproduction-template-app-dir\" rel=\"noopener noreferrer nofollow\">reproduction-template-app-dir<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\/with-grafbase\" rel=\"noopener noreferrer nofollow\">with-grafbase<\/a> &#8212; \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 graphlq<\/p>\n<\/li>\n<\/ul>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439<\/h2>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439  \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c create-next-app \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 experimental-app<\/p>\n<pre><code>npx create-next-app@latest --experimental-app <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0432\u043e\u0448\u043b\u0438 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e canary \u0432\u043c\u0435\u0441\u0442\u043e latest.<\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0431\u044b\u043b\u0430 \u0431\u0435\u0437 experimental-app<\/p>\n<pre><code class=\"json\">next.config.js const nextConfig = {   experimental: {     appDir: true,   }, } <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 <a href=\"https:\/\/beta.nextjs.org\/docs\/app-directory-roadmap\" rel=\"noopener noreferrer nofollow\">\u043f\u0430\u043f\u043a\u0430 app<\/a> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u0430\u043f\u043a\u0430 pages \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 12 \u0432\u0435\u0440\u0441\u0438\u0438. pages \u0438 app \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0432 app \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 pages \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c. \u041e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043f\u043e\u043a app \u0438 pages \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 app.<\/p>\n<p>\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c <a href=\"https:\/\/beta.nextjs.org\/docs\/upgrade-guide\" rel=\"noopener noreferrer nofollow\">\u0433\u0430\u0439\u0434 \u043f\u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 pages \u0432 app.<\/p>\n<h2>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 Next.js 12 <a href=\"https:\/\/nextjs.org\/blog\/next-12#react-server-components\" rel=\"noopener noreferrer nofollow\">\u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 (\u0430\u043b\u044c\u0444\u0430)<\/a>, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e server \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430 &#171;component.server.js&#187;.  \u0412 13 \u0432\u0435\u0440\u0441\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412  \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 app \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438, \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 app \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043d\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 app \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u043e\u0434\u0443\u043b\u044f <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#client-components\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 &#171;use client&#187;<\/a>, \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043b\u0435\u0435 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.npmjs.com\/package\/server-only\" rel=\"noopener noreferrer nofollow\">server-only<\/a> \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 <a href=\"https:\/\/www.npmjs.com\/package\/client-only\" rel=\"noopener noreferrer nofollow\">client-only<\/a>.<\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u043e \u0431\u0435\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0445\u0443\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n<pre><code>React Class Components only works in Client Components <\/code><\/pre>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412 <a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#importing-server-components-into-client-components\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439<\/a>, \u043d\u0443\u0436\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 props children.<\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c <a href=\"https:\/\/beta.nextjs.org\/docs\/data-fetching\/fetching#asyncawait-in-server-components\" rel=\"noopener noreferrer nofollow\">\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438<\/a>.<\/p>\n<p>\u0412 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0441\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439  \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 Typescript \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0435<\/p>\n<pre><code>'ServerComponent' cannot be used as a JSX component.   Its return type 'Promise&lt;Element>' is not a valid JSX element.     Type 'Promise&lt;Element>' is missing the following properties from type 'ReactElement&lt;any, any>': type, props, key <\/code><\/pre>\n<p>\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/p>\n<pre><code>{\/* @ts-expect-error Server Component *\/} <\/code><\/pre>\n<p>\u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e.<\/p>\n<p><a href=\"https:\/\/github.com\/denisso\/next13-app-exp\/tree\/loading\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a><\/p>\n<p>app\/page.tsx<\/p>\n<pre><code>import { ServerComponent } from \"@\/components\/ServerComponent\"; import { ClientComponent } from \"@\/components\/ClientComponent\";  export default async function Page({ params }: { params: { page: string } }) {   return (     &lt;ClientComponent header={params.page}>       {\/* @ts-expect-error Server Component *\/}       &lt;ServerComponent page={params.page} \/>     &lt;\/ClientComponent>   ); } <\/code><\/pre>\n<p>components\/ClientComponent.tsx<\/p>\n<pre><code>'use client';  export default function ClientComponent({children}) {   return (     &lt;>       {children}     &lt;\/>   ); } <\/code><\/pre>\n<p>components\/ServerComponent.tsx<\/p>\n<pre><code>import { fetchData } from \"@\/lib\/fetchData\";  export const ServerComponent = async ({ page }: { page: string }) => {   const {data} = await fetchData(page)   return &lt;>{data}&lt;\/> } <\/code><\/pre>\n<p><a href=\"https:\/\/beta.nextjs.org\/docs\/rendering\/server-and-client-components#when-to-use-server-vs-client-components\" rel=\"noopener noreferrer nofollow\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/a> \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 Client Side React \u043a\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e render \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0433\u043e\u0442\u043e\u0432\u044b\u0439 HTML CSS \u0438 JS \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0431\u043e\u0440\u043a\u0430 \u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/beta.nextjs.org\/docs\/api-reference\/fetch\" rel=\"noopener noreferrer nofollow\">fetch<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 API.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441  \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c API Next.js \u0438 Node.js.<\/p>\n<\/li>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 Client Side React \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0438 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u043c\u0438 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 React.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441<\/p>\n<\/li>\n<\/ul>\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-346296","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/346296","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=346296"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/346296\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=346296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=346296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=346296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}