{"id":374555,"date":"2024-05-21T06:03:14","date_gmt":"2024-05-21T06:03:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=374555"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=374555","title":{"rendered":"<span>\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e Next.js. 3\/3<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\"\/>  <\/p>\n<p>  Hello world!<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0442\u0440\u0435\u0442\u044c\u044e \u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/804663\/\">\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/808259\/\">\u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/my-js.org\/docs\/guide\/nextjs\/\">\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, Next.js \u2014 \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u0435\u0442\u0435 JavaScript \u0438 <a href=\"https:\/\/react.dev\/\">React<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f Next.js \u0432\u0435\u0440\u0441\u0438\u0438 14.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u044f \u043e\u043f\u0438\u0440\u0430\u043b\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u043e \u0432 &#171;\u043e\u0442\u0441\u0435\u0431\u044f\u0442\u0438\u043d\u0435&#187; \u043c\u043e\u0433 \u0438 \u043f\u0440\u0438\u0432\u0440\u0430\u0442\u044c (\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0447\u0435\u043f\u044f\u0442\u0430\u0442\u044c\u0441\u044f) ? \u041f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443 ?<\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u043e\u0447\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Next.js<\/a><\/li>\n<li><a href=\"https:\/\/www.codewithantonio.com\/\">\u041a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/a><\/li>\n<\/ul>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"soderzhanie\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/a><br \/> \n<ul>\n<li><a href=\"#%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F\">\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"#%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE\">\u0412\u0438\u0434\u0435\u043e<\/a><\/li>\n<li><a href=\"#%D1%88%D1%80%D0%B8%D1%84%D1%82%D1%8B\">\u0428\u0440\u0438\u0444\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BC%D0%B5%D1%82%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5\">\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/a><\/li>\n<li><a href=\"#%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D1%8B\">\u0421\u043a\u0440\u0438\u043f\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7-%D1%81%D0%B1%D0%BE%D1%80%D0%BA%D0%B8\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438<\/a><\/li>\n<li><a href=\"#%D0%BB%D0%B5%D0%BD%D0%B8%D0%B2%D0%B0%D1%8F-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0\">\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/a><\/li>\n<li><a href=\"#%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0\">\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/a><\/li>\n<li><a href=\"#%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5-%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B\">\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><\/li>\n<li><a href=\"#%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D0%BD%D0%B8%D0%B5-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8\">\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/a><br \/> \n<ul>\n<li><a href=\"#typescript\">TypeScript<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BE%D0%BA%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F\">\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"#%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%8B%D0%B5-%D0%B8%D0%BC%D0%BF%D0%BE%D1%80%D1%82%D1%8B-%D0%B8-%D1%81%D0%B8%D0%BD%D0%BE%D0%BD%D0%B8%D0%BC%D1%8B-%D0%BF%D1%83%D1%82%D0%B5%D0%B9-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D0%B5%D0%B9\">\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0438 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><\/li>\n<li><a href=\"#markdown-%D0%B8-mdx\">Markdown \u0438 MDX<\/a><\/li>\n<li><a href=\"#%D0%B4%D0%B8%D1%80%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%B8%D1%8F-src\"><code>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f src<\/code><\/a><\/li>\n<li><a href=\"#content-security-policy\">Content Security Policy<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#%D0%B0%D1%83%D1%82%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%86%D0%B8%D1%8F\">\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D1%87%D0%B5%D0%BA%D0%BB%D0%B8%D1%81%D1%82\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0435\u043a\u043b\u0438\u0441\u0442<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"optimizacii\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h1>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 <a href=\"https:\/\/web.dev\/vitals\/\">Core Web Vitals<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 UI:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>Image<\/code> \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>img<\/code>. \u041e\u043d \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0443\u0442\u0435\u043c \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/li>\n<li><code>Link<\/code> \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>a<\/code>. \u041e\u043d \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0438 \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432<\/li>\n<li><code>Script<\/code> \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>script<\/code>. \u041e\u043d \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c \u0434\u0432\u0438\u0436\u043a\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443 SEO) \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0431\u043e\u043b\u0435\u0435 \u0432\u043e\u0432\u043b\u0435\u043a\u0430\u044e\u0449\u0438\u0439 \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 UX \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445.<\/p>\n<p>  <\/p>\n<p><code>Metadata API<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>head<\/code> \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u2014 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>metadata<\/code> \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>generateMetadata<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>layout.js<\/code> \u0438\u043b\u0438 <code>page.js<\/code><\/li>\n<li>\u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0430\u0439\u043b\u0430 \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0440\u043e\u0443\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>imageResponse<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f Open Graph \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSX \u0438 CSS.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0434\u0440.) \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>public<\/code>. \u0424\u0430\u0439\u043b\u044b, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u043d\u0435\u0439, \u043c\u043e\u0433\u0443\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u043c\u0438 CDN \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><em>\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433<\/em><\/p>\n<p>  <\/p>\n<p>Next.js \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"izobrazheniya\">\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/almanac.httparchive.org\/\">Web Almanac<\/a> \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c <a href=\"https:\/\/almanac.httparchive.org\/en\/2022\/page-weight#content-type-and-file-formats\">\u0432\u0435\u0441\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/a> \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 <a href=\"https:\/\/almanac.httparchive.org\/en\/2022\/performance#lcp-image-optimization\">LCP<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Image<\/code>, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 Next.js, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>img<\/code> \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043f\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u0432\u0440\u043e\u0434\u0435 WebP \u0438 AVIF<\/li>\n<li>\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 <a href=\"https:\/\/nextjs.org\/learn\/seo\/web-performance\/cls\">\u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430<\/a> \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435\u043c<\/li>\n<li>\u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443, \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Image from 'next\/image'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u043f\u0435 <code>src<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 <code>width<\/code> \u0438 <code>height<\/code> \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 (Cumulative Layout Shift, CLS) \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import Image from 'next\/image' import profilePic from '.\/me.png'  export default function Page() {   return (     &lt;Image       src={profilePic}       alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u0430\"       \/\/ width={500} \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438       \/\/ height={500} \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438       \/\/ blurDataURL=\"data:...\" \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438       \/\/ placeholder=\"blur\" \/\/ \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438     \/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0423\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043f\u0430 <code>src<\/code> \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0430 URL.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Next.js \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u043f\u0440\u043e\u043f\u044b <code>width<\/code>, <code>height<\/code> \u0438 <code>blurDataURL<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<p>  <\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>width<\/code> \u0438 <code>height<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. <code>width<\/code> \u0438 <code>height<\/code> \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0430\u043c\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import Image from 'next\/image'  export default function Page() {   return (     &lt;Image       src=\"https:\/\/s3.amazonaws.com\/my-bucket\/profile.png\"       alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u0430\"       width={500}       height={500}     \/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 URL \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>. \u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u0434\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438, \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e &#171;\u0431\u0430\u043a\u0435\u0442\u0430&#187; AWS S3:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   images: {     remotePatterns: [       {         protocol: 'https',         hostname: 's3.amazonaws.com',         port: '',         pathname: '\/my-bucket\/**',       },     ],   }, }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0414\u043e\u043c\u0435\u043d\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e API \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 Next.js. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c <code>loader<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 URL \u0434\u043b\u044f \u043f\u0440\u043e\u043f\u0430 <code>src<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c <code>\/me.png<\/code> \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430\u043c (loaders).<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0430\u044f URL \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u0430 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 <code>src<\/code> \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e URL \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u042d\u0442\u0438 URL \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/HTMLImageElement\/srcset\">srcset<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 API \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043b\u044e\u0431\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0441 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 Next.js. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 CDN \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a. \u042d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a JS-\u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043f\u0430 <code>loader<\/code>, \u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>loaderFile<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442<\/strong><\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <a href=\"https:\/\/web.dev\/lcp\/#what-elements-are-considered\">\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 Largest Contentful Paint (LCP)<\/a>, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f <code>priority<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 Next.js \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e LCP.<\/p>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 LCP \u2014 \u044d\u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0441\u0430\u043c\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0431\u043b\u043e\u043a \u0442\u0435\u043a\u0441\u0442\u0430, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 <code>next dev<\/code>, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c LCP \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>Image<\/code> \u0431\u0435\u0437 \u043f\u0440\u043e\u043f\u0430 <code>priority<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import Image from 'next\/image' import profilePic from '..\/public\/me.png'  export default function Page() {   return &lt;Image src={profilePic} alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u0430\" priority \/> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0434\u0432\u0438\u0433 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c Core Web Vitals \u2014 <a href=\"https:\/\/web.dev\/cls\/\">Cumulative Layout Shift (CLS)<\/a>. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Image<\/code> \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0441\u0434\u0432\u0438\u0433\u0443 \u043c\u0430\u043a\u0435\u0442\u0430. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0440\u0435\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430.<\/li>\n<li>\u042f\u0432\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u044b <code>width<\/code> \u0438 <code>height<\/code>.<\/li>\n<li>\u041d\u0435\u044f\u0432\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043f\u0430 <code>fill<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Image<\/code> \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>img<\/code>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>className<\/code> \u0438\u043b\u0438 <code>style<\/code>, \u0430 \u043d\u0435 <code>styled-jsx<\/code><br \/> \n<ul>\n<li>\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 \u043f\u0440\u043e\u043f <code>className<\/code>. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c CSS, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0442.\u043f.<\/li>\n<li>\u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f <code>style<\/code><\/li>\n<li><code>styled-jsx<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>global<\/code>)<\/li>\n<\/ul>\n<\/li>\n<li>\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>fill<\/code>, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c <code>position: relative<\/code><br \/> \n<ul>\n<li>\u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/li>\n<\/ul>\n<\/li>\n<li>\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>fill<\/code>, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c <code>display: block<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/v3\/-q\/mj\/v3-qmj_rutrvm02s32jex2xqt-8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/v3\/-q\/mj\/v3-qmj_rutrvm02s32jex2xqt-8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Image from 'next\/image' import mountains from '..\/public\/mountains.jpg'  export default function Responsive() {   return (     &lt;div style={{ display: 'flex', flexDirection: 'column' }}>       &lt;Image         alt=\"Mountains\"         \/\/ \u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f         \/\/ \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 `width` \u0438 `height`         src={mountains}         sizes=\"100vw\"         \/\/ \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443         style={{           width: '100%',           height: 'auto',         }}       \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/iv\/bs\/_s\/ivbs_sevbfno_tee62kiduqqgzy.png\" data-src=\"https:\/\/habrastorage.org\/webt\/iv\/bs\/_s\/ivbs_sevbfno_tee62kiduqqgzy.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Image from 'next\/image' import mountains from '..\/public\/mountains.jpg'  export default function Fill() {   return (     &lt;div       style={{         display: 'grid',         gridGap: '8px',         gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',       }}     >       &lt;div style={{ position: 'relative', height: '400px' }}>         &lt;Image           alt=\"Mountains\"           src={mountains}           fill           sizes=\"(min-width: 808px) 50vw, 100vw\"           style={{             objectFit: 'cover', \/\/ cover, contain, none           }}         \/>       &lt;\/div>       {\/* \u0414\u0440\u0443\u0433\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0435\u0442\u043a\u0435... *\/}     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0424\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/v5\/y2\/q9\/v5y2q9ca915djvgk-vvgipifciu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/v5\/y2\/q9\/v5y2q9ca915djvgk-vvgipifciu.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Image from 'next\/image' import mountains from '..\/public\/mountains.jpg'  export default function Background() {   return (     &lt;Image       alt=\"Mountains\"       src={mountains}       placeholder=\"blur\"       quality={100}       fill       sizes=\"100vw\"       style={{         objectFit: 'cover',       }}     \/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/components\/image\"><code>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Image<\/code><\/a>.<\/p>\n<p>  <\/p>\n<h2 id=\"video\">\u0412\u0438\u0434\u0435\u043e<\/h2>\n<p>  <\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>video<\/code> \u0438 <code>iframe<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e HTML-\u0442\u0435\u0433\u0430 <code>video<\/code> \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438 <code>iframe<\/code> \u0434\u043b\u044f \u0432\u0438\u0434\u0435\u043e \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c.<\/p>\n<p>  <\/p>\n<p><em><code>video<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>video<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434\u0435\u043e-\u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u043f\u043b\u0435\u0435\u0440\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export function Video() {   return (     &lt;video width=\"320\" height=\"240\" controls preload=\"none\">       \/\/ \u0438\u0437-\u0437\u0430 source \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0445\u0430\u0431\u0440\u043e\u0432\u0441\u043a\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0442\u044c       \/\/ &lt;source src=\"\/path\/to\/video.mp4\" type=\"video\/mp4\" \/>       &lt;track         src=\"\/path\/to\/captions.vtt\"         kind=\"subtitles\"         srcLang=\"en\"         label=\"English\"       \/>       \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0435\u0433 video.     &lt;\/video>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>video<\/code><\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0410\u0442\u0440\u0438\u0431\u0443\u0442<\/th>\n<th>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n<th>\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>src<\/code><\/td>\n<td>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0432\u0438\u0434\u0435\u043e-\u0444\u0430\u0439\u043b\u0430<\/td>\n<td><code>&lt;video src=\"\/path\/to\/video.mp4\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>width<\/code><\/td>\n<td>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u0438\u0434\u0435\u043e-\u043f\u043b\u0435\u0435\u0440\u0430<\/td>\n<td><code>&lt;video width=\"320\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>height<\/code><\/td>\n<td>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432\u0438\u0434\u0435\u043e-\u043f\u043b\u0435\u0435\u0440\u0430<\/td>\n<td><code>&lt;video height=\"240\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>controls<\/code><\/td>\n<td>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c<\/td>\n<td><code>&lt;video controls \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>autoPlay<\/code><\/td>\n<td>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/td>\n<td><code>&lt;video autoPlay \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>loop<\/code><\/td>\n<td>\u0417\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/td>\n<td><code>&lt;video loop \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>muted<\/code><\/td>\n<td>\u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0430\u0443\u0434\u0438\u043e<\/td>\n<td><code>&lt;video muted \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>preload<\/code><\/td>\n<td>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: <code>none<\/code>, <code>metadata<\/code>, <code>auto<\/code><\/td>\n<td><code>&lt;video preload=\"none\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>playsInline<\/code><\/td>\n<td>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 iOS, \u0447\u0430\u0441\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b <code>autoPlay<\/code> \u0432 Safari<\/td>\n<td><code>&lt;video playsInline \/><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u0438\u0434\u0435\u043e<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0421\u0443\u0431\u0442\u0438\u0442\u0440\u044b \u0438\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u2014 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0441\u0443\u0431\u0442\u0438\u0442\u0440\u044b \u0438\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0434\u043b\u044f \u043b\u044e\u0434\u0435\u0439 \u0441 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u043b\u0443\u0445\u0430. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u0433 <code>track<\/code><\/li>\n<li>\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u0414\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/cookpete\/react-player\">react-player<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/videojs.com\/\">video.js<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em><code>iframe<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u0433 <code>iframe<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a YouTube \u0438\u043b\u0438 Vimeo:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function Page() {   return (     &lt;iframe       src=\"https:\/\/www.youtube.com\/watch?v=gfU1iZnjRZM\"       frameborder=\"0\"       allowfullscreen     \/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>iframe<\/code><\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0410\u0442\u0440\u0438\u0431\u0443\u0442<\/th>\n<th>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n<th>\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>src<\/code><\/td>\n<td>URL \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/td>\n<td><code>&lt;iframe src=\"https:\/\/example.com\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>width<\/code><\/td>\n<td>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 iframe<\/td>\n<td><code>&lt;iframe width=\"500\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>height<\/code><\/td>\n<td>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 iframe<\/td>\n<td><code>&lt;iframe height=\"300\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>frameborder<\/code><\/td>\n<td>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b<\/td>\n<td><code>&lt;iframe frameborder=\"0\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>allowfullscreen<\/code><\/td>\n<td>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/td>\n<td><code>&lt;iframe allowfullscreen \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>sandbox<\/code><\/td>\n<td>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/td>\n<td><code>&lt;iframe sandbox \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>loading<\/code><\/td>\n<td>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443)<\/td>\n<td><code>&lt;iframe loading=\"lazy\" \/><\/code><\/td>\n<\/tr>\n<tr>\n<td><code>title<\/code><\/td>\n<td>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438<\/td>\n<td><code>&lt;iframe title=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\" \/><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 2 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Next.js:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0438\u0434\u0435\u043e-\u0444\u0430\u0439\u043b\u044b \u2014 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043f\u043b\u0435\u0435\u0440\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433 <code>video<\/code> \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/li>\n<li>\u0432\u0438\u0434\u0435\u043e \u0445\u043e\u0441\u0442\u0438\u043d\u0433-\u0441\u0435\u0440\u0432\u0438\u0441\u044b (YouTube, Vimeo \u0438 \u0434\u0440.) \u2014 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e, \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433 <code>iframe<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0435\u043e<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Next.js \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0432\u0438\u0434\u0435\u043e \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Suspense<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0435\u043e \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 iframe:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/ui\/video-component.jsx export default async function VideoComponent() {   const src = await getVideoSrc()    return &lt;iframe src={src} frameborder=\"0\" allowfullscreen \/> }<\/code><\/pre>\n<p>  <\/p>\n<ol>\n<li>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u0432\u0438\u0434\u0435\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Suspense<\/code>.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.jsx import { Suspense } from 'react' import VideoComponent from '..\/ui\/VideoComponent.jsx'  export default function Page() {   return (     &lt;section>       &lt;Suspense fallback={&lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p>}>         &lt;VideoComponent \/>       &lt;\/Suspense>       {\/* \u0414\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/}     &lt;\/section>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443 UX, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0435\u0439 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.jsx import { Suspense } from 'react' import VideoComponent from '..\/ui\/VideoComponent.jsx' import VideoSkeleton from '..\/ui\/VideoSkeleton.jsx'  export default function Page() {   return (     &lt;section>       &lt;Suspense fallback={&lt;VideoSkeleton \/>}>         &lt;VideoComponent \/>       &lt;\/Suspense>       {\/* \u0414\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/}     &lt;\/section>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0438\u0434\u0435\u043e<\/em><\/p>\n<p>  <\/p>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0438\u0434\u0435\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u044f\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u2014 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0432\u0438\u0434\u0435\u043e \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u043f\u043b\u0435\u0435\u0440\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c<\/li>\n<li>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043d\u0443\u0436\u0434\u044b<\/li>\n<li>\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/li>\n<li>\u043d\u0438\u0437\u043a\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Vercel Blob \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0438\u0434\u0435\u043e-\u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430<\/strong><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/vercel.com\/docs\/storage\/vercel-blob?utm_source=next-site&amp;utm_medium=docs&amp;utm_campaign=next-website\">Vercel Blob<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430 \u0432\u0438\u0434\u0435\u043e, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 Next.js.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0438\u0434\u0435\u043e \u043d\u0430 Vercel Blob.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Vercel \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 &#171;Storage&#187; \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 Vercel Blob. \u0412 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 &#171;Upload&#187;. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0438\u0434\u0435\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/vercel.com\/docs\/storage\/vercel-blob\/server-upload\">\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/a>. Vercel \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/vercel.com\/docs\/storage\/vercel-blob\/client-upload\">\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0435\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Suspense } from 'react' import { list } from '@vercel\/blob'  export default function Page() {   return (     &lt;Suspense fallback={&lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p>}>       &lt;VideoComponent fileName=\"my-video.mp4\" \/>     &lt;\/Suspense>   ) }  async function VideoComponent({ fileName }) {   const { blobs } = await list({     prefix: fileName,     limit: 1,   })   const { url } = blobs[0]    return (     &lt;video controls preload=\"none\" aria-label=\"\u0412\u0438\u0434\u0435\u043e-\u043f\u043b\u0435\u0435\u0440\">       \/\/ \u0438\u0437-\u0437\u0430 source \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0445\u0430\u0431\u0440\u043e\u0432\u0441\u043a\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0442\u044c       \/\/ &lt;source src={url} type=\"video\/mp4\" \/>       \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0435\u0433 video.     &lt;\/video>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0443\u0431\u0442\u0438\u0442\u0440\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0431\u0442\u0438\u0442\u0440\u044b \u043a \u0432\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>track<\/code>. \u0421\u0443\u0431\u0442\u0438\u0442\u0440\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0430 Vercel Blob.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">async function VideoComponent({ fileName }) {   const { blobs } = await list({     prefix: fileName,     limit: 2   });   const { url } = blobs[0];   const { url: captionsUrl } = blobs[1];    return (     &lt;video controls preload=\"none\" aria-label=\"\u0412\u0438\u0434\u0435\u043e-\u043f\u043b\u0435\u0435\u0440\">       \/\/ \u0438\u0437-\u0437\u0430 source \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0445\u0430\u0431\u0440\u043e\u0432\u0441\u043a\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0442\u044c       \/\/ &lt;source src={url} type=\"video\/mp4\" \/>       &lt;track         src={captionsUrl}         kind=\"subtitles\"         srcLang=\"en\"         label=\"English\"       >       \u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0435\u0433 video.     &lt;\/video>   ); };<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e\u0431 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u0438\u0434\u0435\u043e \u043c\u043e\u0436\u043d\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Video_codecs\">\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438 \u043a\u043e\u0434\u0435\u043a\u043e\u0432 \u0432\u0438\u0434\u0435\u043e<\/a><\/li>\n<li><a href=\"https:\/\/www.ffmpeg.org\/\">\u0441\u0436\u0430\u0442\u0438\u0435 \u0432\u0438\u0434\u0435\u043e<\/a><\/li>\n<li><a href=\"https:\/\/www.dacast.com\/blog\/bitrate-vs-resolution\/#:~:text=The%20two%20measure%20different%20aspects,yield%20different%20qualities%20of%20video\">\u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u0431\u0438\u0442\u0440\u0435\u0439\u0442 \u0432\u0438\u0434\u0435\u043e<\/a><\/li>\n<li><a href=\"https:\/\/vercel.com\/docs\/edge-network\/overview?utm_source=next-site&amp;utm_medium=docs&amp;utm_campaign=next-website\">CDN<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>next-video<\/code><\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Video<\/code> \u0434\u043b\u044f Next.js, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0445\u043e\u0441\u0442\u0438\u043d\u0433-\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f Vercel Blob, S3, Backblaze \u0438 Mux<\/li>\n<li>\u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e <a href=\"https:\/\/next-video.dev\/docs\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 Cloudinary<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/next.cloudinary.dev\/\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> \u043f\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Cloudinary \u0441 Next.js<\/li>\n<li><a href=\"https:\/\/github.com\/cloudinary-community\/cloudinary-examples\/?tab=readme-ov-file#nextjs\">\u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a> \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/li>\n<li><a href=\"https:\/\/cloudinary.com\/documentation\">\u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Cloudinary<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"shrifty\">\u0428\u0440\u0438\u0444\u0442\u044b<\/h2>\n<p>  <\/p>\n<p><code>next\/font<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0448\u0440\u0438\u0444\u0442\u044b (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435) \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p><code>next\/font<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u043b\u044e\u0431\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0448\u0440\u0438\u0444\u0442\u0430. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0435\u0431-\u0448\u0440\u0438\u0444\u0442\u044b \u0441 \u043d\u0443\u043b\u0435\u0432\u044b\u043c \u0441\u0434\u0432\u0438\u0433\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0430 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <code>size-adjust<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c.<\/p>\n<p>  <\/p>\n<p><em>Google Fonts<\/em><\/p>\n<p>  <\/p>\n<p><code>next\/font\/google<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0445\u043e\u0441\u0442\u0438\u0442 \u043b\u044e\u0431\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 Google. \u0428\u0440\u0438\u0444\u0442\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 \u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0442\u043e\u0433\u043e \u0436\u0435 \u0434\u043e\u043c\u0435\u043d\u0430, \u0447\u0442\u043e \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \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 <a href=\"https:\/\/fonts.google.com\/variablefonts\">\u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/a>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import { Inter } from 'next\/font\/google'  \/\/ \u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u0432\u0435\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e const inter = Inter({   subsets: ['latin'],   display: 'swap', })  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\" className={inter.className}>       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442, \u0432\u0435\u0441 \u0448\u0440\u0438\u0444\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u044f\u0432\u043d\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import { Roboto } from 'next\/font\/google'  const roboto = Roboto({   weight: '400',   subsets: ['latin'],   display: 'swap', })  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\" className={roboto.className}>       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0441\u043e\u0432 \u0438\/\u0438\u043b\u0438 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const roboto = Roboto({   weight: ['400', '700'],   style: ['normal', 'italic'],   subsets: ['latin'],   display: 'swap', })<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 (subsets) \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u0430\u0431\u043e\u0440\u044b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const inter = Inter({ subsets: ['latin'] })<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0448\u0440\u0438\u0444\u0442\u044b, \u0438\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 <code>className<\/code> \u043f\u043e-\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/fonts.ts import { Inter, Roboto_Mono } from 'next\/font\/google'  export const inter = Inter({   subsets: ['latin'],   display: 'swap', })  export const roboto_mono = Roboto_Mono({   subsets: ['latin'],   display: 'swap', })<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import { inter } from '.\/fonts'  export default function Layout({ children }: { children: React.ReactNode }) {   return (     &lt;html lang=\"en\" className={inter.className}>       &lt;body>         &lt;div>{children}&lt;\/div>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import { roboto_mono } from '.\/fonts'  export default function Page() {   return (     &lt;>       &lt;h1 className={roboto_mono.className}>\u041c\u043e\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>Inter<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e, \u0430 <code>Roboto Mono<\/code> \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e CSS \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 CSS:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import { Inter, Roboto_Mono } from 'next\/font\/google' import styles from '.\/global.css'  const inter = Inter({   subsets: ['latin'],   variable: '--font-inter',   display: 'swap', })  const roboto_mono = Roboto_Mono({   subsets: ['latin'],   variable: '--font-roboto-mono',   display: 'swap', })  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\" className={`${inter.variable} ${roboto_mono.variable}`}>       &lt;body>         &lt;h1>\u041c\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435&lt;\/h1>         &lt;div>{children}&lt;\/div>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">\/* app\/global.css *\/ html {   font-family: var(--font-inter); }  h1 {   font-family: var(--font-roboto-mono); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>Inter<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e, \u0430 \u043a \u0442\u0435\u0433\u0430\u043c <code>h1<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>Roboto Mono<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><code>next\/font\/local<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b. \u0414\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \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\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import localFont from 'next\/font\/local'  \/\/ \u0424\u0430\u0439\u043b\u044b \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 `app` const myFont = localFont({   src: '.\/my-font.woff2',   display: 'swap', })  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\" className={myFont.className}>       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0430 <code>src<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const roboto = localFont({   src: [     {       path: '.\/Roboto-Regular.woff2',       weight: '400',       style: 'normal',     },     {       path: '.\/Roboto-Italic.woff2',       weight: '400',       style: 'italic',     },     {       path: '.\/Roboto-Bold.woff2',       weight: '700',       style: 'normal',     },     {       path: '.\/Roboto-BoldItalic.woff2',       weight: '700',       style: 'italic',     },   ], })<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u043c\u0435\u0441\u0442\u0435 \u0441 Tailwind CSS<\/strong><\/p>\n<p>  <\/p>\n<p><code>next\/font<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Tailwind CSS \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import { Inter, Roboto_Mono } from 'next\/font\/google'  const inter = Inter({   subsets: ['latin'],   display: 'swap',   variable: '--font-inter', })  const roboto_mono = Roboto_Mono({   subsets: ['latin'],   display: 'swap',   variable: '--font-roboto-mono', })  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\" className={`${inter.variable} ${roboto_mono.variable}`}>       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ tailwind.config.js \/** @type {import('tailwindcss').Config} *\/ module.exports = {   content: [     '.\/pages\/**\/*.{js,ts,jsx,tsx}',     '.\/components\/**\/*.{js,ts,jsx,tsx}',     '.\/app\/**\/*.{js,ts,jsx,tsx}',   ],   theme: {     extend: {       fontFamily: {         sans: ['var(--font-inter)'],         mono: ['var(--font-roboto-mono)'],       },     },   },   plugins: [], }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b-\u0443\u0442\u0438\u043b\u0438\u0442\u044b <code>font-sans<\/code> \u0438 <code>font-mono<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0440\u043e\u0443\u0442\u043e\u0432. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0444\u0430\u0439\u043b\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0434\u043b\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0448\u0440\u0438\u0444\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<li>\u0434\u043b\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0448\u0440\u0438\u0444\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0440\u043e\u0443\u0442\u043e\u0432, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0445 \u044d\u0442\u0438\u043c \u043c\u0430\u043a\u0435\u0442\u043e\u043c<\/li>\n<li>\u0434\u043b\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u0448\u0440\u0438\u0444\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0440\u043e\u0443\u0442\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0448\u0440\u0438\u0444\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u043e\u0431\u0449\u0435\u043c \u0444\u0430\u0439\u043b\u0435<\/li>\n<li>\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u043a\u0430\u043a \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443<\/li>\n<li>\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0448\u0440\u0438\u0444\u0442<\/li>\n<\/ul>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/components\/font\">API \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/a>.<\/p>\n<p>  <\/p>\n<h2 id=\"metadannye\">\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/h2>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <code>Metadata API<\/code> \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u0433\u043e\u0432 <code>meta<\/code> \u0438 <code>link<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>head<\/code>) \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f SEO.<\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u2014 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>metadata<\/code> \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>generateMetadata<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>layout.js<\/code> \u0438\u043b\u0438 <code>page.js<\/code><\/li>\n<li>\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u043e\u0443\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 <code>metadata<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>layout.js<\/code> \u0438\u043b\u0438 <code>page.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import type { Metadata } from 'next'  export const metadata: Metadata = {   title: '...',   description: '...', }  export default function Page() {}<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>generateMetadata<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/products\/[id]\/page.tsx import type { Metadata, ResolvingMetadata } from 'next'  type Props = {   params: { id: string }   searchParams: { [key: string]: string | string[] | undefined } }  export async function generateMetadata(   { params, searchParams }: Props,   parent: ResolvingMetadata ): Promise&lt;Metadata> {   \/\/ \u0427\u0438\u0442\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u043e\u0443\u0442\u0430   const id = params.id    \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435   const product = await (await fetch(`https:\/\/...\/${id}`)).json()    \/\/ \u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 (\u0432\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u044b) \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445   const previousImages = (await parent).openGraph?.images || []    return {     title: product.title,     openGraph: {       images: ['\/some-specific-page-image.jpg', ...previousImages],     },   } }  export default function Page({ params, searchParams }: Props) {}<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/generate-metadata\"><code>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 metadata<\/code> \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>generateMetadata<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0430\u0439\u043b\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>favicon.ico, apple-icon.jpg \u0438 icon.jpg<\/li>\n<li>opengraph-image.jpg \u0438 twitter-image.jpg<\/li>\n<li>robots.txt<\/li>\n<li>sitemap.xml<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043f\u043e\u043b\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u0442\u0435\u0433\u0430 <code>meta<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u043e\u0443\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;meta charset=\"utf-8\" \/> &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0440\u044f\u0434\u043e\u043a<\/em><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u043c, \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u043c \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<ol>\n<li><code>app\/layout.tsx<\/code> (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442)<\/li>\n<li><code>app\/blog\/layout.tsx<\/code> (\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0431\u043b\u043e\u0433\u0430)<\/li>\n<li><code>app\/blog\/[slug]\/page.tsx<\/code> (\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u043b\u043e\u0433\u0430)<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u044b \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u0430. \u0414\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0435\u0441\u044f \u043a\u043b\u044e\u0447\u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044c \u043f\u043e\u043b\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.js export const metadata = {   title: 'Acme',   openGraph: {     title: 'Acme',     description: 'Acme - \u044d\u0442\u043e...',   }, }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/blog\/page.js export const metadata = {   title: '\u0411\u043b\u043e\u0433',   openGraph: {     title: '\u0411\u043b\u043e\u0433',   }, }  \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \/\/ &lt;title>\u0411\u043b\u043e\u0433&lt;\/title> \/\/ &lt;meta property=\"og:title\" content=\"\u0411\u043b\u043e\u0433\" \/><\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u043e\u0431\u0449\u0438\u043c\u0438 \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/shared-metadata.js export const openGraphImage = { images: ['http:\/\/...'] }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import { openGraphImage } from '.\/shared-metadata'  export const metadata = {   openGraph: {     ...openGraphImage,     title: '\u0413\u043b\u0430\u0432\u043d\u0430\u044f',   }, }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/about\/page.js import { openGraphImage } from '..\/shared-metadata'  export const metadata = {   openGraph: {     ...openGraphImage,     title: '\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b',   }, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 OG \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 <code>app\/layout.js<\/code> \u0438 <code>app\/about\/page.js<\/code>, \u0430 <code>title<\/code> \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.js export const metadata = {   title: 'Acme',   openGraph: {     title: 'Acme',     description: 'Acme - \u044d\u0442\u043e...',   }, }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/about\/page.js export const metadata = {   title: '\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b', }  \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \/\/ &lt;title>\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b&lt;\/title> \/\/ &lt;meta property=\"og:title\" content=\"Acme\" \/> \/\/ &lt;meta property=\"og:description\" content=\"Acme - \u044d\u0442\u043e...\" \/><\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/metadata\">\u0424\u0430\u0439\u043b\u044b \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>ImageResponse<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSX \u0438 CSS. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f OG, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 Twitter \u0438 \u0434\u0440.<\/p>\n<p>  <\/p>\n<p><code>ImageResponse<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0438 Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0447\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/about\/route.js import { ImageResponse } from 'next\/og'  export const runtime = 'edge'  export async function GET() {   return new ImageResponse(     (       &lt;div         style={{           fontSize: 128,           background: 'white',           width: '100%',           height: '100%',           display: 'flex',           textAlign: 'center',           alignItems: 'center',           justifyContent: 'center',         }}       >         \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!       &lt;\/div>     ),     {       width: 1200,       height: 600,     }   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/image-response\"><code>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 ImageResponse<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p><strong>JSON-LD<\/strong><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/json-ld.org\/\">JSON-LD<\/a> \u2014 \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0432\u0438\u0436\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u0444\u0438\u043b\u044c\u043c\u0430, \u043a\u043d\u0438\u0433\u0438, \u0440\u0435\u0446\u0435\u043f\u0442\u0430 \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0435\u0449\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f JSON-LD \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0442\u0435\u0433 <code>script<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 <code>layout.js<\/code> \u0438\u043b\u0438 <code>page.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/products\/[id]\/page.tsx export default async function Page({ params }) {   const product = await getProduct(params.id)    const jsonLd = {     '@context': 'https:\/\/schema.org',     '@type': 'Product',     name: product.name,     image: product.image,     description: product.description,   }    return (     &lt;section>       {\/* \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c JSON-LD \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 *\/}       &lt;script         type=\"application\/ld+json\"         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}       \/>       {\/* ... *\/}     &lt;\/section>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/search.google.com\/test\/rich-results\">Rich Results Test<\/a> \u0434\u043b\u044f Google \u0438\u043b\u0438 \u043e\u0431\u0449\u0438\u043c <a href=\"https:\/\/validator.schema.org\/\">Schema Markup Validator<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c JSON-LD (TypeScript) \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/schema-dts\">schema-dts<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Product, WithContext } from 'schema-dts'  const jsonLd: WithContext&lt;Product> = {   '@context': 'https:\/\/schema.org',   '@type': 'Product',   name: '\u0421\u0442\u0438\u043a\u0435\u0440 Next.js',   image: 'https:\/\/nextjs.org\/imgs\/sticker.png',   description: '\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e \u0446\u0435\u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e.', }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"skripty\">\u0421\u043a\u0440\u0438\u043f\u0442\u044b<\/h2>\n<p>  <\/p>\n<p><strong>\u0421\u043a\u0440\u0438\u043f\u0442\u044b \u043c\u0430\u043a\u0435\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p><code>next\/script<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/layout.tsx import Script from 'next\/script'  export default function DashboardLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;>       &lt;section>{children}&lt;\/section>       &lt;Script src=\"https:\/\/example.com\/script.js\" \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0440\u043e\u0443\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>dashboard\/page.js<\/code>) \u0438\u043b\u0438 \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>dashboard\/settings\/page.js<\/code>). \u0421\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043a\u0440\u0438\u043f\u0442\u044b \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import Script from 'next\/script'  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\">       &lt;body>{children}&lt;\/body>       &lt;Script src=\"https:\/\/example.com\/script.js\" \/>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u043f\u0440\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0435 \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f <code>strategy<\/code> \u0438\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 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>beforeInteractive<\/code> \u2014 \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438<\/li>\n<li><code>afterInteractive<\/code> (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u2014 \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438<\/li>\n<li><code>lazyOnload<\/code> \u2014 \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u044f (idle) \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/li>\n<li><code>worker<\/code> (\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f) \u2014 \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0431-\u0432\u043e\u0440\u043a\u0435\u0440\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Script<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b. \u041a\u043e\u0434 JS \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Script id=\"show-banner\">   {`document.getElementById('banner').classList.remove('hidden')`} &lt;\/Script><\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f <code>dangerouslySetInnerHTML<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Script   id=\"show-banner\"   dangerouslySetInnerHTML={{     __html: `document.getElementById('banner').classList.remove('hidden')`,   }} \/><\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>onLoad<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430<\/li>\n<li><code>onReady<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<li><code>onError<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u0438 \u043f\u0440\u043e\u0432\u0430\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use client'  import Script from 'next\/script'  export default function Page() {   return (     &lt;>       &lt;Script         src=\"https:\/\/example.com\/script.js\"         onLoad={() => {           console.log('\u0421\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d')         }}       \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 DOM, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>script<\/code>, \u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>Script<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>nonce<\/code> \u0438\u043b\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u0430\u0442\u0430-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u042d\u0442\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>script<\/code>, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c\u043e\u043c\u0443 \u0432 HTML.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Script from 'next\/script'  export default function Page() {   return (     &lt;>       &lt;Script         src=\"https:\/\/example.com\/script.js\"         id=\"example-script\"         nonce=\"XUENAJFW\"         data-test=\"script\"       \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/components\/script\"><code>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Script<\/code><\/a>.<\/p>\n<p>  <\/p>\n<h2 id=\"analiz-sborki\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438<\/h2>\n<p>  <\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/@next\/bundle-analyzer\">@next\/bundle-analyzer<\/a> \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d Next.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0447\u0435\u0442 \u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u0434\u0430 \u043f\u043e-\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n<p>  <\/p>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm i @next\/bundle-analyzer # \u0438\u043b\u0438 yarn add @next\/bundle-analyzer # \u0438\u043b\u0438 pnpm add @next\/bundle-analyzer<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const withBundleAnalyzer = require('@next\/bundle-analyzer')({   enabled: process.env.ANALYZE === 'true', })  \/** @type {import('next').NextConfig} *\/ const nextConfig = {}  module.exports = withBundleAnalyzer(nextConfig)<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0410\u043d\u0430\u043b\u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0441\u0431\u043e\u0440\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">ANALYZE=true npm run build # \u0438\u043b\u0438 ANALYZE=true yarn build # \u0438\u043b\u0438 ANALYZE=true pnpm build<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044e \u0442\u0440\u0435\u0445 \u043d\u043e\u0432\u044b\u0445 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434 \u0434\u0435\u043f\u043b\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"lenivaya-zagruzka\">\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 JS, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043e\u043d\u0438 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043a\u043e\u0434\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u043c\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0435\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 Next.js:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>next\/dynamic<\/code>.<\/li>\n<li>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>React.lazy<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Suspense<\/code>.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><strong><code>next\/dynamic<\/code><\/strong><\/p>\n<p>  <\/p>\n<p><code>next\/dynamic<\/code> \u2014 \u044d\u0442\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 <code>React.lazy<\/code> \u0438 <code>Suspense<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use client'  import { useState } from 'react' import dynamic from 'next\/dynamic'  \/\/ \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b const ComponentA = dynamic(() => import('..\/components\/A')) const ComponentB = dynamic(() => import('..\/components\/B')) const ComponentC = dynamic(() => import('..\/components\/C'), { ssr: false })  export default function ClientComponentExample() {   const [showMore, setShowMore] = useState(false)    return (     &lt;div>       {\/* \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 *\/}       &lt;ComponentA \/>        {\/* \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443, \u043f\u0440\u0438 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f *\/}       {showMore &amp;&amp; &lt;ComponentB \/>}       &lt;button onClick={() => setShowMore(!showMore)}>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c&lt;\/button>        {\/* \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 *\/}       &lt;ComponentC \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u043f\u0443\u0441\u043a SSR<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>React.lazy<\/code> \u0438 <code>Suspense<\/code> \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (SSR).<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f SSR \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>ssr<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const ComponentC = dynamic(() => import('..\/components\/C'), { ssr: false })<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u0435\u043d\u0438\u0432\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u0430\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic'  \/\/ \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 const ServerComponent = dynamic(() => import('..\/components\/ServerComponent'))  export default function ServerComponentExample() {   return (     &lt;div>       &lt;ServerComponent \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>import<\/code>. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u043e\u0434\u0443\u043b\u044c <code>fuse.js<\/code> \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0432 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use client'  import { useState } from 'react'  const names = ['\u0418\u0433\u043e\u0440\u044c', '\u0412\u0435\u0440\u0430', '\u041e\u043b\u0435\u0433', '\u0415\u043b\u0435\u043d\u0430']  export default function Page() {   const [results, setResults] = useState()    return (     &lt;div>       &lt;input         type=\"text\"         placeholder=\"\u041f\u043e\u0438\u0441\u043a...\"         onChange={async (e) => {           const { value } = e.currentTarget           \/\/ \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 `fuse.js`           const Fuse = (await import('fuse.js')).default           const fuse = new Fuse(names)            setResults(fuse.search(value))         }}       \/>       &lt;pre>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b: {JSON.stringify(results, null, 2)}&lt;\/pre>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic'  const WithCustomLoading = dynamic(   () => import('..\/components\/WithCustomLoading'),   {     loading: () => &lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p>,   } )  export default function Page() {   return (     &lt;div>       {\/* \u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 `WithCustomLoading` *\/}       &lt;WithCustomLoading \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/hello.js 'use client'  export function Hello() {   return &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442!&lt;\/p> }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import dynamic from 'next\/dynamic'  const ClientComponent = dynamic(() =>   import('..\/components\/hello').then((mod) => mod.Hello) )<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"analitika\">\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0425\u0443\u043a <code>useReportWebVitals<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0447\u0435\u0442\u0430\u043c\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b Vercel \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <a href=\"https:\/\/vercel.com\/analytics\">\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0420\u0443\u0447\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0447\u0435\u0442\u0430\u043c\u0438<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/_components\/web-vitals.js 'use client'  import { useReportWebVitals } from 'next\/web-vitals'  export function WebVitals() {   useReportWebVitals((metric) => {     console.log(metric)   }) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.js import { WebVitals } from '.\/_components\/web-vitals'  export default function Layout({ children }) {   return (     &lt;html>       &lt;body>         &lt;WebVitals \/>         {children}       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/use-report-web-vitals\"><code>\u0425\u0443\u043a useReportWebVitals<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p><strong>Web Vitals<\/strong><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/web.dev\/articles\/vitals\">Web Vitals<\/a> \u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 UX:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/docs\/Glossary\/Time_to_first_byte\">Time to First Byte (TTFB)<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/docs\/Glossary\/First_contentful_paint\">First Contentful Paint (FCP)<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/lcp\/\">Largest Contentful Paint (LCP)<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/fid\/\">First Input Delay (FID)<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/cls\/\">Cumulative Layout Shift (CLS)<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/inp\/\">Interaction to Next Paint (INP)<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u0440\u0438\u043a \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>name<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use client'  import { useReportWebVitals } from 'next\/web-vitals'  export function WebVitals() {   useReportWebVitals((metric) => {     switch (metric.name) {       case 'FCP': {         \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b FCP       }       case 'LCP': {         \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b FCP       }       \/\/ ...     }   }) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">useReportWebVitals((metric) => {   const body = JSON.stringify(metric)   const url = 'https:\/\/example.com\/analytics'    \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c `navigator.sendBeacon` \u0438\u043b\u0438 `fetch`   if (navigator.sendBeacon) {     navigator.sendBeacon(url, body)   } else {     fetch(url, { body, method: 'POST', keepalive: true })   } })<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">useReportWebVitals((metric) => {   \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c `window.gtag` \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Google Analytics, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:   \/\/ https:\/\/github.com\/vercel\/next.js\/blob\/canary\/examples\/with-google-analytics\/pages\/_app.js   window.gtag('event', metric.name, {     value: Math.round(       metric.name === 'CLS' ? metric.value * 1000 : metric.value     ), \/\/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0446\u0435\u043b\u044b\u043c\u0438 \u0447\u0438\u0441\u043b\u0430\u043c\u0438     event_label: metric.id, \/\/ `id` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b     non_interaction: true, \/\/ \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u043e\u0432 \u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c   }) })<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"staticheskie-resursy\">\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/h2>\n<p>  <\/p>\n<p>Next.js \u0443\u043c\u0435\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>public<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0430 \u0444\u0430\u0439\u043b\u044b \u0432\u043d\u0443\u0442\u0440\u0438 <code>public<\/code> \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e URL (<code>\/<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 <code>public\/avatars\/me.png<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a <code>\/avatars\/me.png<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Image from 'next\/image'  export function Avatar({ id, alt }) {   return &lt;Image src={`\/avatars\/${id}.png`} alt={alt} width=\"64\" height=\"64\" \/> }  export function AvatarOfMe() {   return &lt;Avatar id=\"me\" alt=\"\u041c\u043e\u0439 \u043f\u043e\u0440\u0442\u0440\u0435\u0442\" \/> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>public<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f. \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Cache-Control: public, max-age=0<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0430\u0439\u043b\u044b \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>robots.txt<\/code>, <code>favicon.ico<\/code> \u0438 \u0434\u0440. \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"storonnie-biblioteki\">\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h2>\n<p>  <\/p>\n<p><code>@next\/third-parties<\/code> \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0443\u0442\u0438\u043b\u0438\u0442, \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u043f\u044b\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 Next.js.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 <code>@next\/third-parties<\/code>, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install @next\/third-parties@latest next@latest<\/code><\/pre>\n<p>  <\/p>\n<p><code>@next\/third-parties<\/code> \u2014 \u044d\u0442\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0442 Google<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 Google \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 <code>@next\/third-parties\/google<\/code>:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\/third-party-libraries#google-tag-manager\">Google Tag Manager<\/a><\/li>\n<li><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\/third-party-libraries#google-analytics\">Google Analytics<\/a><\/li>\n<li><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\/third-party-libraries#google-maps-embed\">Google Maps Embed<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, <code>@next\/third-parties<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/optimizing\/third-party-libraries#youtube-embed\">YouTubeEmbed<\/a> \u0434\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 YouTube.<\/p>\n<p>  <\/p>\n<h1 id=\"nastroyka\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/h1>\n<p>  <\/p>\n<h2 id=\"typescript\">TypeScript<\/h2>\n<p>  <\/p>\n<p><strong>\u041d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>CLI <code>create-next-app<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 TS:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx create-next-app@latest<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 JS \u043d\u0430 <code>.ts<\/code>\/<code>.tsx<\/code>. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c <code>next dev<\/code> \u0438 <code>next build<\/code> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b <code>tsconfig.json<\/code> \u0441 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u0444\u0430\u0439\u043b <code>jsconfig.json<\/code>, \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>path<\/code> \u0438\u0437 \u043d\u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b <code>tsconfig.json<\/code> \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c <code>jsconfig.json<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043b\u0430\u0433\u0438\u043d TS<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d TS \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0442\u0438\u043f\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 VSCode \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043a\u043e\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0430\u0432\u0442\u043e\u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c (<code>Ctrl\/\u2318<\/code> + <code>Shift<\/code> + <code>P<\/code>).<\/li>\n<li>\u0418\u0449\u0435\u043c &#171;TypeScript: Select TypeScript Version&#187;.<\/li>\n<li>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c &#171;Use Workspace Version&#187;.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u043e \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430<\/li>\n<li>\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li>\n<li>\u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b <code>use client<\/code><\/li>\n<li>\u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432 (\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>useState<\/code>) \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0447\u0430\u0442\u043e\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Link<\/code>, \u0447\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0430\u0439\u043b\u0430 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/** @type {import('next').NextConfig} *\/ const nextConfig = {   experimental: {     typedRoutes: true,   }, }  module.exports = nextConfig<\/code><\/pre>\n<p>  <\/p>\n<p>Next.js \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u0432 <code>.next\/types<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431\u043e \u0432\u0441\u0435\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0440\u043e\u0443\u0442\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\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 TS \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import type { Route } from 'next'; import Link from 'next\/link'  \/\/ \u041e\u0448\u0438\u0431\u043a\u0438 TS \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442, \u0435\u0441\u043b\u0438 `href` - \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 &lt;Link href=\"\/about\" \/> &lt;Link href=\"\/blog\/nextjs\" \/> &lt;Link href={`\/blog\/${slug}`} \/> &lt;Link href={('\/blog' + slug) as Route} \/>  \/\/ \u041e\u0448\u0438\u0431\u043a\u0430 TS, \u0435\u0441\u043b\u0438 `href` - \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 &lt;Link href=\"\/aboot\" \/><\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c <code>href<\/code> \u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u043c <code>Link<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import type { Route } from 'next' import Link from 'next\/link'  function Card&lt;T extends string>({ href }: { href: Route&lt;T> | URL }) {   return (     &lt;Link href={href}>       &lt;div>\u041c\u043e\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430&lt;\/div>     &lt;\/Link>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u043a\u0432\u043e\u0437\u043d\u0430\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0442\u0438\u043f\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Next.js \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0443\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0442\u0438\u043f\u043e\u0432:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 (<code>fetch<\/code>) \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043c\u0430\u043a\u0435\u0442\u0430\u0445 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c (\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0442\u0440\u043e\u043a\u0443) \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 (\u0434\u043b\u044f \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u044f React). \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Date<\/code>, <code>Map<\/code>, <code>Set<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u043a \u0435\u0441\u0442\u044c.<\/li>\n<li>\u0411\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>_app<\/code> \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c \u043c\u0430\u043a\u0435\u0442\u043e\u043c \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">async function getData() {   const res = await fetch('https:\/\/api.example.com\/...')   \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f   \/\/ \u041c\u043e\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c `Date`, `Map`, `Set` \u0438 \u0434\u0440.   return res.json() }  export default async function Page() {   const name = await getData()    return \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\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 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u044b, \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f (\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443) \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u0438\u0445 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041e\u043d\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u043f\u044b.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u0438 baseUrl<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>paths<\/code> \u0438 <code>baseUrl<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>tsconfig.json<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u0438\u043f\u043e\u0432 \u0432 <code>next.config.js<\/code><\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ @ts-check  \/**  * @type {import('next').NextConfig}  **\/ const nextConfig = {   \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/ }  module.exports = nextConfig<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0418\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u0438\u043f\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 <code>v10.2.1<\/code>, Next.js \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#incremental\">\u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432<\/a> \u043f\u0440\u0438 \u0435\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0432 <code>tsconfig.json<\/code>, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>next-env.d.ts<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0438 \u043d\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>new-types.d.ts<\/code> \u0438 \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 <code>tsconfig.json<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   \"compilerOptions\": {     \"skipLibCheck\": true     \/\/ ...   },   \"include\": [     \"new-types.d.ts\",     \"next-env.d.ts\",     \".next\/types\/**\/*.ts\",     \"**\/*.ts\",     \"**\/*.tsx\"   ],   \"exclude\": [\"node_modules\"] }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"peremennye-okruzheniya\">\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>.env.local<\/code> \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u0430\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 <code>NEXT_PUBLIC_<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 <code>.env.local<\/code> \u0432 <code>process.env<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\"># .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.js export async function GET() {   const db = await myDB.connect({     host: process.env.DB_HOST,     username: process.env.DB_USER,     password: process.env.DB_PASS,   })   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 <code>$<\/code> + \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">TWITTER_USER=nextjs TWITTER_URL=https:\/\/twitter.com\/$TWITTER_USER<\/code><\/pre>\n<p>  <\/p>\n<p><code>process.env.TWITTER_URL<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>https:\/\/twitter.com\/nextjs<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 <code>NEXT_PUBLIC_<\/code> \u043a \u0435\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 <code>process.env.NEXT_PUBLIC_ANALYTICS_ID<\/code> \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u043d\u0430 <code>abcdefghijk<\/code> \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u042d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c const varName = 'NEXT_PUBLIC_ANALYTICS_ID' setupAnalyticsService(process.env[varName])  \/\/ \u042d\u0442\u043e \u0442\u043e\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c const env = process.env setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b <code>.env.local<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e Next.js \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 <code>.env<\/code> (\u0432\u0441\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f), <code>.env.development<\/code> (\u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435) \u0438 <code>.env.production<\/code> (\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435).<\/p>\n<p>  <\/p>\n<p><code>.env.local<\/code> \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<p>  <\/p>\n<ol>\n<li><code>process.env<\/code><\/li>\n<li><code>.env.$(NODE_ENV).local<\/code><\/li>\n<li><code>.env.local<\/code> (\u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 <code>NODE_ENV<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>test<\/code>)<\/li>\n<li><code>.env.$(NODE_ENV)<\/code><\/li>\n<li><code>.env<\/code><\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>NODE_ENV<\/code> \u0432 <code>.env.development.local<\/code> \u0438 <code>.env<\/code>, \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 <code>.env.development.local<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"absolyutnye-importy-i-sinonimy-putey-moduley\">\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0438 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h2>\n<p>  <\/p>\n<p>Next.js \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <code>paths<\/code> \u0438 <code>baseUrl<\/code> \u0444\u0430\u0439\u043b\u043e\u0432 <code>tsconfig.json<\/code> \u0438 <code>jsconfig.json<\/code>.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0443\u0442\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u043a \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u043c \u043f\u0443\u0442\u044f\u043c, \u0447\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0414\u043e import { Button } from '..\/..\/..\/components\/button'  \/\/ \u041f\u043e\u0441\u043b\u0435 import { Button } from '@\/components\/button'<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>baseUrl<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u043a\u043e\u0440\u043d\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">\/\/ tsconfig.json \u0438\u043b\u0438 jsconfig.json {   \"compilerOptions\": {     \"baseUrl\": \".\"   } }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/button.tsx export default function Button() {   return &lt;button>\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043c\u0435\u043d\u044f&lt;\/button> }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import Button from 'components\/button'  export default function HomePage() {   return (     &lt;>       &lt;h1>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!&lt;\/h1>       &lt;Button \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>paths<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 <code>baseUrl<\/code> \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 <code>@\/components\/*<\/code> \u043a <code>components\/*<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">\/\/ tsconfig.json \u0438\u043b\u0438 jsconfig.json {   \"compilerOptions\": {     \"baseUrl\": \".\",     \"paths\": {       \"@\/components\/*\": [\"components\/*\"]     }   } }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/button.tsx export default function Button() {   return &lt;button>\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043c\u0435\u043d\u044f&lt;\/button> }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import Button from '@\/components\/button'  export default function HomePage() {   return (     &lt;>       &lt;h1>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!&lt;\/h1>       &lt;Button \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0432 <code>paths<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a <code>baseUrl<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">\/\/ tsconfig.json \u0438\u043b\u0438 jsconfig.json {   \"compilerOptions\": {     \"baseUrl\": \"src\/\",     \"paths\": {       \"@\/styles\/*\": [\"styles\/*\"],       \"@\/components\/*\": [\"components\/*\"]     }   } }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import Button from '@\/components\/button' import '@\/styles\/styles.css' import Helper from 'utils\/helper'  export default function HomePage() {   return (     &lt;Helper>       &lt;h1>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!&lt;\/h1>       &lt;Button \/>     &lt;\/Helper>   ) }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"markdown-i-mdx\">Markdown \u0438 MDX<\/h2>\n<p>  <\/p>\n<p>Markdown \u2014 \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 HTML.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u0438\u0448\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\u042f **\u043b\u044e\u0431\u043b\u044e** \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c [Next.js](https:\/\/nextjs.org\/)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;p>\u042f &lt;strong>\u043b\u044e\u0431\u043b\u044e&lt;\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c &lt;a href=\"https:\/\/nextjs.org\/\">Next.js&lt;\/a>&lt;\/p><\/code><\/pre>\n<p>  <\/p>\n<p>MDX \u2014 \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 MD, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c JSX \u043f\u0440\u044f\u043c\u043e \u0432 MD-\u0444\u0430\u0439\u043b\u0430\u0445. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b MD, \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438. \u041f\u043b\u0430\u0433\u0438\u043d Next.js \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 MD \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0432 HTML, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong><code>@next\/mdx<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u043a\u0435\u0442 <code>@next\/mdx<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 MD \u0438 MDX. \u041e\u043d \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.mdx<\/code> \u043f\u0440\u044f\u043c\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 MDX:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install @next\/mdx @mdx-js\/loader @mdx-js\/react @types\/mdx<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>mdx-components.tsx<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import type { MDXComponents } from 'mdx\/types'  export function useMDXComponents(components: MDXComponents): MDXComponents {   return {     ...components,   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const withMDX = require('@next\/mdx')()  \/** @type {import('next').NextConfig} *\/ const nextConfig = {   \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 `mdx`   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],   \/\/ ... }  \/\/ \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 MDX \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 Next.js module.exports = withMDX(nextConfig)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 MDX:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">  your-project   \u251c\u2500\u2500 app   \u2502   \u2514\u2500\u2500 my-mdx-page   \u2502       \u2514\u2500\u2500 page.mdx   \u2514\u2500\u2500 package.json<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c MD \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 MDX:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { MyComponent } from 'my-components'  # \u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043c\u043e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 MDX!  \u042d\u0442\u043e **\u0436\u0438\u0440\u043d\u044b\u0439** \u0438 _\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439_ \u0442\u0435\u043a\u0441\u0442.  \u042d\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a:  - \u041e\u0434\u0438\u043d - \u0414\u0432\u0430 - \u0422\u0440\u0438  \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u043c\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React:  &lt;MyComponent \/><\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0423\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u0439 MDX<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u0448 MD &#171;\u0436\u0438\u0432\u0435\u0442&#187; \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/next-mdx-remote\">next-mdx-remote<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/my-mdx-page-remote\/page.tsx import { MDXRemote } from 'next-mdx-remote\/rsc'  export default async function RemoteMdxPage() {   \/\/ MD \u043c\u043e\u0436\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u0411\u0414, CMS, \u0433\u0434\u0435 \u0443\u0433\u043e\u0434\u043d\u043e   const res = await fetch('https:\/\/...')   const markdown = await res.text()   return &lt;MDXRemote source={markdown} \/> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041c\u0430\u043a\u0435\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 MDX \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/my-mdx-page\/layout.tsx export default function MdxLayout({ children }: { children: React.ReactNode }) {   return &lt;div style={{ color: 'blue' }}>{children}&lt;\/div> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u043b\u0430\u0433\u0438\u043d\u044b <code>Remark<\/code> \u0438 <code>Rehype<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f MDX \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b <code>remark<\/code> \u0438 <code>rehype<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>remark-gfm<\/code> \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 GitHub Flavored Markdown. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>remark<\/code> \u0438 <code>rehype<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f ESM, \u0434\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 Next.js \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b <code>next.config.mjs<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import remarkGfm from 'remark-gfm' import createMDX from '@next\/mdx'  \/** @type {import('next').NextConfig} *\/ const nextConfig = {   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],   \/\/ ... }  const withMDX = createMDX({   \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b MD   options: {     remarkPlugins: [remarkGfm],     rehypePlugins: [],   }, })  \/\/ \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 MDX \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 Next.js export default withMDX(nextConfig)<\/code><\/pre>\n<p>  <\/p>\n<p><strong>Frontmatter<\/strong><\/p>\n<p>  <\/p>\n<p>Frontmatter \u2014 \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 YAML \u0444\u043e\u0440\u043c\u0430\u0442 \u043a\u043b\u044e\u0447\u0435\u0439 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. <code>@next\/mdx<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 frontmatter \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f frontmatter \u0432 MDX:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/remarkjs\/remark-frontmatter\">remark-frontmatter<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/remcohaszing\/remark-mdx-frontmatter\">remark-mdx-frontmatter<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jonschlinkert\/gray-matter\">gray-matter<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>@next\/mdx<\/code> \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 <code>metadata<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>.mdx<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">export const metadata = {   author: '\u0418\u0433\u043e\u0440\u044c \u0410\u0433\u0430\u043f\u043e\u0432', }  # \u041c\u043e\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 MDX<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0430\u0439\u043b\u0430 <code>mdx-components.tsx<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import type { MDXComponents } from 'mdx\/types' import Image, { ImageProps } from 'next\/image'  export function useMDXComponents(components: MDXComponents): MDXComponents {   return {     \/\/ \u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b     h1: ({ children }) => &lt;h1 style={{ fontSize: '100px' }}>{children}&lt;\/h1>,     img: (props) => (       &lt;Image         sizes=\"100vw\"         style={{ width: '100%', height: 'auto' }}         {...(props as ImageProps)}       \/>     ),     ...components,   } }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"direktoriya-src\">\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>src<\/code><\/h2>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>app<\/code> \u0434\u043e\u043b\u0436\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dd\/vl\/nl\/ddvlnlub1gkozzxh52vgwd365ua.png\" data-src=\"https:\/\/habrastorage.org\/webt\/dd\/vl\/nl\/ddvlnlub1gkozzxh52vgwd365ua.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>public<\/code>, \u0444\u0430\u0439\u043b\u044b <code>package.json<\/code>, <code>next.config.js<\/code>, <code>tsconfig.json<\/code> \u0438 <code>env.*<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/li>\n<li>\u0444\u0430\u0439\u043b <code>middleware.ts<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code><\/li>\n<li>\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TailwindCSS, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b <code>content<\/code> \u0444\u0430\u0439\u043b\u0430 <code>tailwind.config.js<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 <code>src\/<\/code><\/li>\n<li>\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0443\u0442\u0435\u0439 TS \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>@\/*<\/code>, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b <code>paths<\/code> \u0444\u0430\u0439\u043b\u0430 <code>tsconfig.json<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 <code>src\/<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"content-security-policy\">Content Security Policy<\/h2>\n<p>  <\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTTP\/CSP\">Content Security Policy<\/a> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0437\u0430\u0449\u0438\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Next.js \u043e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0443\u0433\u0440\u043e\u0437 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043c\u0435\u0436\u0441\u0430\u0439\u0442\u043e\u0432\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442\u0438\u043d\u0433 (XSS), \u043a\u043b\u0438\u043a\u0434\u0436\u0435\u043a\u0438\u043d\u0433 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0430\u0442\u0430\u043a\u0438 \u0441 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSP \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043c\u0435\u0434\u0438\u0430 (\u0430\u0443\u0434\u0438\u043e, \u0432\u0438\u0434\u0435\u043e), iframe \u0438 \u0434\u0440.<\/p>\n<p>  <\/p>\n<p><strong>Nonce<\/strong><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTML\/Global_attributes\/nonce\">Nonce<\/a> \u2014 \u044d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0440\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 CSP \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0442\u044f CSP \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u0440\u0435\u0434\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 nonce \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 nonce<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 nonce \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>Nonce \u0434\u043e\u043b\u0436\u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f nonce \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ middleware.ts import { NextRequest, NextResponse } from 'next\/server'  export function middleware(request: NextRequest) {   const nonce = Buffer.from(crypto.randomUUID()).toString('base64')    const cspHeader = `     default-src 'self';     script-src 'self' 'nonce-${nonce}' 'strict-dynamic';     style-src 'self' 'nonce-${nonce}';     img-src 'self' blob: data:;     font-src 'self';     object-src 'none';     base-uri 'self';     form-action 'self';     frame-ancestors 'none';     block-all-mixed-content;     upgrade-insecure-requests; `    \/\/ \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u044b   const contentSecurityPolicyHeaderValue = cspHeader     .replace(\/\\s{2,}\/g, ' ')     .trim()    const requestHeaders = new Headers(request.headers)   requestHeaders.set('x-nonce', nonce)    requestHeaders.set(     'Content-Security-Policy',     contentSecurityPolicyHeaderValue   )    const response = NextResponse.next({     request: {       headers: requestHeaders,     },   })   response.headers.set(     'Content-Security-Policy',     contentSecurityPolicyHeaderValue   )    return response }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u041f\u0443\u0442\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>matcher<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const config = {   matcher: [     \/*      * \u0421\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441:      * - api (\u0440\u043e\u0443\u0442\u044b API)      * - _next\/static (\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b)      * - _next\/image (\u0444\u0430\u0439\u043b\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439)      * - favicon.ico      *\/     {       source: '\/((?!api|_next\/static|_next\/image|favicon.ico).*)',       missing: [         { type: 'header', key: 'next-router-prefetch' },         { type: 'header', key: 'purpose', value: 'prefetch' },       ],     },   ], }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0427\u0442\u0435\u043d\u0438\u0435 nonce<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c nonce \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>headers<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { headers } from 'next\/headers' import Script from 'next\/script'  export default function Page() {   const nonce = headers().get('x-nonce')    return (     &lt;Script       src=\"https:\/\/www.googletagmanager.com\/gtag\/js\"       strategy=\"afterInteractive\"       nonce={nonce}     \/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0411\u0435\u0437 nonce<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b nonce, \u0442\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a CSP \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const cspHeader = `   default-src 'self';   script-src 'self' 'unsafe-eval' 'unsafe-inline';   style-src 'self' 'unsafe-inline';   img-src 'self' blob: data:;   font-src 'self';   object-src 'none';   base-uri 'self';   form-action 'self';   frame-ancestors 'none';   block-all-mixed-content;   upgrade-insecure-requests; `  module.exports = {   async headers() {     return [       {         source: '\/(.*)',         headers: [           {             key: 'Content-Security-Policy',             value: cspHeader.replace(\/\\n\/g, '').trim(),           },         ],       },     ]   }, }<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"autentifikaciya\">\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 Next.js \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u0440\u0435\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li><em>\u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/em> \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0449\u0438\u0445 \u0435\u0433\u043e \u043b\u0438\u0447\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043f\u0430\u0440\u043e\u043b\u044f<\/li>\n<li><em>\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0435\u0439<\/em> \u2014 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438) \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438<\/li>\n<li><em>\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f<\/em> \u2014 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u0442\u043e\u0433\u043e, \u043a \u0447\u0435\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f)<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u043b\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441, \u0432\u0440\u043e\u0434\u0435 Google.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<ol>\n<li>OAuth\/OpenID Connect (OIDC) \u2014 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0442\u044c\u0438\u043c \u043b\u0438\u0446\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0438\u043c \u0443\u0447\u0435\u0442\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0425\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 \u0438 Single Sign-On (SSO). \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e OpenID Connect.<\/li>\n<li>\u0423\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (email + \u043f\u0430\u0440\u043e\u043b\u044c). \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0440 \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 \u0430\u0442\u0430\u043a \u0432\u0440\u043e\u0434\u0435 \u0444\u0438\u0448\u0438\u043d\u0433\u0430.<\/li>\n<li>\u0422\u043e\u043a\u0435\u043d\u044b. \u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 email \u0438\u043b\u0438 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0432 SMS. \u041f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u0430\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 email \u0438\u043b\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/li>\n<li>Passkey\/Webauthn. \u041a\u0440\u0438\u043f\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0438, \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u041f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u0430\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043e\u0440\u043c\u044b.<\/li>\n<li>\u0424\u043e\u0440\u043c\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e.<\/li>\n<li>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0432\u0435\u0440\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u0443\u044e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0432\u0435\u0440\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/login\/page.tsx import { authenticate } from '@\/app\/lib\/actions'  export default function Page() {   return (     &lt;form action={authenticate}>       &lt;input type=\"email\" name=\"email\" placeholder=\"Email\" required \/>       &lt;input type=\"password\" name=\"password\" placeholder=\"\u041f\u0430\u0440\u043e\u043b\u044c\" required \/>       &lt;button type=\"submit\">\u0412\u043e\u0439\u0442\u0438&lt;\/button>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u043e\u043b\u0435\u0439 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 email \u0438 \u043f\u0430\u0440\u043e\u043b\u044f. \u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043e\u043d\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e <code>authenticate<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/lib\/actions.ts 'use server'  import { signIn } from '@\/auth'  export async function authenticate(_currentState: unknown, formData: FormData) {   try {     await signIn('credentials', formData)   } catch (error) {     if (error.type) {       switch (error.type) {         case 'CredentialsSignin':           return '\u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.'         default:           return '\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a.'       }     }     throw error   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0444\u043e\u0440\u043c\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <code>useFormState<\/code> \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u0443\u043a <code>useFormStatus<\/code> \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u043e\u0440\u043c\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/login\/page.tsx 'use client'  import { authenticate } from '@\/app\/lib\/actions' import { useFormState, useFormStatus } from 'react-dom'  export default function Page() {   const [errorMessage, dispatch] = useFormState(authenticate, undefined)    return (     &lt;form action={dispatch}>       &lt;input type=\"email\" name=\"email\" placeholder=\"Email\" required \/>       &lt;input type=\"password\" name=\"password\" placeholder=\"\u041f\u0430\u0440\u043e\u043b\u044c\" required \/>       &lt;p>{errorMessage || \"\"}&lt;\/p>       &lt;LoginButton \/>     &lt;\/form>   ) }  function LoginButton() {   const { pending } = useFormStatus()    return (     &lt;button disabled={pending} type=\"submit\">       \u0412\u043e\u0439\u0442\u0438     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0441\u0435\u0449\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p><em>\u0417\u0430\u0449\u0438\u0442\u0430 \u0440\u043e\u0443\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0447\u0430\u0441\u0442\u044f\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430:<br \/> \n<ul>\n<li>\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>middleware.ts|js<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/li>\n<li>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u043e\u043a\u0435\u043d\u044b \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/li>\n<\/ul>\n<\/li>\n<li>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b:<br \/> \n<ul>\n<li>\u043d\u0435 \u0432\u0441\u0435 \u0440\u043e\u0443\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c\u0438. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>matcher<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430:<br \/> \n<ul>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u043e\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0440\u043e\u0443\u0442\u0430\u043c<\/li>\n<\/ul>\n<\/li>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0442\u043a\u0430\u0437\u0430 \u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0435:<br \/> \n<ul>\n<li>\u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import type { NextRequest } from 'next\/server'  export function middleware(request: NextRequest) {   const currentUser = request.cookies.get('currentUser')?.value    if (currentUser &amp;&amp; !request.nextUrl.pathname.startsWith('\/dashboard')) {     return Response.redirect(new URL('\/dashboard', request.url))   }    if (!currentUser &amp;&amp; !request.nextUrl.pathname.startsWith('\/login')) {     return Response.redirect(new URL('\/login', request.url))   } }  export const config = {   matcher: ['\/((?!api|_next\/static|_next\/image|.*\\\\.png$).*)'], }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>Response.redirect<\/code> \u0434\u043b\u044f \u0440\u0430\u043d\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0440\u043e\u0443\u0442\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>redirect<\/code>. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u043b\u0438 \u0438\u043b\u0438 \u0432 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { redirect } from 'next\/navigation'  export default function Page() {   \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f   const accessDenied = true   if (accessDenied) {     redirect('\/login')   }    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0449\u0438\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0435\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438<\/li>\n<li>\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430<\/li>\n<li><a href=\"https:\/\/nextjs.org\/blog\/security-nextjs-server-components-actions#data-access-layer\">\u0441\u043b\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c (DAL)<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0417\u0430\u0449\u0438\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u043e\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/lib\/actions.ts 'use server'  \/\/ ...  export async function serverAction() {   const session = await getSession()   const userRole = session?.user?.role    \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u044d\u0442\u0443 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e   if (userRole !== 'admin') {     throw new Error('\u041d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u043e\u043c.')   }    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts export async function GET() {   const session = await getSession()    \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d   if (!session) {     return new Response(null, { status: 401 })   }    \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u043e\u043c   if (session.user.role !== 'admin') {     return new Response(null, { status: 403 })   }    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 UI \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 UX \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/page.tsx export default function Dashboard() {   const session = await getSession()   const userRole = session?.user?.role    if (userRole === 'admin') {     return &lt;AdminDashboard \/> \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u043e\u0432   } else if (userRole === 'user') {     return &lt;UserDashboard \/> \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   } else {     return &lt;AccessDenied \/> \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0435\u0439 \u2014 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0438 \u0443\u0442\u0435\u0447\u043a\u0443 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/li>\n<li>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u043e\u043b\u044f\u043c\u0438 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0433\u0438\u0431\u043a\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0440\u043e\u043b\u0435\u0439 \u0434\u043b\u044f \u043b\u0435\u0433\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0438 \u0440\u043e\u043b\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/li>\n<li>\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0435\u0439<\/strong><\/p>\n<p>  <\/p>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0435\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u0447\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043a\u0430\u043a \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u0442\u0430\u043a \u0438 UX. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0435\u0441\u0441\u0438\u0435\u0439: \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0443\u043a\u0438 \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0411\u0414.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0435\u0441\u0441\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0443\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u043a\u0443\u043a\u0438. \u041e\u043d\u0438 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0433\u043e \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0443\u043a\u0438 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d\u044b \u0440\u0438\u0441\u043a\u0430\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0428\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0441\u0441\u0438\u0438 \u0432 \u043a\u0443\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0435\u0439 \u0437\u0430\u0449\u0438\u0442\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 \u043e\u0442 \u043d\u0435\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043a\u0443\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0440\u0430\u0434\u0435\u043d\u0430, \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u043d\u0435\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u0443\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (\u043f\u043e\u0440\u044f\u0434\u043a\u0430 4 \u041a\u0431, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430). \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 \u0447\u0430\u043d\u043a\u043e\u0432\u0430\u043d\u0438\u044f (\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438) \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043a\u0443\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043a\u0443\u043a\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { cookies } from 'next\/headers'  export async function handleLogin(sessionData) {   const encryptedSessionData = encrypt(sessionData) \/\/ \u0448\u0438\u0444\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0441\u0441\u0438\u0438    cookies().set('session', encryptedSessionData, {     httpOnly: true,     secure: process.env.NODE_ENV === 'production',     maxAge: 60 * 60 * 24 * 7, \/\/ \u043e\u0434\u043d\u0430 \u043d\u0435\u0434\u0435\u043b\u044f     path: '\/',   })    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0441\u0435\u0441\u0441\u0438\u0438, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u043c\u0441\u044f \u0432 \u043a\u0443\u043a\u0438, \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import { cookies } from 'next\/headers'  export async function getSessionData(req) {   const encryptedSessionData = cookies().get('session')?.value    return encryptedSessionData ? JSON.parse(decrypt(encryptedSessionData)) : null }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0421\u0435\u0441\u0441\u0438\u0438, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0411\u0414<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0441\u0441\u0438\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e ID \u0441\u0435\u0441\u0441\u0438\u0438. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442.\u0435. \u043d\u0435 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d\u044b \u0440\u0438\u0441\u043a\u0430\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0421\u0435\u0441\u0441\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0411\u0414 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438: \u0432 \u0411\u0414 \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0435\u043c \u0432 \u043a\u0443\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0438 \u0441\u0432\u043e\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. \u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0411\u0414 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0441\u0441\u0438\u0438. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0411\u0414.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import db from '.\/lib\/db'  export async function createSession(user) {   const sessionId = generateSessionId() \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 ID \u0441\u0435\u0441\u0441\u0438\u0438    await db.insertSession({ sessionId, userId: user.id, createdAt: new Date() })    return sessionId }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0438 \u0432 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0435 \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { cookies } from 'next\/headers' import db from '.\/lib\/db'  export async function getSession() {   const sessionId = cookies().get('sessionId')?.value    return sessionId ? await db.findSession(sessionId) : null }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u044b\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0438\u0437 \u043f\u0440\u043e\u0441\u0442\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/auth0.com\/docs\/quickstart\/webapp\/nextjs\/01-login\">Auth0<\/a><\/li>\n<li><a href=\"https:\/\/clerk.com\/docs\/quickstarts\/nextjs\">Clerk<\/a><\/li>\n<li><a href=\"https:\/\/kinde.com\/docs\/developer-tools\/nextjs-sdk\">Kinde<\/a><\/li>\n<li><a href=\"https:\/\/lucia-auth.com\/getting-started\/nextjs-app\">Lucia<\/a><\/li>\n<li><a href=\"https:\/\/authjs.dev\/guides\/upgrade-to-v5\">NextAuth.js<\/a><\/li>\n<li><a href=\"https:\/\/supabase.com\/docs\/guides\/getting-started\/quickstarts\/nextjs\">Supabase<\/a><\/li>\n<li><a href=\"https:\/\/stytch.com\/docs\/guides\/quickstarts\/nextjs\">Stytch<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vvo\/iron-session\">Iron Session<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"proizvodstvennyy-cheklist\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0447\u0435\u043a\u043b\u0438\u0441\u0442<\/h1>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435\u0433\u043e UX, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 Next.js \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u043d\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 JS \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0431\u043e\u0440\u043a\u0438 JS \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/li>\n<li>\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430. \u041a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430. \u0414\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443<\/li>\n<li>\u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u043e\u0433\u0434\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0440\u043e\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0440\u043e\u0443\u0442 \u043f\u043e\u0447\u0442\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c<\/li>\n<li>\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433. Next.js \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\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 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/li>\n<li>\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. Next.js \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \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, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0434\u0440. \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0432 \u0411\u0414. \u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \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 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 UX:<\/p>\n<p>  <\/p>\n<p><em>\u0420\u043e\u0443\u0442\u0438\u043d\u0433 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f UI \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code> \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439 \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432<\/li>\n<li>\u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435 \u043f\u0443\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043e\u0448\u0438\u0431\u043e\u043a<\/li>\n<li>\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u043e\u043c\u0443 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \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, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b <code>use client<\/code> \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/li>\n<li>\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 <code>cookies<\/code> \u0438 <code>headers<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u0440\u043e\u0443\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u043c. \u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 <code>Suspense<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0438\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u043b\u0438\u0448\u043d\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Suspense<\/code> \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0439 (\u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439) \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/li>\n<li>\u043f\u043e-\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0439\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>public<\/code> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>UI \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c, \u0438\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a<\/li>\n<li>\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0443\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/li>\n<li>\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Image<\/code><\/li>\n<li>\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Script<\/code><\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d <code>eslint-plugin-jsx-a11y<\/code> \u0434\u043b\u044f \u0440\u0430\u043d\u043d\u0435\u0433\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0437\u0430\u0449\u0438\u0449\u0430\u0439\u0442\u0435 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043f\u0443\u0442\u0435\u043c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/li>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u043f\u0440\u0430\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438<\/li>\n<li>\u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b <code>.env.*<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0444\u0430\u0439\u043b <code>.gitignore<\/code> \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 <code>NEXT_PUBLIC_<\/code><\/li>\n<li>\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Content Security Policy<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0438 SEO<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>Metadata API<\/code> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f OG \u0434\u043b\u044f \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0430\u0439\u043b\u044b <code>sitemap.xml<\/code> \u0438 <code>robots.txt<\/code> \u0434\u043b\u044f \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u043e\u0442\u0430\u043c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0442\u0438\u043f\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 TS \u0438 \u043f\u043b\u0430\u0433\u0438\u043d TS \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u043e\u043c<\/strong><\/p>\n<p>  <\/p>\n<p><em>Core Web Vitals<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Lighthouse<\/a> \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 &#171;\u0418\u043d\u043a\u043e\u0433\u043d\u0438\u0442\u043e&#187; \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f UX \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a <code>useReportWebVitals<\/code> \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 Core Web Vitals \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0410\u043d\u0430\u043b\u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d <code>@next\/bundle-analyzer<\/code> \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 JS<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<br \/> \n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\">Import Cost<\/a><\/li>\n<li><a href=\"https:\/\/packagephobia.com\/\">Package Phobia<\/a><\/li>\n<li><a href=\"https:\/\/bundlephobia.com\/\">Bundle Phobia<\/a><\/li>\n<li><a href=\"https:\/\/bundlejs.com\/\">bundlejs<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0446 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430, \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>Happy coding!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<blockquote><p><a href=\"https:\/\/t.me\/timewebru\"><b>\u041d\u043e\u0432\u043e\u0441\u0442\u0438, \u043e\u0431\u0437\u043e\u0440\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u044b \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Timeweb.Cloud \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435<\/b><\/a> <b>\u21a9<\/b><\/p><\/blockquote>\n<p><a href=\"https:\/\/timeweb.cloud\/?i=106909\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/b5\/pj\/of\/b5pjofdoxth14ro-rjsrn7sbmiy.png\" data-src=\"https:\/\/habrastorage.org\/webt\/b5\/pj\/of\/b5pjofdoxth14ro-rjsrn7sbmiy.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/810055\/\"> https:\/\/habr.com\/ru\/articles\/810055\/<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\"\/>  <\/p>\n<p>  Hello world!<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0442\u0440\u0435\u0442\u044c\u044e \u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/804663\/\">\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/808259\/\">\u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/my-js.org\/docs\/guide\/nextjs\/\">\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, Next.js \u2014 \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u0435\u0442\u0435 JavaScript \u0438 <a href=\"https:\/\/react.dev\/\">React<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f Next.js \u0432\u0435\u0440\u0441\u0438\u0438 14.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u044f \u043e\u043f\u0438\u0440\u0430\u043b\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u043e \u0432 &#171;\u043e\u0442\u0441\u0435\u0431\u044f\u0442\u0438\u043d\u0435&#187; \u043c\u043e\u0433 \u0438 \u043f\u0440\u0438\u0432\u0440\u0430\u0442\u044c (\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0447\u0435\u043f\u044f\u0442\u0430\u0442\u044c\u0441\u044f) ? \u041f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443 ?<\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u043e\u0447\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Next.js<\/a><\/li>\n<li><a href=\"https:\/\/www.codewithantonio.com\/\">\u041a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/a><\/li>\n<\/ul>\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-374555","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374555","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=374555"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374555\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=374555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=374555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}