{"id":372483,"date":"2024-05-21T05:13:20","date_gmt":"2024-05-21T05:13:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=372483"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=372483","title":{"rendered":"<span>\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e Next.js. 1\/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 \u043f\u0435\u0440\u0432\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\/808259\/\">\u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/810055\/\">\u0422\u0440\u0435\u0442\u044c\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%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#%D1%80%D0%BE%D1%83%D1%82%D0%B8%D0%BD%D0%B3\">\u0420\u043e\u0443\u0442\u0438\u043d\u0433<\/a><br \/> \n<ul>\n<li><a href=\"#%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D1%8B\">\u041e\u0441\u043d\u043e\u0432\u044b<\/a><\/li>\n<li><a href=\"#%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%80%D0%BE%D1%83%D1%82%D0%BE%D0%B2\">\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u043e\u0443\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%B8-%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D1%8B\">\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043c\u0430\u043a\u0435\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F\">\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#ui-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8-%D0%B8-%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%B2%D0%B0%D1%8F-%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D0%B0-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85\">UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/li>\n<li><a href=\"#%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5\">\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B-%D1%80%D0%BE%D1%83%D1%82%D0%BE%D0%B2\">\u0413\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#%D0%BE%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0-%D0%B8-%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%BD%D0%BE%D0%B5-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2\">\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432<\/a><\/li>\n<li><a href=\"#%D0%B4%D0%B8%D0%BD%D0%B0%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5-%D1%80%D0%BE%D1%83%D1%82%D1%8B\">\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%B0%D1%80%D0%B0%D0%BB%D0%BB%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D1%80%D0%BE%D1%83%D1%82%D1%8B\">\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%B2%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5-%D1%80%D0%BE%D1%83%D1%82%D1%8B\">\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0440\u043e\u0443\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8-%D1%80%D0%BE%D1%83%D1%82%D0%B0\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%BE%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8\">\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"vvedenie\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Next.js?<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a React \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 (fullstack) \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 UI (user interface \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441) \u0438 Next.js \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c Next.js \u0442\u0430\u043a\u0436\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 React, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u0431\u043e\u0440\u043a\u0430, \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0434\u0440. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0435 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 Next.js:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c<\/th>\n<th>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f (\u0434\u0430\u043b\u0435\u0435 \u0442\u0430\u043a\u0436\u0435 \u2014 \u0440\u043e\u0443\u0442\u0438\u043d\u0433)<\/td>\n<td>\u041e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 (\u0434\u0430\u043b\u0435\u0435 \u0442\u0430\u043a\u0436\u0435 \u2014 \u0440\u043e\u0443\u0442\u0435\u0440), \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442\u044b (layouts), \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0434\u0440.<\/td>\n<\/tr>\n<tr>\n<td>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/td>\n<td>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 (edge) \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 Next.js \u0438 \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f Node.js<\/td>\n<\/tr>\n<tr>\n<td>\u0417\u0430\u043f\u0440\u043e\u0441\/\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n<td>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>async\/await<\/code> \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a> \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n<\/tr>\n<tr>\n<td>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/td>\n<td>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043c\u043e\u0434\u0443\u043b\u0438 CSS, TailwindCSS \u0438 CSS-\u0432-JS<\/td>\n<\/tr>\n<tr>\n<td>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/td>\n<td>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/core-web-vitals\">Core Web Vitals<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 UX (user experience \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442)<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a><\/td>\n<td>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 TS \u0441 \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d TS \u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>Node.js 18.17+<\/li>\n<li>macOS, Windows (\u0432\u043a\u043b\u044e\u0447\u0430\u044f WSL) \u0438 Linux<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \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 CLI (command line interface \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438) <code>create-next-app<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx create-next-app@latest<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/nextjs.org\/docs\/getting-started\/installation#manual-installation\">\u0420\u0443\u0447\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Next.js<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Next.js<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ej\/jv\/5f\/ejjv5fo9n1e2rd6petvg3yyrdo4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ej\/jv\/5f\/ejjv5fo9n1e2rd6petvg3yyrdo4.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>app<\/td>\n<td>\u0420\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>pages<\/td>\n<td>\u0420\u043e\u0443\u0442\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/td>\n<\/tr>\n<tr>\n<td>public<\/td>\n<td>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b<\/td>\n<\/tr>\n<tr>\n<td>src<\/td>\n<td>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0424\u0430\u0439\u043b\u044b \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u0430\u0439\u043b\u044b \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432 (middleware \u2014 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435), \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0424\u0430\u0439\u043b<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>next.config.js<\/td>\n<td>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Next.js<\/td>\n<\/tr>\n<tr>\n<td>package.json<\/td>\n<td>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/td>\n<\/tr>\n<tr>\n<td>instrumentation.ts<\/td>\n<td>\u0422\u0435\u043b\u0435\u043c\u0435\u0442\u0440\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>middleware.ts<\/td>\n<td>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0438<\/td>\n<\/tr>\n<tr>\n<td>.env<\/td>\n<td>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>.env.local<\/td>\n<td>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>.env.production<\/td>\n<td>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>.env.development<\/td>\n<td>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>.eslintrc.json<\/td>\n<td>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 ESLint<\/td>\n<\/tr>\n<tr>\n<td>.gitignore<\/td>\n<td>\u0424\u0430\u0439\u043b\u044b \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 [Git]()<\/td>\n<\/tr>\n<tr>\n<td>next-env.d.ts<\/td>\n<td>\u0424\u0430\u0439\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0439 \u0442\u0438\u043f\u043e\u0432 Next.js<\/td>\n<\/tr>\n<tr>\n<td>tsconfig.json<\/td>\n<td>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 TypeScript<\/td>\n<\/tr>\n<tr>\n<td>jsconfig.json<\/td>\n<td>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 JavaScript<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043e \u0444\u0430\u0439\u043b\u0430\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u043e\u0443\u0442\u0435\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u043e\u0432 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<p><em>\u0424\u0430\u0439\u043b\u044b \u0440\u043e\u0443\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0424\u0430\u0439\u043b<\/th>\n<th>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>layout<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>\u041c\u0430\u043a\u0435\u0442<\/td>\n<\/tr>\n<tr>\n<td>page<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/td>\n<\/tr>\n<tr>\n<td>loading<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/td>\n<\/tr>\n<tr>\n<td>not-found<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>UI \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/td>\n<\/tr>\n<tr>\n<td>error<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>UI \u043e\u0448\u0438\u0431\u043a\u0438<\/td>\n<\/tr>\n<tr>\n<td>global-error<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>UI \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438<\/td>\n<\/tr>\n<tr>\n<td>route<\/td>\n<td>.js .ts<\/td>\n<td>\u041a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 API<\/td>\n<\/tr>\n<tr>\n<td>template<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043c\u0430\u043a\u0435\u0442<\/td>\n<\/tr>\n<tr>\n<td>default<\/td>\n<td>.js .jsx .tsx<\/td>\n<td>\u0420\u0435\u0437\u0435\u0440\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>folder<\/code><\/td>\n<td>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430<\/td>\n<\/tr>\n<tr>\n<td><code>folder\/folder<\/code><\/td>\n<td>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>[folder]<\/code><\/td>\n<td>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/td>\n<\/tr>\n<tr>\n<td><code>[...folder]<\/code><\/td>\n<td>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0430<\/td>\n<\/tr>\n<tr>\n<td><code>[[..folder]]<\/code><\/td>\n<td>\u0421\u0435\u0433\u043c\u0435\u043d\u0442 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0430 (catch-all route)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0413\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>(folder)<\/code><\/td>\n<td>\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432 \u0431\u0435\u0437 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 (\u0432\u0438\u0434 URL (uniform resource locator \u2014 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u0441\u0442\u043e\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u0430))<\/td>\n<\/tr>\n<tr>\n<td><code>_folder<\/code><\/td>\n<td>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f, \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>@folder<\/code><\/td>\n<td>\u0418\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0442<\/td>\n<\/tr>\n<tr>\n<td><code>(.)folder<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0440\u043e\u0443\u0442\u0430 \u0442\u043e\u0433\u043e \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u044f<\/td>\n<\/tr>\n<tr>\n<td><code>(..)folder<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0440\u043e\u0443\u0442\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f<\/td>\n<\/tr>\n<tr>\n<td><code>(..)(..)folder<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0440\u043e\u0443\u0442\u0430 \u043d\u0430 \u0434\u0432\u0430 \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u044b\u0448\u0435<\/td>\n<\/tr>\n<tr>\n<td><code>(...)folder<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0440\u043e\u0443\u0442\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043e \u0444\u0430\u0439\u043b\u0430\u0445 \u0441 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0418\u043a\u043e\u043d\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0424\u0430\u0439\u043b<\/th>\n<th>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>favicon<\/td>\n<td>.ico<\/td>\n<td>\u0424\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0430<\/td>\n<\/tr>\n<tr>\n<td>icon<\/td>\n<td>.ico .jpg .jpeg .png .svg<\/td>\n<td>\u0418\u043a\u043e\u043d\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>icon<\/td>\n<td>.js .ts .tsx<\/td>\n<td>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/td>\n<\/tr>\n<tr>\n<td>apple-icon<\/td>\n<td>.jpg .jpeg, .png<\/td>\n<td>\u0418\u043a\u043e\u043d\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Apple<\/td>\n<\/tr>\n<tr>\n<td>apple-icon<\/td>\n<td>.js .ts .tsx<\/td>\n<td>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Apple<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f Open Graph \u0438 Twitter<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0424\u0430\u0439\u043b<\/th>\n<th>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>opengraph-image<\/td>\n<td>.jpg .jpeg .png .gif<\/td>\n<td>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Open Graph<\/td>\n<\/tr>\n<tr>\n<td>opengraph-image<\/td>\n<td>.js .ts .tsx<\/td>\n<td>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Open Graph<\/td>\n<\/tr>\n<tr>\n<td>twitter-image<\/td>\n<td>.jpg .jpeg .png .gif<\/td>\n<td>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Twitter<\/td>\n<\/tr>\n<tr>\n<td>twitter-image<\/td>\n<td>.js .ts .tsx<\/td>\n<td>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>SEO (search engine optimization \u2014 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0432\u0438\u0436\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430)<\/em><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0424\u0430\u0439\u043b<\/th>\n<th>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>sitemap<\/td>\n<td>.xml<\/td>\n<td>Sitemap<\/td>\n<\/tr>\n<tr>\n<td>sitemap<\/td>\n<td>.js .ts<\/td>\n<td>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 Sitemap<\/td>\n<\/tr>\n<tr>\n<td>robots<\/td>\n<td>.txt<\/td>\n<td>Robots<\/td>\n<\/tr>\n<tr>\n<td>robots<\/td>\n<td>.js .ts<\/td>\n<td>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 Robots<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<h1 id=\"routing\">\u0420\u043e\u0443\u0442\u0438\u043d\u0433<\/h1>\n<p>  <\/p>\n<h2 id=\"osnovy\">\u041e\u0441\u043d\u043e\u0432\u044b<\/h2>\n<p>  <\/p>\n<p><strong>\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/strong><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/z2\/v0\/dk\/z2v0dkcfby5dq7r88pefxax_qfo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/z2\/v0\/dk\/z2v0dkcfby5dq7r88pefxax_qfo.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>tree (\u0434\u0435\u0440\u0435\u0432\u043e) \u2014 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435 \u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0434\u0440.<\/li>\n<li>subtree (\u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e) \u2014 \u0447\u0430\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u043c \u043a\u043e\u0440\u043d\u0435 (root) \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0432 \u043b\u0438\u0441\u0442\u044c\u044f\u0445 (leaves)<\/li>\n<li>root (\u043a\u043e\u0440\u0435\u043d\u044c) \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u0443\u0437\u0435\u043b \u0434\u0435\u0440\u0435\u0432\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442<\/li>\n<li>leaf (\u043b\u0438\u0441\u0442) \u2014 \u0443\u0437\u0435\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 URL<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/gp\/g9\/ro\/gpg9romlnyiqqvw6uhwwx6jw_b0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/gp\/g9\/ro\/gpg9romlnyiqqvw6uhwwx6jw_b0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>URL segment (\u0441\u0435\u0433\u043c\u0435\u043d\u0442 URL) \u2014 \u0447\u0430\u0441\u0442\u044c URL, \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u043b\u044d\u0448\u0435\u043c<\/li>\n<li>URL path (\u043f\u0443\u0442\u044c URL) \u2014 \u0447\u0430\u0441\u0442\u044c URL, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0437\u0430 \u0434\u043e\u043c\u0435\u043d\u043e\u043c (\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432)<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0420\u043e\u0443\u0442\u0435\u0440 <code>app<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0432\u0435\u0440\u0441\u0438\u0438 13 Next.js \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b \u043d\u043e\u0432\u044b\u0439 \u0440\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0431\u0449\u0438\u0435 (shared) \u043c\u0430\u043a\u0435\u0442\u044b, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0434\u0440.<\/p>\n<p>  <\/p>\n<p>\u0420\u043e\u0443\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>. \u0420\u0430\u043d\u044c\u0448\u0435 \u0442\u0430\u043a\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0435\u0439 \u044f\u0432\u043b\u044f\u043b\u0430\u0441\u044c <code>pages<\/code>. \u042d\u0442\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0441 <code>pages<\/code> \u043d\u0430 <code>app<\/code> (\u0438\u043b\u0438 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b Next.js), \u043d\u043e <code>app<\/code> \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 <code>app<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0420\u043e\u043b\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u0438 \u0444\u0430\u0439\u043b\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0433\u0434\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \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 \u0440\u043e\u0443\u0442\u043e\u0432. \u0420\u043e\u0443\u0442 \u2014 \u044d\u0442\u043e \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043e\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043b\u0438\u0441\u0442\u043e\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u0444\u0430\u0439\u043b <code>page.js<\/code><\/li>\n<li>\u0444\u0430\u0439\u043b\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0432 \u0440\u043e\u0443\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u043c URL.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/5w\/2t\/mi\/5w2tmi4whqxjodilm6q1o2pufp4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/5w\/2t\/mi\/5w2tmi4whqxjodilm6q1o2pufp4.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0440\u043e\u0443\u0442 <code>\/dashboard\/settings<\/code> \u043f\u0443\u0442\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u043d\u043e\u0432\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>app<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0420\u043e\u0443\u0442 <code>\/dashboard\/settings<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>\/<\/code> (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442)<\/li>\n<li><code>dashboard<\/code> (\u0441\u0435\u0433\u043c\u0435\u043d\u0442)<\/li>\n<li><code>settings<\/code> (\u043b\u0438\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442)<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043e \u0444\u0430\u0439\u043b\u0430\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>layout<\/td>\n<td>\u041e\u0431\u0449\u0438\u0439 UI \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432<\/td>\n<\/tr>\n<tr>\n<td>page<\/td>\n<td>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 UI \u0440\u043e\u0443\u0442\u0430. \u0414\u0435\u043b\u0430\u0435\u0442 \u0440\u043e\u0443\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c (\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c)<\/td>\n<\/tr>\n<tr>\n<td>loading<\/td>\n<td>UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432<\/td>\n<\/tr>\n<tr>\n<td>not-found<\/td>\n<td>UI \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432<\/td>\n<\/tr>\n<tr>\n<td>error<\/td>\n<td>UI \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432<\/td>\n<\/tr>\n<tr>\n<td>global-error<\/td>\n<td>UI \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438<\/td>\n<\/tr>\n<tr>\n<td>route<\/td>\n<td>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 API<\/td>\n<\/tr>\n<tr>\n<td>template<\/td>\n<td>\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 UI \u043c\u0430\u043a\u0435\u0442\u0430<\/td>\n<\/tr>\n<tr>\n<td>default<\/td>\n<td>\u0420\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 UI \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <code>.js,<\/code> <code>.jsx<\/code> \u0438\u043b\u0438 <code>.tsx<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430, \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n<p>  <\/p>\n<p>&#8212;<code>layout.js<\/code><br \/>  &#8212;<code>template.js<\/code><br \/>  &#8212;<code>error.js<\/code> (React error boundary (\u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044c))<br \/>  &#8212;<code>loading.js<\/code> (React suspense boundary (\u0434\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0434\u0440.))<br \/>  &#8212;<code>not-found.js<\/code> (\u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044c)<br \/>  &#8212;<code>page.js<\/code> \u0438\u043b\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 <code>layout.js<\/code><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ln\/te\/5y\/lnte5ynctiqtdrbgixsoxq2h6jg.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ln\/te\/5y\/lnte5ynctiqtdrbgixsoxq2h6jg.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u0440\u043e\u0443\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/5y\/9g\/ff\/5y9gff4u0k8oqma9vfvriwwmwpy.png\" data-src=\"https:\/\/habrastorage.org\/webt\/5y\/9g\/ff\/5y9gff4u0k8oqma9vfvriwwmwpy.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u0442\u0438\u043b\u0438, \u0442\u0435\u0441\u0442\u044b \u0438 \u0434\u0440.) \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 <code>page.js<\/code> \u0438 <code>route.js<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/u9\/ru\/ik\/u9ruik9kvms4julx5goa56rxhzi.png\" data-src=\"https:\/\/habrastorage.org\/webt\/u9\/ru\/ik\/u9ruik9kvms4julx5goa56rxhzi.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 (view). \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e. \u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e. \u041f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (dashboard)<\/li>\n<li>\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u043e\u0443\u0442 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430. \u041e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0431\u043e\u0433\u0430\u0442\u044b\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 UI.<\/p>\n<p>  <\/p>\n<h2 id=\"opredelenie-routov\">\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u043e\u0443\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u043e\u0443\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 Next.js \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u043c URL. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/bl\/eu\/lk\/bleulkwyqf5sjaad7oe-zhwzvji.png\" data-src=\"https:\/\/habrastorage.org\/webt\/bl\/eu\/lk\/bleulkwyqf5sjaad7oe-zhwzvji.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>page.js<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/tp\/9l\/lp\/tp9llp30ugw0vpkvd2oho0iqk_8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/tp\/9l\/lp\/tp9llp30ugw0vpkvd2oho0iqk_8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 URL <code>\/dashboard\/analytics<\/code> \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043d\u0435\u0442 \u0444\u0430\u0439\u043b\u0430 <code>page.js<\/code>. \u042d\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \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 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\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 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 UI<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b. \u0421\u0430\u043c\u044b\u043c\u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e UI \u0440\u043e\u0443\u0442\u0430 \u0438 \u043c\u0430\u043a\u0435\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0430\u0439\u043b <code>page.js<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>app<\/code> \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx export default function Page() {   return &lt;h1>\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"stranicy-i-makety\">\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043c\u0430\u043a\u0435\u0442\u044b<\/h2>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u2014 \u044d\u0442\u043e UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>page.js<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <code>index<\/code> \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0430\u0439\u043b <code>page.js<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>app<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/mi\/1b\/0x\/mi1b0xozkcc4r_actymh6nrouas.png\" data-src=\"https:\/\/habrastorage.org\/webt\/mi\/1b\/0x\/mi1b0xozkcc4r_actymh6nrouas.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ `app\/page.tsx` - \u044d\u0442\u043e UI \u0434\u043b\u044f URL `\/` export default function Page() {   return &lt;h1>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041c\u0430\u043a\u0435\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0430\u043a\u0435\u0442 \u2014 \u044d\u0442\u043e UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432. \u041f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 (\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438) \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f, \u043e\u043d \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0438 \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e. \u041c\u0430\u043a\u0435\u0442\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041c\u0430\u043a\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>layout.js<\/code>. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u043e\u043f <code>children<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f (populate) \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043c\u0430\u043a\u0435\u0442\u043e\u043c (\u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438) \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 <code>\/dashboard<\/code> \u0438 <code>\/dashboard\/settings<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sr\/8f\/ky\/sr8fkyqys0wh3mop7kdemmhzzd4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sr\/8f\/ky\/sr8fkyqys0wh3mop7kdemmhzzd4.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx export default function DashboardLayout({   children, \/\/ \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 }: {   children: React.ReactNode }) {   return (     &lt;section>       {\/* \u041e\u0431\u0449\u0438\u0439 UI, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0430\u043f\u043a\u0430 \u0438\u043b\u0438 \u0431\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c *\/}       &lt;nav>&lt;\/nav>        {children}     &lt;\/section>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439)<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u0440\u043e\u0443\u0442\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e\u0442 \u043c\u0430\u043a\u0435\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u0435\u0433\u0438 <code>html<\/code> \u0438 <code>body<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 HTML, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\">       &lt;body>         {\/* UI \u043c\u0430\u043a\u0435\u0442\u0430 *\/}         &lt;main>{children}&lt;\/main>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u0430\u043a\u0435\u0442\u044b \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043d\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0432 \u043f\u0440\u043e\u043f <code>children<\/code>. \u041c\u0430\u043a\u0435\u0442\u044b \u043c\u043e\u0433\u0443 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>layout.js<\/code> \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438).<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>\/dashboard<\/code> \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>layout.js<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>dashboard<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sa\/z2\/0l\/saz20lwavirtfffmcikwy8ntul0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sa\/z2\/0l\/saz20lwavirtfffmcikwy8ntul0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/layout.tsx export default function DashboardLayout({   children, }: {   children: React.ReactNode }) {   return &lt;section>{children}&lt;\/section> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 (<code>app\/layout.js<\/code>) \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (<code>app\/dashboard\/layout.js<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 <code>app\/dashboard\/*<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0432\u0430 \u043c\u0430\u043a\u0435\u0442\u0430 \u0431\u0443\u0434\u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u044b \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/_h\/97\/ki\/_h97kivmokylsvdo9najsxzkkd8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/_h\/97\/ki\/_h97kivmokylsvdo9najsxzkkd8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0428\u0430\u0431\u043b\u043e\u043d\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u044b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \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 \u0440\u043e\u0443\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043b\u044f\u0442 \u0448\u0430\u0431\u043b\u043e\u043d, \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM (document object model \u2014 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430) \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0437\u0430\u043d\u043e\u0432\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u043c\u0430\u043a\u0435\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0439 \u043e\u0442 <code>useEffect<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b) \u0438 <code>useState<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438)<\/li>\n<li>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/react.dev\/reference\/react\/Suspense\">Suspense<\/a> \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043c\u0430\u043a\u0435\u0442\u0430, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0414\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>template.js<\/code>. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u043e\u043f <code>children<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/k1\/3w\/fx\/k13wfxykkyviqsz5l7fjqjdevge.png\" data-src=\"https:\/\/habrastorage.org\/webt\/k1\/3w\/fx\/k13wfxykkyviqsz5l7fjqjdevge.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/template.tsx export default function Template({ children }: { children: React.ReactNode }) {   return &lt;div>{children}&lt;\/div> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0448\u0430\u0431\u043b\u043e\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043c\u0430\u043a\u0435\u0442\u043e\u043c \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438. \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Layout>   {\/* \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 *\/}   &lt;Template key={routeParam}>{children}&lt;\/Template> &lt;\/Layout><\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/strong><\/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\u044b <code>head<\/code>, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>title<\/code> \u0438 <code>meta<\/code>, \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>metadata<\/code> \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>generateMetadata<\/code> \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 <code>layout.js<\/code> \u0438\u043b\u0438 <code>page.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import { Metadata } from 'next'  export const metadata: Metadata = {   title: 'Next.js', }  export default function Page() {   return '...' }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"navigaciya\">\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 4 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code><\/li>\n<li>\u0445\u0443\u043a <code>useRouter<\/code> (\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b)<\/li>\n<li>\u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>redirect<\/code> (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b)<\/li>\n<li>\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <code>History API<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code><\/strong><\/p>\n<p>  <\/p>\n<p><code>Link<\/code> \u2014 \u044d\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0449\u0438\u0439 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>a<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \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 (prefetching) \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438. \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0432 Next.js.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 <code>next\/link<\/code> \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u043f <code>href<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import Link from 'next\/link'  export default function Page() {   return &lt;Link href=\"\/dashboard\">\u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f&lt;\/Link> }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/em><\/p>\n<p>  <\/p>\n<p><em>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u044b \u0438 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044e \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0441\u044b\u043b\u043e\u043a. \u041f\u0440\u0438\u043c\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0441\u0442\u043e\u0432 \u0431\u043b\u043e\u0433\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/blog\/PostList.js import Link from 'next\/link'  export default function PostList({ posts }) {   return (     &lt;ul>       {posts.map((post) => (         &lt;li key={post.id}>           &lt;Link href={`\/blog\/${post.slug}`}>{post.title}&lt;\/Link>         &lt;\/li>       ))}     &lt;\/ul>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <code>usePathname<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u043a \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 <code>pathname<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043f\u0430 <code>href<\/code> \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/components\/links.tsx 'use client'  import { usePathname } from 'next\/navigation' import Link from 'next\/link'  export function Links() {   const pathname = usePathname()    return (     &lt;nav>       &lt;ul>         &lt;li>           &lt;Link className={`link ${pathname === '\/' ? 'active' : ''}`} href=\"\/\">             \u0413\u043b\u0430\u0432\u043d\u0430\u044f           &lt;\/Link>         &lt;\/li>         &lt;li>           &lt;Link             className={`link ${pathname === '\/about' ? 'active' : ''}`}             href=\"\/about\"           >             \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b           &lt;\/Link>         &lt;\/li>       &lt;\/ul>     &lt;\/nav>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043a <code>id<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043f\u0435\u0440\u0435\u0434-\u043d\u0430\u0437\u0430\u0434.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 <code>id<\/code> \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0445\u044d\u0448 (<code>#<\/code>) \u043a URL \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0445\u044d\u0448 \u0432 \u043f\u0440\u043e\u043f <code>href<\/code>. \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>a<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Link href=\"\/dashboard#settings\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438&lt;\/Link>  \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 &lt;a href=\"\/dashboard#settings\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438&lt;\/a><\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>scroll={false}<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code> \u0438\u043b\u0438 <code>scroll: false<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434\u044b <code>router.push<\/code> \u0438\u043b\u0438 <code>router.replace<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next\/link &lt;Link href=\"\/dashboard\" scroll={false}>   \u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f &lt;\/Link><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ useRouter import { useRouter } from 'next\/navigation'  const router = useRouter()  router.push('\/dashboard', { scroll: false })<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0425\u0443\u043a <code>useRouter<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0425\u0443\u043a <code>useRouter<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u043e\u0443\u0442\u044b \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\">\/\/ app\/page.tsx 'use client'  import { useRouter } from 'next\/navigation'  export default function Page() {   const router = useRouter()    return (     &lt;button type=\"button\" onClick={() => router.push('\/dashboard')}>       \u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>redirect<\/code><\/strong><\/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 \u0432\u043c\u0435\u0441\u0442\u043e \u0445\u0443\u043a\u0430 <code>useRouter<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>redirect<\/code> \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/team\/[id]\/page.tsx import { redirect } from 'next\/navigation'  async function fetchTeam(id: string) {   const res = await fetch('https:\/\/...')   if (!res.ok) return undefined   return res.json() }  export default async function Profile({ params }: { params: { id: string } }) {   const team = await fetchTeam(params.id)    if (!team) {     redirect('\/login')   }    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <code>History API<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History\/pushState\">window.history.pushState<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History\/replaceState\">window.history.replaceState<\/a> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0435\u043a\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u0437\u043e\u0432\u044b \u043c\u0435\u0442\u043e\u0434\u043e\u0432 <code>pushState<\/code> \u0438 <code>replaceState<\/code> \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 \u0440\u043e\u0443\u0442\u0435\u0440 Next.js, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u0445\u0443\u043a\u0430\u043c\u0438 <code>usePathname<\/code> \u0438 <code>useSearchParams<\/code>.<\/p>\n<p>  <\/p>\n<p><em><code>window.history.pushState<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u0442\u0435\u043a \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use client'  import { useSearchParams } from 'next\/navigation'  export default function SortProducts() {   const searchParams = useSearchParams()    function updateSorting(sortOrder: string) {     const params = new URLSearchParams(searchParams.toString())     params.set('sort', sortOrder)     window.history.pushState(null, '', `?${params.toString()}`)   }    return (     &lt;>       &lt;button onClick={() => updateSorting('asc')}>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0443\u0431\u044b\u0432\u0430\u043d\u0438\u044e&lt;\/button>       &lt;button onClick={() => updateSorting('desc')}>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u044e&lt;\/button>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>window.history.replaceState<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u0442\u0435\u043a\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use client'  import { usePathname } from 'next\/navigation'  export function LocaleSwitcher() {   const pathname = usePathname()    function switchLocale(locale: string) {     \/\/ \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, '\/en\/about' \u0438\u043b\u0438 '\/fr\/contact'     const newPath = `\/${locale}${pathname}`     window.history.replaceState(null, '', newPath)   }    return (     &lt;>       &lt;button onClick={() => switchLocale('en')}>\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439&lt;\/button>       &lt;button onClick={() => switchLocale('fr')}>\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0438\u0439&lt;\/button>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f?<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 (code splitting) \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430. \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 Next.js \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 (prefetching) \u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u2014 \u044d\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043e\u043f\u044b\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<p><em>1. \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 (chunks) \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \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.<\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u0434 \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><em>2. \u041f\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<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\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 \u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \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 \u0440\u043e\u0443\u0442\u0430 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u0440\u043e\u0443\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/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 \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\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \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 \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/li>\n<li>\u043c\u0435\u0442\u043e\u0434 <code>router.prefetch<\/code> \u2014 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \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\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u043e\u0443\u0442\u0435\u0440, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0445\u0443\u043a\u043e\u043c <code>useRouter<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <code>Link<\/code> \u0432 \u0447\u0430\u0441\u0442\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\u0430\u0437\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>prefetch<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>true<\/code>. \u0412\u0435\u0441\u044c \u0440\u043e\u0443\u0442 \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\u0441\u044f \u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/li>\n<li>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 <code>loading.js<\/code> \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\u0441\u044f \u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 <code>30 \u0441\u0435\u043a\u0443\u043d\u0434<\/code>. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0446\u0435\u043d\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u0441\u0435\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043a\u043b\u0438\u043a\u0430 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\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\u0438\u0442\u044c \u043f\u0443\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <code>prefetch<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code>.<\/p>\n<p>  <\/p>\n<p><em>3. \u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u0435\u0448 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0435\u0448\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440\u0430 (router cache). \u041f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0443\u0442\u0430 \u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0435\u0448\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2014 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \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 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p><em>4. \u0427\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/em><\/p>\n<p>  <\/p>\n<p>\u0427\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0430 \u043b\u044e\u0431\u044b\u0435 \u043e\u0431\u0449\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u043c\u0438 \u0440\u043e\u0443\u0442\u0430\u043c\u0438, <code>\/dashboard\/settings<\/code> \u0438 <code>\/dashboard\/analytics<\/code>, \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <code>settings<\/code> \u0438 <code>analytics<\/code>, \u0430 \u043e\u0431\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 <code>dashboard<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/yv\/qr\/l2\/yvqrl2mnjieusl6cgotiakvkl0e.png\" data-src=\"https:\/\/habrastorage.org\/webt\/yv\/qr\/l2\/yvqrl2mnjieusl6cgotiakvkl0e.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0411\u0435\u0437 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u0436\u0434\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p><em>5. \u041c\u044f\u0433\u043a\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 &#171;\u0436\u0435\u0441\u0442\u043a\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e&#187; (hard navigation) \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. \u0420\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Next.js \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 &#171;\u043c\u044f\u0433\u043a\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e&#187; (soft navigation) \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0443\u0442\u0430 (\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433). \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><em>6. \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u043f\u0435\u0440\u0435\u0434-\u043d\u0430\u0437\u0430\u0434<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Next.js \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043f\u0435\u0440\u0435\u0434-\u043d\u0430\u0437\u0430\u0434 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0438\u0437 \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"ui-zagruzki-i-potokovaya-peredacha-dannyh\">UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>  <\/p>\n<p>\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <code>loading.js<\/code> \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0439 UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Suspense<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430. \u041d\u043e\u0432\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/d5\/og\/uk\/d5oguk3akkgohrr9haovpk_5pg0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/d5\/og\/uk\/d5oguk3akkgohrr9haovpk_5pg0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u2014 \u044d\u0442\u043e \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u043a\u0435\u043b\u0435\u0442\u044b \u0438 \u0441\u043f\u0438\u043d\u0435\u0440\u044b \u0438\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043e\u0431\u043b\u043e\u0436\u043a\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0434\u0440. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0439 UX.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 <code>loading.js<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ih\/mk\/-h\/ihmk-hbrlgb5rbn9rtqap5fly3k.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ih\/mk\/-h\/ihmk-hbrlgb5rbn9rtqap5fly3k.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function Loading() {   \/\/ \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u044e\u0431\u043e\u0439 UI \u0432\u043d\u0443\u0442\u0440\u044c `Loading`, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u0441\u043a\u0435\u043b\u0435\u0442   return &lt;LoadingSkeleton \/> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0442\u043e\u0439 \u0436\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>loading.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d \u0432 <code>layout.js<\/code>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c <code>page.js<\/code> \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Suspense<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/0k\/0x\/4n\/0k0x4n4mev2tuvlxef4-xd_cbue.png\" data-src=\"https:\/\/habrastorage.org\/webt\/0k\/0x\/4n\/0k0x4n4mev2tuvlxef4-xd_cbue.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Suspense<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a <code>loading.js<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c <code>Suspense<\/code> \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 UI. \u0420\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 (streaming, \u0434\u0430\u043b\u0435\u0435 \u0442\u0430\u043a\u0436\u0435 \u2014 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433) \u043a\u0430\u043a \u0434\u043b\u044f Node.js, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433?<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u0432 React \u0438 Next.js, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (server side rendering, SSR) \u0438 \u0435\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 SSR \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0412\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/li>\n<li>\u0421\u0435\u0440\u0432\u0435\u0440 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 HTML \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>HTML, CSS \u0438 JavaScript \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/li>\n<li>\u041d\u0435\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 UI \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e HTML \u0438 CSS.<\/li>\n<li>React <a href=\"https:\/\/react.dev\/reference\/react-dom\/client\/hydrateRoot#hydrating-server-rendered-html\">\u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442<\/a> UI \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c.<\/li>\n<\/ol>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/m-\/u8\/ws\/m-u8ws9cerlyybqo8vtfow_id1y.png\" data-src=\"https:\/\/habrastorage.org\/webt\/m-\/u8\/ws\/m-u8ws9cerlyybqo8vtfow_id1y.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u0448\u0430\u0433\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u043c\u0438. \u0421\u0435\u0440\u0432\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c HTML \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 React \u043c\u043e\u0436\u0435\u0442 \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u0434\u0430 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>SSR \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React \u0438 Next.js \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0443\u0442\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ma\/uq\/id\/mauqidvpbct2dkkumsqjghs9yca.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ma\/uq\/id\/mauqidvpbct2dkkumsqjghs9yca.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0431\u0438\u0442\u044c HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 (chunks) \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e-\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/0f\/wl\/ze\/0fwlze3c_7fwuckkyikhjpitm2u.png\" data-src=\"https:\/\/habrastorage.org\/webt\/0f\/wl\/ze\/0fwlze3c_7fwuckkyikhjpitm2u.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0431\u0435\u0437 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f UI.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e React, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a &#171;\u0447\u0430\u043d\u043a&#187; (chunk \u2014 \u0447\u0430\u0441\u0442\u044c). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0432\u044b\u0441\u0448\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0442\u043e\u0432\u0430\u0440\u0435) \u0438\u043b\u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0430\u043a\u0435\u0442), \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0438 React \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0445 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044e \u0440\u0430\u043d\u044c\u0448\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u0437\u044b\u0432\u044b \u0438\u043b\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u0432\u0430\u0440\u044b) \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0442\u043e\u043c \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xn\/ni\/rj\/xnnirjmhm3fvw-j0jcuz4lfcxby.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xn\/ni\/rj\/xnnirjmhm3fvw-j0jcuz4lfcxby.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0433\u0438\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0445\u0443\u0434\u0448\u0438\u0442\u044c <a href=\"https:\/\/web.dev\/ttfb\/\">Time To First Byte (TTFB)<\/a> \u0438 <a href=\"https:\/\/web.dev\/first-contentful-paint\/\">First Contentful Paint (FCP)<\/a>. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/interactive\">Time to Interactive (TTI)<\/a>, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0440<\/em><\/p>\n<p>  <\/p>\n<p><code>&lt;Suspense><\/code> \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445), \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 UI (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043a\u0435\u043b\u0435\u0442 \u0438\u043b\u0438 \u0441\u043f\u0438\u043d\u0435\u0440) \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Suspense } from 'react' import { PostFeed, Weather } from '.\/Components'  export default function Posts() {   return (     &lt;section>       &lt;Suspense fallback={&lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043b\u0435\u043d\u0442\u044b \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439...&lt;\/p>}>         &lt;PostFeed \/>       &lt;\/Suspense>       &lt;Suspense fallback={&lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u043e\u0433\u043e\u0434\u044b...&lt;\/p>}>         &lt;Weather \/>       &lt;\/Suspense>     &lt;\/section>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>Suspense<\/code> \u0434\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u2014 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML.<\/li>\n<li>\u0412\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u0430\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f \u2014 React \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0445 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>SEO<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>Next.js \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>generateMetadata<\/code> \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433\u0430 UI \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u0435\u0433\u0438 <code>&lt;head><\/code><\/li>\n<li>\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c, \u043e\u043d \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 SEO<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0421\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433\u0435 \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 <code>200<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>redirect<\/code> \u0438\u043b\u0438 <code>notFound<\/code>, \u043d\u043e \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u042d\u0442\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 SEO.<\/p>\n<p>  <\/p>\n<h2 id=\"obrabotka-oshibok\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/h2>\n<p>  <\/p>\n<p>\u0424\u0430\u0439\u043b <code>error.js<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u044f\u0433\u043a\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0432 <a href=\"https:\/\/react.dev\/reference\/react\/Component#catching-rendering-errors-with-an-error-boundary\">React Error Boundary<\/a> (\u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044c)<\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u0435\u0442 UI \u043e\u0448\u0438\u0431\u043a\u0438, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/li>\n<li>\u0438\u0437\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0431\u0435\u0437 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 UI \u043e\u0448\u0438\u0431\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0444\u0430\u0439\u043b <code>error.js<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u0438\u0437 \u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/hq\/6l\/xx\/hq6lxxxenmhzkd-qpeg7_nxof_e.png\" data-src=\"https:\/\/habrastorage.org\/webt\/hq\/6l\/xx\/hq6lxxxenmhzkd-qpeg7_nxof_e.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/error.tsx 'use client' \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b `Error` \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c\u0438  import { useEffect } from 'react'  export default function Error({   error,   reset, }: {   error: Error &amp; { digest?: string }   reset: () => void }) {   useEffect(() => {     \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a     console.error(error)   }, [error])    return (     &lt;div>       &lt;h2>\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a&lt;\/h2>       &lt;button         onClick={           \/\/ \u041f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430           () => reset()         }       >         \u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043d\u043e\u0432\u0430       &lt;\/button>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0430\u043a <code>error.js<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442?<\/strong><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/7y\/rm\/zj\/7yrmzjodo8sokyeq-b2mocp-gei.png\" data-src=\"https:\/\/habrastorage.org\/webt\/7y\/rm\/zj\/7yrmzjodo8sokyeq-b2mocp-gei.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li><code>error.js<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044c, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>page.js<\/code><\/li>\n<li>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0438\u0437 <code>error.js<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<li>\u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044f, \u043e\u0448\u0438\u0431\u043a\u0430 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f? \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/li>\n<li>\u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0430\u043a\u0442\u0438\u0432\u0435\u043d, \u043c\u0430\u043a\u0435\u0442\u044b \u0432\u044b\u0448\u0435 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>reset<\/code> \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044f. \u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0445\u0435 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/error.tsx 'use client'  export default function Error({   error,   reset, }: {   error: Error &amp; { digest?: string }   reset: () => void }) {   return (     &lt;div>       &lt;h2>\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a&lt;\/h2>       &lt;button onClick={() => reset()}>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043d\u043e\u0432\u0430&lt;\/button>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u043c\u0438 <code>layout.js<\/code> \u0438 <code>error.js<\/code>, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u0443\u044e (\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0443\u044e) \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ph\/en\/ud\/phenudg2kycqmufz-qvyruqrg-c.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ph\/en\/ud\/phenudg2kycqmufz-qvyruqrg-c.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <code>error.js<\/code> \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u0440\u043e\u0443\u0442\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0442 \u043a \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044e. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e <code>error.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0441\u0435\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f UI \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u043e\u0432 <code>error.js<\/code> \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0440\u043e\u0432\u043d\u044f\u0445 (\u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445) \u0440\u043e\u0443\u0442\u0430<\/li>\n<li><code>error.js<\/code> \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438, \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0438\u0435 \u0432 <code>layout.js<\/code> \u0442\u043e\u0433\u043e \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u043a\u0435\u0442<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043c\u0430\u043a\u0435\u0442\u0430\u0445<\/strong><\/p>\n<p>  <\/p>\n<p><code>error.js<\/code> \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438, \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0438\u0435 \u0432 <code>layout.js<\/code> \u0438\u043b\u0438 <code>template.js<\/code> \u0442\u043e\u0433\u043e \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u044f. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e <code>layout.js<\/code> \u0438\u043b\u0438 <code>template.js<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432\u0430\u0436\u043d\u044b\u0439 \u043e\u0431\u0449\u0438\u0439 UI \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0445 \u0432 <code>layout.js<\/code> \u0438\u043b\u0438 <code>template.js<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>error.js<\/code> \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0445 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435 \u0438\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>global-error.js<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044c <code>global-error.js<\/code> \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0435\u0433\u043e \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u0435\u0433\u0438 <code>&lt;html><\/code> \u0438 <code>&lt;body><\/code>.<\/p>\n<p>  <\/p>\n<p><code>global-error.js<\/code> \u2014 \u044d\u0442\u043e \u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 UI \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a \u0432\u0441\u0435\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 <code>error.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0436\u0435 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 <code>global-error.js<\/code> \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 <code>error.js<\/code>, \u0447\u0435\u0439 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0449\u0438\u0439 UI \u0438 \u0431\u0440\u0435\u043d\u0434, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/global-error.tsx 'use client'  export default function GlobalError({   error,   reset, }: {   error: Error &amp; { digest?: string }   reset: () => void }) {   return (     &lt;html>       &lt;body>         &lt;h2>\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a&lt;\/h2>         &lt;button onClick={() => reset()}>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043d\u043e\u0432\u0430&lt;\/button>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, Next.js \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 <code>Error<\/code> (\u043b\u0438\u0448\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435) \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u0444\u0430\u0439\u043b <code>error.js<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u0430 <code>error<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435 <code>Error<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>message<\/code> \u0438 <code>digest<\/code>. \u042d\u0442\u043e \u043c\u0435\u0440\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439\u0441\u044f \u0432 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n<p>  <\/p>\n<p><code>message<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0431\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435, <code>digest<\/code> \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0445\u044d\u0448 \u043e\u0448\u0438\u0431\u043a\u0438, \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 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043b\u043e\u0433\u0430\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <code>Error<\/code> \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <code>message<\/code> \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"perenapravlenie\">\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0412 Next.js \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>API<\/th>\n<th>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/th>\n<th>\u0413\u0434\u0435<\/th>\n<th>\u0421\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>redirect<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/td>\n<td>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430<\/td>\n<td>307 (\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435) \u0438\u043b\u0438 303 (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f)<\/td>\n<\/tr>\n<tr>\n<td><code>permanentRedirect<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/td>\n<td>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430<\/td>\n<td>308 (\u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0435)<\/td>\n<\/tr>\n<tr>\n<td><code>useRouter<\/code><\/td>\n<td>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/td>\n<td>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>redirects<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0443\u0442\u0438<\/td>\n<td>\u0424\u0430\u0439\u043b <code>next.config.js<\/code><\/td>\n<td>307 (\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435) \u0438\u043b\u0438 308 (\u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0435)<\/td>\n<\/tr>\n<tr>\n<td><code>NextResponse.redirect<\/code><\/td>\n<td>\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f<\/td>\n<td>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a<\/td>\n<td>\u041b\u044e\u0431\u043e\u0439<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>redirect<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>redirect<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 URL. \u0415\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><code>redirect<\/code> \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.tsx 'use server'  import { redirect } from 'next\/navigation' import { revalidatePath } from 'next\/cache'  export async function createPost(id: string) {   try {     \/\/ \u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445   } catch (error) {     \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a   }    revalidatePath('\/posts') \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u0442\u043e\u0432   redirect(`\/post\/${id}`) \/\/ \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>permanentRedirect<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>permanentRedirect<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e (permanently) \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 URL. \u0415\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><code>permanentRedirect<\/code> \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 URL \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f URL \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { permanentRedirect } from 'next\/navigation' import { revalidateTag } from 'next\/cache'  export async function updateUsername(username: string, formData: FormData) {   try {     \/\/ \u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0411\u0414   } catch (error) {     \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a   }    revalidateTag('username') \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 `username`   permanentRedirect(`\/profile\/${username}`) \/\/ \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0425\u0443\u043a <code>useRouter<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>push<\/code> \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0445\u0443\u043a\u043e\u043c <code>useRouter<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx 'use client'  import { useRouter } from 'next\/navigation'  export default function Page() {   const router = useRouter()    return (     &lt;button type=\"button\" onClick={() => router.push('\/dashboard')}>       \u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>redirects<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>redirects<\/code> \u0444\u0430\u0439\u043b\u0430 <code>next.config.js<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 URL. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 URL \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u043d\u0430\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p><code>redirects<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0441 \u043f\u0443\u0442\u0435\u043c, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438, \u043a\u0443\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>redirects<\/code> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0432 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async redirects() {     return [       \/\/ \u041e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435       {         source: '\/about',         destination: '\/',         permanent: true,       },       \/\/ \u041f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0438 \u0441 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u043a\u0430\u043c\u0438       {         source: '\/blog\/:slug',         destination: '\/news\/:slug',         permanent: true,       },     ]   }, }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>NextResponse.redirect<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>NextResponse.redirect<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 URL \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0435\u0439 \u0438 \u0434\u0440.) \u0438\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \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 <code>\/login<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ middleware.ts import { NextResponse, NextRequest } from 'next\/server' import { authenticate } from 'auth-provider'  export function middleware(request: NextRequest) {   const isAuthenticated = authenticate(request)    \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441   if (isAuthenticated) {     return NextResponse.next()   }    \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d, \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438   return NextResponse.redirect(new URL('\/login', request.url)) }  \/\/ \u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f export const config = {   matcher: '\/dashboard\/:path*', }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"gruppy-routov\">\u0413\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 URL. \u041e\u0434\u043d\u0430\u043a\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0433\u0440\u0443\u043f\u043f\u043e\u0439 \u0440\u043e\u0443\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 URL \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0438 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0431\u0435\u0437 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 URL.<\/p>\n<p>  <\/p>\n<p>\u0413\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0434\u043b\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u043e\u0432 \u0432 \u0433\u0440\u0443\u043f\u043f\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0430\u0439\u0442\u0430, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c<\/li>\n<li>\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u043e\u0443\u0442\u0430<br \/> \n<ul>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 \u0442\u043e\u043c \u0436\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0432 \u043d\u0430\u0431\u043e\u0440 \u0440\u043e\u0443\u0442\u043e\u0432 \u0432 \u043e\u0431\u0449\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438: <code>(folderName)<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u043e\u0443\u0442\u043e\u0432 \u0431\u0435\u0437 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 URL<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u043e\u0432 \u0431\u0435\u0437 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 URL, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u0432\u043c\u0435\u0441\u0442\u0435. \u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0432 URL (<code>(marketing)<\/code> \u0438\u043b\u0438 <code>(shop)<\/code>).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/e4\/8s\/-p\/e48s-pqd-kqwbpp6ploi0boui60.png\" data-src=\"https:\/\/habrastorage.org\/webt\/e4\/8s\/-p\/e48s-pqd-kqwbpp6ploi0boui60.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0440\u043e\u0443\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 <code>(marketing)<\/code> \u0438 <code>(shop)<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u043d\u0443 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e URL, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 <code>layout.js<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/jw\/ni\/k7\/jwnik7x7mst36vtkynrytxrfmdo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/jw\/ni\/k7\/jwnik7x7mst36vtkynrytxrfmdo.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><em>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0443 \u0440\u043e\u0443\u0442\u043e\u0432 (<code>(shop)<\/code>) \u0441 \u0444\u0430\u0439\u043b\u043e\u043c <code>layout.js<\/code> \u0432 \u043d\u0435\u0439 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0440\u043e\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043c\u0430\u043a\u0435\u0442 (<code>account<\/code> \u0438 <code>cart<\/code>). \u0420\u043e\u0443\u0442\u044b, \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443, \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 (<code>checkout<\/code>).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/hf\/ta\/cc\/hftaccpoucxwjytjx_dfdxdgxoq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/hf\/ta\/cc\/hftaccpoucxwjytjx_dfdxdgxoq.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><em>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 <code>layout.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>layout.js<\/code> \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0439 UI \u0438\u043b\u0438 UX. \u0422\u0435\u0433\u0438 <code>&lt;html><\/code> \u0438 <code>&lt;body><\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/7r\/za\/di\/7rzadind56zi5scuydsny8blyx8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/7r\/za\/di\/7rzadind56zi5scuydsny8blyx8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>(marketing)<\/code> \u0438 <code>(shop)<\/code> \u0438\u043c\u0435\u044e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b.<\/p>\n<p>  <\/p>\n<h2 id=\"organizaciya-proekta-i-sovmestnoe-razmeschenie-faylov\">\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0439 \u043e \u0444\u0430\u0439\u043b\u0430\u0445 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430, Next.js \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u0432 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 (colocation) \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><strong>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430\u044f \u043a\u043e\u043b\u043e\u043a\u0430\u0446\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u043e\u0443\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 URL.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c\u0438 (\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/0a\/tq\/-q\/0atq-qfehdoei2t0j2vhml5qqcc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/0a\/tq\/-q\/0atq-qfehdoei2t0j2vhml5qqcc.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 <code>page.js<\/code> \u0438 <code>route.js<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/qq\/ok\/3a\/qqok3ainvdc41o3hyhx0pslke_k.png\" data-src=\"https:\/\/habrastorage.org\/webt\/qq\/ok\/3a\/qqok3ainvdc41o3hyhx0pslke_k.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0435 \u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u043e\u0443\u0442\u0430, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437\u0432\u043d\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/vz\/y1\/ta\/vzy1taumhajlletitso19rxg-sc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/vz\/y1\/ta\/vzy1taumhajlletitso19rxg-sc.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u0417\u0430\u043a\u0440\u044b\u0442\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c\u0438: <code>_folderName<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/q_\/r6\/3t\/q_r63twuazgtqt30ht16fja9_v8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/q_\/r6\/3t\/q_r63twuazgtqt30ht16fja9_v8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u043c\u043e\u0433\u0443\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 UI \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430<\/li>\n<li>\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b Next.js<\/li>\n<li>\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 \u043a\u043e\u0434\u0430<\/li>\n<li>\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441 \u0431\u0443\u0434\u0443\u0449\u0438\u043c\u0438 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 Next.js<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0413\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438 \u0440\u043e\u0443\u0442\u043e\u0432: <code>(folderName)<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 URL \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/a5\/ue\/9v\/a5ue9v8svd3arcefzlke2ui9whc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/a5\/ue\/9v\/a5ue9v8svd3arcefzlke2ui9whc.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0413\u0440\u0443\u043f\u043f\u044b \u0440\u043e\u0443\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0434\u043b\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u043e\u0432 \u0432 \u0433\u0440\u0443\u043f\u043f\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0430\u0439\u0442\u0430, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c<\/li>\n<li>\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u043e\u0443\u0442\u0430<br \/> \n<ul>\n<li>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 \u0442\u043e\u043c \u0436\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u0432 \u043d\u0430\u0431\u043e\u0440 \u0440\u043e\u0443\u0442\u043e\u0432 \u0432 \u043e\u0431\u0449\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>src<\/code><\/em><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>app<\/code>) \u0432 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code>. \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 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kt\/ob\/g3\/ktobg3nrot1kwidyxvplxqotzlc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/kt\/ob\/g3\/ktobg3nrot1kwidyxvplxqotzlc.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><em>\u0421\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0442 \u0447\u0442\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0432 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/settings\/analytics\/page.js \/\/ \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>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043e\u0431 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Next.js, \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0438\u043b\u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439. \u041a\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0441\u0432\u043e\u0439, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0449\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0446\u0435\u043b\u0435\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/7o\/in\/t1\/7oint1fnog82oog0iidakxwxwec.png\" data-src=\"https:\/\/habrastorage.org\/webt\/7o\/in\/t1\/7oint1fnog82oog0iidakxwxwec.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><em>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0449\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445 \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/_z\/fp\/sy\/_zfpsy3ezlvnziwwqqpca5jwca0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/_z\/fp\/sy\/_zfpsy3ezlvnziwwqqpca5jwca0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u0438\u043b\u0438 \u0440\u043e\u0443\u0442\u0443<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/zt\/lo\/kl\/ztlokl2vuibvxlt2qxviku4vz90.png\" data-src=\"https:\/\/habrastorage.org\/webt\/zt\/lo\/kl\/ztlokl2vuibvxlt2qxviku4vz90.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<h2 id=\"dinamicheskie-routy\">\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u043b\u0438 \u0438\u0445 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c \u0442\u043e\u0447\u043d\u044b\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u043e\u0443\u0442\u044b \u0438\u0437 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438: <code>[folderName]<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>[id]<\/code> \u0438\u043b\u0438 <code>[slug]<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u0443, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0440\u043e\u0443\u0442\u0443 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>generateMetadata<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u0430 <code>params<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u043e\u0433 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0440\u043e\u0443\u0442 <code>app\/blog\/[slug]\/page.js<\/code>, \u0433\u0434\u0435 <code>[slug]<\/code> \u2014 \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u0442\u043e\u0432 \u0431\u043b\u043e\u0433\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/blog\/[slug]\/page.tsx export default function Page({ params }: { params: { slug: string } }) {   return &lt;div>\u041f\u043e\u0441\u0442: {params.slug}&lt;\/div> }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0420\u043e\u0443\u0442<\/th>\n<th>\u041f\u0440\u0438\u043c\u0435\u0440 URL<\/th>\n<th><code>params<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>app\/blog\/[slug]\/page.js<\/code><\/td>\n<td><code>\/blog\/a<\/code><\/td>\n<td><code>{ slug: 'a' }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/blog\/[slug]\/page.js<\/code><\/td>\n<td><code>\/blog\/b<\/code><\/td>\n<td><code>{ slug: 'b' }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/blog\/[slug]\/page.js<\/code><\/td>\n<td><code>\/blog\/c<\/code><\/td>\n<td><code>{ slug: 'c' }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>generateStaticParams<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u043e\u0432 \u043f\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u043d\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/blog\/[slug]\/page.tsx export async function generateStaticParams() {   const posts = await fetch('https:\/\/...\/posts').then((res) => res.json())    return posts.map((post) => ({     slug: post.slug,   })) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c <code>generateStaticParams<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043c\u043d\u043e\u0435 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0415\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>fetch<\/code> \u0432 <code>generateStaticParams<\/code>, \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e <code>fetch<\/code> \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 <code>generateStaticParams<\/code>, \u043c\u0430\u043a\u0435\u0442\u0430\u0445 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0447\u0442\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u0434\u043e \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u043e\u0432 (catch-all) \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u043e\u0442\u043e\u0447\u0438\u044f \u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445: <code>[...folderName]<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>app\/shop\/[...slug]\/page.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 <code>\/shop\/clothes<\/code>, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0441 <code>\/shop\/clothes\/tops<\/code>, <code>\/shop\/clothes\/tops\/t-shirts<\/code> \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0420\u043e\u0443\u0442<\/th>\n<th>\u041f\u0440\u0438\u043c\u0435\u0440 URL<\/th>\n<th><code>params<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>app\/shop\/[...slug]\/page.js<\/code><\/td>\n<td><code>\/shop\/a<\/code><\/td>\n<td><code>{ slug: ['a'] }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[...slug]\/page.js<\/code><\/td>\n<td><code>\/shop\/a\/b<\/code><\/td>\n<td><code>{ slug: ['a', 'b'] }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[...slug]\/page.js<\/code><\/td>\n<td><code>\/shop\/a\/b\/c<\/code><\/td>\n<td><code>{ slug: ['a', 'b', 'c'] }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432 \u0434\u0432\u043e\u0439\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438: <code>[[...folderName]]<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>app\/shop\/[[...slug]]\/page.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0441 <code>\/shop<\/code> \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a <code>\/shop\/clothes<\/code>, <code>\/shop\/clothes\/tops<\/code> \u0438 <code>\/shop\/clothes\/tops\/t-shirts<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u043e\u0432 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u0441 \u0440\u043e\u0443\u0442\u043e\u043c \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 (<code>\/shop<\/code>).<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0420\u043e\u0443\u0442<\/th>\n<th>\u041f\u0440\u0438\u043c\u0435\u0440 URL<\/th>\n<th><code>params<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>app\/shop\/[[...slug]]\/page.js<\/code><\/td>\n<td><code>\/shop<\/code><\/td>\n<td><code>{}<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[[...slug]]\/page.js<\/code><\/td>\n<td><code>\/shop\/a<\/code><\/td>\n<td><code>{ slug: ['a'] }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[[...slug]]\/page.js<\/code><\/td>\n<td><code>\/shop\/a\/b<\/code><\/td>\n<td><code>{ slug: ['a', 'b'] }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[[...slug]]\/page.js<\/code><\/td>\n<td><code>\/shop\/a\/b\/c<\/code><\/td>\n<td><code>{ slug: ['a', 'b', 'c'] }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>TypeScript<\/strong><\/p>\n<p>  <\/p>\n<p><code>params<\/code> \u043c\u043e\u0436\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function Page({ params }: { params: { slug: string } }) {   return &lt;h1>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0420\u043e\u0443\u0442<\/th>\n<th>\u0422\u0438\u043f <code>params<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>app\/blog\/[slug]\/page.js<\/code><\/td>\n<td><code>{ slug: string }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[...slug]\/page.js<\/code><\/td>\n<td><code>{ slug: string[] }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/shop\/[[...slug]]\/page.js<\/code><\/td>\n<td><code>{ slug?: string[] }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/[categoryId]\/[itemId]\/page.js<\/code><\/td>\n<td><code>{ categoryId: string, itemId: string }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<h2 id=\"parallelnye-routy\">\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435. \u041e\u043d\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043b\u0435\u043d\u0442\u044b \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 <code>team<\/code> \u0438 <code>analytics<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/eb\/wl\/t6\/ebwlt6iemhtljbyzcv7rxdtrnme.png\" data-src=\"https:\/\/habrastorage.org\/webt\/eb\/wl\/t6\/ebwlt6iemhtljbyzcv7rxdtrnme.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043b\u043e\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432. \u0421\u043b\u043e\u0442\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>@folderName<\/code>. \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0442\u043e\u0432, <code>@analytics<\/code> \u0438 <code>@team<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ce\/w8\/2-\/cew82-o9h_fqf3-odb8v0vd-8d4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ce\/w8\/2-\/cew82-o9h_fqf3-odb8v0vd-8d4.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u043e\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u044b \u043e\u0431\u0449\u0435\u043c\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043c\u0430\u043a\u0435\u0442\u0443. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 <code>app\/layout.js<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u043f\u044b <code>analytics<\/code> \u0438 <code>team<\/code> \u0438 \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 \u043f\u0440\u043e\u043f\u043e\u043c <code>children<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx export default function Layout({   children,   team,   analytics, }: {   children: React.ReactNode   analytics: React.ReactNode   team: React.ReactNode }) {   return (     &lt;>       {children}       {team}       {analytics}     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043b\u043e\u0442\u044b \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u043e\u0443\u0442\u0430 \u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 URL. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f <code>\/dashboard\/@analytics\/views<\/code> URL \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a <code>\/dashboard\/views<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>@analytics<\/code> \u2014 \u044d\u0442\u043e \u0441\u043b\u043e\u0442.<\/p>\n<p>  <\/p>\n<p><strong>\u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Next.js \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043f\u043e\u0434\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443) \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043b\u043e\u0442\u0430, \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0442\u0438\u043f\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043c\u044f\u0433\u043a\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u2014 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 Next.js \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0441\u043b\u043e\u0442\u0435, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043b\u043e\u0442\u043e\u0432, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c URL<\/li>\n<li>\u0436\u0435\u0441\u0442\u043a\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u2014 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430) Next.js \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043b\u043e\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c URL. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0444\u0430\u0439\u043b <code>default.js<\/code> \u0434\u043b\u044f \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0432\u0448\u0438\u0445 \u0441\u043b\u043e\u0442\u043e\u0432 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 404, \u0435\u0441\u043b\u0438 <code>default.js<\/code> \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>default.js<\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u0430\u0439\u043b <code>default.js<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u043b\u044f \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043b\u043e\u0442\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439. \u0421\u043b\u043e\u0442 <code>@team<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>\/settings<\/code>, \u0430 \u0441\u043b\u043e\u0442 <code>@analytics<\/code> \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ks\/ye\/n0\/ksyen0ihwyryhbomdhpwi59qw4o.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ks\/ye\/n0\/ksyen0ihwyryhbomdhpwi59qw4o.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 <code>\/dashboard\/settings<\/code>, \u0441\u043b\u043e\u0442 <code>@team<\/code> \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>\/settings<\/code>, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u0441\u043b\u043e\u0442\u0430 <code>@analytics<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 Next.js \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 <code>default.js<\/code> \u0434\u043b\u044f <code>@analytics<\/code>. \u0415\u0441\u043b\u0438 <code>default.js<\/code> \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f <code>404.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>children<\/code> \u2014 \u044d\u0442\u043e \u043d\u0435\u044f\u0432\u043d\u044b\u0439 \u0441\u043b\u043e\u0442, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f <code>default.js<\/code> \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 Next.js \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p><em><code>useSelectedLayoutSegment(s)<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0425\u0443\u043a\u0438 <code>useSelectedLayoutSegment<\/code> \u0438 <code>useSelectedLayoutSegments<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>parallelRoutesKey<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0432 \u0441\u043b\u043e\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx 'use client'  import { useSelectedLayoutSegment } from 'next\/navigation'  export default function Layout({ auth }: { auth: React.ReactNode }) {   const loginSegments = useSelectedLayoutSegment('auth')   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 <code>\/login<\/code>, <code>loginSegments<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>\"login\"<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u043e\u0443\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0430\u043d\u0435\u043b\u0435\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u043e\u043b\u0435\u0439 <code>admin<\/code> \u0438 <code>user<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/wx\/lc\/ks\/wxlcksxgbid8bgodgb8e8x3axbq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/wx\/lc\/ks\/wxlcksxgbid8bgodgb8e8x3axbq.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/layout.tsx import { checkUserRole } from '@\/lib\/auth'  export default function Layout({   user,   admin, }: {   user: React.ReactNode   admin: React.ReactNode }) {   const role = checkUserRole()    return &lt;>{role === 'admin' ? admin : user}&lt;\/> }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0413\u0440\u0443\u043f\u043f\u044b \u0442\u0430\u0431\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u043b\u043e\u0442 \u0444\u0430\u0439\u043b <code>layout.js<\/code>, \u0442\u043e \u043c\u0430\u043a\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u043e\u0442\u0430 <code>@analytics<\/code> \u0441 \u0434\u0432\u0443\u043c\u044f \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, <code>\/page-views<\/code> \u0438 <code>\/visitors<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/n0\/de\/ij\/n0deijk86opbyf0pucled8nxpmk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/n0\/de\/ij\/n0deijk86opbyf0pucled8nxpmk.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/@analytics\/layout.tsx import Link from 'next\/link'  export default function Layout({ children }: { children: React.ReactNode }) {   return (     &lt;>       &lt;nav>         &lt;Link href=\"\/dashboard\/page-views\">\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&lt;\/Link>         &lt;Link href=\"\/dashboard\/visitors\">\u041f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0438&lt;\/Link>       &lt;\/nav>       &lt;div>{children}&lt;\/div>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u043c\u0438 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u043e\u043a. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u0430\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0447\u0435\u0440\u0435\u0437 URL<\/li>\n<li>\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<li>\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 &#171;\u043d\u0430\u0437\u0430\u0434&#187;<\/li>\n<li>\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 &#171;\u0432\u043f\u0435\u0440\u0435\u0434&#187;<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d UI, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437 \u043c\u0430\u043a\u0435\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>\/login<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/qp\/jm\/km\/qpjmkm5kdidt31fdumr_oj1q95y.png\" data-src=\"https:\/\/habrastorage.org\/webt\/qp\/jm\/km\/qpjmkm5kdidt31fdumr_oj1q95y.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0430 <code>\/login<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nk\/bg\/ac\/nkbgacyhn3fhcwhnushyzx_gbi8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nk\/bg\/ac\/nkbgacyhn3fhcwhnushyzx_gbi8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/login\/page.tsx import { Login } from '@\/app\/ui\/login'  export default function Page() {   return &lt;Login \/> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b <code>default.js<\/code> \u0432 \u0441\u043b\u043e\u0442 <code>@auth<\/code>, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 <code>null<\/code>. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043c\u043e\u0434\u0430\u043b\u043a\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/@auth\/default.tsx export default function Default() {   return null }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u043e\u0442\u0435 <code>@auth<\/code> \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0440\u043e\u0443\u0442 <code>\/login<\/code> \u043f\u0443\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043d\u0430 <code>(.)login<\/code>. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Modal<\/code> \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b <code>(.)login\/page.tsx<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Modal } from '@\/app\/ui\/modal' import { Login } from '@\/app\/ui\/login'  export default function Page() {   return (     &lt;Modal>       &lt;Login \/>     &lt;\/Modal>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0443\u0442\u0435\u0440 Next.js. \u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 URL \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043c\u043e\u0434\u0430\u043b\u043a\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 &#171;\u0432\u043f\u0435\u0440\u0435\u0434-\u043d\u0430\u0437\u0430\u0434&#187;.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u043b\u043e\u0442 <code>@auth<\/code> \u043a\u0430\u043a \u043f\u0440\u043e\u043f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043c\u0430\u043a\u0435\u0442 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 \u043f\u0440\u043e\u043f\u043e\u043c <code>children<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import Link from 'next\/link'  export default function Layout({   auth,   children, }: {   auth: React.ReactNode   children: React.ReactNode }) {   return (     &lt;>       &lt;nav>         &lt;Link href=\"\/login\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e&lt;\/Link>       &lt;\/nav>       &lt;div>{auth}&lt;\/div>       &lt;div>{children}&lt;\/div>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0430\u043b\u043a\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>\/login<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u043b\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>router.back<\/code> \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/ui\/modal.tsx 'use client'  import { useRouter } from 'next\/navigation'  export function Modal({ children }: { children: React.ReactNode }) {   const router = useRouter()    return (     &lt;>       &lt;button         onClick={() => {           router.back()         }}       >         \u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e       &lt;\/button>       &lt;div>{children}&lt;\/div>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\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> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0439\u0442\u0438 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043b\u043e\u0442 <code>@auth<\/code>, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0443\u0442-\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 <code>null<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/ui\/modal.tsx import Link from 'next\/link'  export function Modal({ children }: { children: React.ReactNode }) {   return (     &lt;>       &lt;Link href=\"\/\">\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e&lt;\/Link>       &lt;div>{children}&lt;\/div>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/@auth\/[...catchAll]\/page.tsx export default function CatchAll() {   return null }<\/code><\/pre>\n<p>  <\/p>\n<p><em>UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e-\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xl\/83\/wb\/xl83wbsd92qhcmmhy1gwa1ye7g8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xl\/83\/wb\/xl83wbsd92qhcmmhy1gwa1ye7g8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<h2 id=\"perehvatyvayuschie-routy\">\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0440\u043e\u0443\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0440\u043e\u0443\u0442 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442. \u042d\u0442\u0430 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0444\u043e\u0442\u043e \u0432 \u043b\u0435\u043d\u0442\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0444\u043e\u0442\u043e \u0432 \u043c\u043e\u0434\u0430\u043b\u043a\u0435, \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u043b\u0435\u043d\u0442\u0443. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Next.js \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u043e\u0443\u0442 <code>\/photo\/123<\/code>, \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u0435\u0442 URL \u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u043c <code>\/feed<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/1i\/qw\/cp\/1iqwcpgaocidtdgopoowfysa_xe.png\" data-src=\"https:\/\/habrastorage.org\/webt\/1i\/qw\/cp\/1iqwcpgaocidtdgopoowfysa_xe.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043a \u0444\u043e\u0442\u043e \u043f\u0443\u0442\u0435\u043c \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438. \u0412 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u043e\u0443\u0442 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>(..)<\/code>, \u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c <code>..\/<\/code>, \u043d\u043e \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>(.)<\/code> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u044f<\/li>\n<li><code>(..)<\/code> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u0432\u044b\u0448\u0435<\/li>\n<li><code>(..)(..)<\/code> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u0432\u044b\u0448\u0435<\/li>\n<li><code>(...)<\/code> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u0441 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u043e\u0440\u043d\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442 <code>photo<\/code> \u0438\u0437 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 <code>feed<\/code>, \u0441\u043e\u0437\u0434\u0430\u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>(..)photo<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/lb\/uw\/wa\/lbuwway12i97r_2dxd2slbr5zry.png\" data-src=\"https:\/\/habrastorage.org\/webt\/lb\/uw\/wa\/lbuwway12i97r_2dxd2slbr5zry.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u043e\u043a. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u0430\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0447\u0435\u0440\u0435\u0437 URL<\/li>\n<li>\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<li>\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 &#171;\u043d\u0430\u0437\u0430\u0434&#187;<\/li>\n<li>\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 &#171;\u0432\u043f\u0435\u0440\u0435\u0434&#187;<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d UI, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u043a\u0443 \u0441 \u0444\u043e\u0442\u043e \u0438\u0437 \u0433\u0430\u043b\u0435\u0440\u0435\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xt\/0a\/o0\/xt0ao0_b0rawjluufv93mazxnso.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xt\/0a\/o0\/xt0ao0_b0rawjluufv93mazxnso.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0443\u0442\u044c \u043a \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0443 <code>photo<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>(..)<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>@modal<\/code> \u2014 \u044d\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u0442 \u0438 \u043d\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0440\u043e\u0443\u0442 <code>photo<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0430 \u043e\u0434\u0438\u043d \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0430 \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u044b\u0448\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"obrabotchiki-routa\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430<\/h2>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Request\">Request<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Response\">Response<\/a> <code>Web API<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/9t\/ry\/xe\/9tryxe1vvuikbcuepudurqtlfxm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/9t\/ry\/xe\/9tryxe1vvuikbcuepudurqtlfxm.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>route.js<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts export const dynamic = 'force-dynamic' \/\/ \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e `auto` export async function GET(request: Request) {}<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043e\u0434\u043d\u043e\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0440\u043e\u0443\u0442\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 <code>route.js<\/code>, \u0438 <code>page.js<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b HTTP<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b HTTP: <code>GET<\/code>, <code>POST<\/code>, <code>PUT<\/code>, <code>PATCH<\/code>, <code>DELETE<\/code>, <code>HEAD<\/code> \u0438 <code>OPTIONS<\/code>. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 Next.js \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 <code>405 Method Not Allowed<\/code>.<\/p>\n<p>  <\/p>\n<p><em><code>NextRequest<\/code> \u0438 <code>NextResponse<\/code><\/em><\/p>\n<p>  <\/p>\n<p>Next.js \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 <code>Request<\/code> \u0438 <code>Response<\/code> API \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>NextRequest<\/code> \u0438 <code>NextResponse<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 <code>GET<\/code> \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Response<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/route.ts export async function GET() {   const res = await fetch('https:\/\/data.mongodb-api.com\/...', {     headers: {       'Content-Type': 'application\/json',       'API-Key': process.env.DATA_API_KEY,     },   })   const data = await res.json()    return Response.json({ data }) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Request<\/code> \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>GET<\/code><\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 HTTP<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>cookies<\/code> \u0438 <code>headers<\/code><\/li>\n<li>\u0440\u0443\u0447\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Request<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/products\/api\/route.ts export async function GET(request: Request) {   const { searchParams } = new URL(request.url)   const id = searchParams.get('id')    const res = await fetch(`https:\/\/data.mongodb-api.com\/product\/${id}`, {     headers: {       'Content-Type': 'application\/json',       'API-Key': process.env.DATA_API_KEY,     },   })   const product = await res.json()    return Response.json({ product }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 <code>POST<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/route.ts export async function POST() {   const res = await fetch('https:\/\/data.mongodb-api.com\/...', {     method: 'POST',     headers: {       'Content-Type': 'application\/json',       'API-Key': process.env.DATA_API_KEY!,     },     body: JSON.stringify({ time: new Date().toISOString() }),   })   const data = await res.json()    return Response.json(data) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p><code>route<\/code> \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u043c \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u043d\u0438 \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u043c\u0430\u043a\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\u0445, \u043a\u0430\u043a <code>page<\/code><\/li>\n<li>\u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u043e\u0443\u0442\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 <code>route.js<\/code>, \u0438 <code>page.js<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 <code>route.js<\/code> \u0438\u043b\u0438 <code>page.js<\/code> \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0433\u043b\u0430\u0433\u043e\u043b\u044b HTTP \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js export default function Page() {   return &lt;h1>\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!&lt;\/h1> }  \/\/ \u274c \u041a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \/\/ app\/route.js export async function POST(request) {}<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>next.revalidate<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/route.ts export async function GET() {   const res = await fetch('https:\/\/data.mongodb-api.com\/...', {     next: { revalidate: 60 }, \/\/ \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0435 60 \u0441\u0435\u043a\u0443\u043d\u0434   })   const data = await res.json()    return Response.json(data) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>revalidate<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const revalidate = 60<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0412 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>cookies<\/code> \u0438 <code>headers<\/code>.<\/p>\n<p>  <\/p>\n<p><em><code>cookies<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>cookies<\/code> \u0438\u0437 <code>next\/headers<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043a\u0443\u043a\u0438. \u042d\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0440\u043e\u0443\u0442\u0430 \u0438\u043b\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/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 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u043e\u0432\u044b\u0439 <code>Response<\/code> \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c <code>Set-Cookie<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts import { cookies } from 'next\/headers'  export async function GET(request: Request) {   const cookieStore = cookies()   const token = cookieStore.get('token')    return new Response('\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!', {     status: 200,     headers: { 'Set-Cookie': `token=${token.value}` },   }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Request<\/code> \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u043a\u0443\u043a\u0438 \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts import type { NextRequest } from 'next\/server'  export async function GET(request: NextRequest) {   const token = request.cookies.get('token') }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>headers<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>headers<\/code> \u0438\u0437 <code>next\/headers<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438. \u042d\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0440\u043e\u0443\u0442\u0430 \u0438\u043b\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>headers<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u043e\u0432\u044b\u0439 <code>Response<\/code> \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 <code>headers<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts import { headers } from 'next\/headers'  export async function GET(request: Request) {   const headersList = headers()   const referer = headersList.get('referer')    return new Response('\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!', {     status: 200,     headers: { referer: referer },   }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Request<\/code> \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts import { type NextRequest } from 'next\/server'  export async function GET(request: NextRequest) {   const requestHeaders = new Headers(request.headers) }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>redirect<\/code><\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts import { redirect } from 'next\/navigation'  export async function GET(request: Request) {   redirect('https:\/\/nextjs.org\/') }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u0437 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/[slug]\/route.ts export async function GET(   request: Request,   { params }: { params: { slug: string } } ) {   const slug = params.slug \/\/ 'a', 'b' \u0438\u043b\u0438 'c' }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0420\u043e\u0443\u0442<\/th>\n<th>\u041f\u0440\u0438\u043c\u0435\u0440 URL<\/th>\n<th><code>params<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>app\/items\/[slug]\/route.js<\/code><\/td>\n<td><code>\/items\/a<\/code><\/td>\n<td><code>{ slug: 'a' }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/items\/[slug]\/route.js<\/code><\/td>\n<td><code>\/items\/b<\/code><\/td>\n<td><code>{ slug: 'b' }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>app\/items\/[slug]\/route.js<\/code><\/td>\n<td><code>\/items\/c<\/code><\/td>\n<td><code>{ slug: 'c' }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em>\u0421\u0442\u0440\u043e\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 URL<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0440\u043e\u0443\u0442\u0430, \u044d\u0442\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>NextRequest<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0449\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/search\/route.ts import type { NextRequest } from 'next\/server'  export function GET(request: NextRequest) {   const searchParams = request.nextUrl.searchParams   const query = searchParams.get('query')   \/\/ `query` \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 `\"hello\"` \u0434\u043b\u044f `\/api\/search?query=hello` }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u043c\u0438 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a OpenAI, \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/chat\/route.ts import OpenAI from 'openai' import { OpenAIStream, StreamingTextResponse } from 'ai'  const openai = new OpenAI({   apiKey: process.env.OPENAI_API_KEY, })  export const runtime = 'edge'  export async function POST(req: Request) {   const { messages } = await req.json()   const response = await openai.chat.completions.create({     model: 'gpt-3.5-turbo',     stream: true,     messages,   })    const stream = OpenAIStream(response)    return new StreamingTextResponse(stream) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <code>Web API<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts \/\/ https:\/\/developer.mozilla.org\/docs\/Web\/API\/ReadableStream#convert_async_iterator_to_stream function iteratorToStream(iterator: any) {   return new ReadableStream({     async pull(controller) {       const { value, done } = await iterator.next()        if (done) {         controller.close()       } else {         controller.enqueue(value)       }     },   }) }  function sleep(time: number) {   return new Promise((resolve) => {     setTimeout(resolve, time)   }) }  const encoder = new TextEncoder()  async function* makeIterator() {   yield encoder.encode('&lt;p>\u041e\u0434\u0438\u043d&lt;\/p>')   await sleep(200)   yield encoder.encode('&lt;p>\u0414\u0432\u0430&lt;\/p>')   await sleep(200)   yield encoder.encode('&lt;p>\u0422\u0440\u0438&lt;\/p>') }  export async function GET() {   const iterator = makeIterator()   const stream = iteratorToStream(iterator)    return new Response(stream) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0422\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/route.ts export async function POST(request: Request) {   const res = await request.json()    return Response.json({ res }) }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>FormData<\/code><\/em><\/p>\n<p>  <\/p>\n<p><code>FormData<\/code> \u043c\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>request.formData<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/route.ts export async function POST(request: Request) {   const formData = await request.formData()   const name = formData.get('name')   const email = formData.get('email')    return Response.json({ name, email }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 <code>FormData<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>number<\/code>) \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/www.npmjs.com\/zod-form-data\">zod-form-data<\/a>.<\/p>\n<p>  <\/p>\n<p><em>CORS<\/em><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 CORS \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts export const dynamic = 'force-dynamic' \/\/ \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e `auto`  export async function GET(request: Request) {   return new Response('\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!', {     status: 200,     headers: {       'Access-Control-Allow-Origin': '*',       'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',       'Access-Control-Allow-Headers': 'Content-Type, Authorization',     },   }) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0412\u0435\u0431-\u0445\u0443\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0445\u0443\u043a\u043e\u0432 \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/api\/route.ts export async function POST(request: Request) {   try {     const text = await request.text()     \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0435\u0431-\u0445\u0443\u043a\u0430   } catch (error) {     return new Response(`\u041e\u0448\u0438\u0431\u043a\u0430: ${error.message}`, {       status: 400,     })   }    return new Response('\u0423\u0441\u043f\u0435\u0445', {     status: 200,   }) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0413\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0438 Node.js \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u0438\u0437\u043e\u043c\u043e\u0440\u0444\u043d\u044b\u0439 <code>Web API<\/code> \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 (edge) \u0438 Node.js \u0441\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433\u0430. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430, \u0447\u0442\u043e \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043c\u0430\u043a\u0435\u0442\u044b, \u043e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>runtime<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const runtime = 'edge' \/\/ \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e `nodejs`<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0442\u0432\u0435\u0442\u044b \u043d\u0435 UI<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 UI. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <code>sitemap.xml<\/code>, <code>robots.txt<\/code>, \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f OpenGraph \u0438\u043c\u0435\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/rss.xml\/route.ts export const dynamic = 'force-dynamic'  export async function GET() {   return new Response(     `&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?> &lt;rss version=\"2.0\">  &lt;channel>   &lt;title>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Next.js&lt;\/title>   &lt;link>https:\/\/nextjs.org\/docs&lt;\/link>   &lt;description>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a React \u0434\u043b\u044f \u0432\u0435\u0431\u0430&lt;\/description> &lt;\/channel>  &lt;\/rss>`,     {       headers: {         'Content-Type': 'text\/xml',       },     }   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430, \u0447\u0442\u043e \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043c\u0430\u043a\u0435\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/items\/route.ts export const dynamic = 'auto' export const dynamicParams = true export const revalidate = false export const fetchCache = 'auto' export const runtime = 'nodejs' export const preferredRegion = 'auto'<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"posredniki\">\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a (middleware) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u043f\u0443\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438, \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u0438 \u0440\u0430\u043d\u043d\u0435\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u043e\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435\u043c \u0440\u043e\u0443\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>middleware.js<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0435\u0439 <code>app<\/code> \u0438\u043b\u0438 <code>src<\/code>).<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NextResponse } from 'next\/server' import type { NextRequest } from 'next\/server'  \/\/ \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 export function middleware(request: NextRequest) {   return NextResponse.redirect(new URL('\/home', request.url)) }  export const config = {   matcher: '\/about\/:path*', }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043f\u0443\u0442\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<p>  <\/p>\n<ol>\n<li><code>headers<\/code> \u0438\u0437 <code>next.config.js<\/code>.<\/li>\n<li><code>redirects<\/code> \u0438\u0437 <code>next.config.js<\/code>.<\/li>\n<li>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a (\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438, \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0434\u0440.).<\/li>\n<li><code>beforeFiles<\/code> (\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438) \u0438\u0437 <code>next.config.js<\/code><\/li>\n<li>\u0420\u043e\u0443\u0442\u044b \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b (<code>public\/<\/code>, <code>_next\/static\/<\/code>, <code>app\/<\/code> \u0438 \u0434\u0440.)<\/li>\n<li><code>afterFiles<\/code> (\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438) \u0438\u0437 <code>next.config.js<\/code>.<\/li>\n<li>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b (<code>\/blog\/[slug]<\/code>).<\/li>\n<li><code>fallback<\/code> (\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438) \u0438\u0437 <code>next.config.js<\/code>.<\/li>\n<\/ol>\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\u0438\u0442\u044c, \u0434\u043b\u044f \u043a\u0430\u043a\u0438\u0445 \u043f\u0443\u0442\u0435\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 &#171;\u043c\u0430\u0442\u0447\u0435\u0440\u0430&#187; (matcher).<\/li>\n<li>\u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>\u041c\u0430\u0442\u0447\u0435\u0440<\/em><\/p>\n<p>  <\/p>\n<p><code>matcher<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const config = {   matcher: '\/about\/:path*', }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0443\u0442\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const config = {   matcher: ['\/about\/:path*', '\/dashboard\/:path*'], }<\/code><\/pre>\n<p>  <\/p>\n<p><code>matcher<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439:<\/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 \u043f\u0443\u0442\u044f\u043c\u0438, \u043a\u0440\u043e\u043c\u0435 \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      *\/     '\/((?!api|_next\/static|_next\/image|favicon.ico).*)',   ], }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \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 \u0440\u043e\u0443\u0442\u043e\u0432 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430, \u043c\u043e\u0436\u043d\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <code>missing<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const config = {   matcher: [     {       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>\u041f\u0443\u0442\u0438 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 <code>\/<\/code><\/li>\n<li>\u043c\u043e\u0433\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b: <code>\/about\/:path<\/code> \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 <code>\/about\/a<\/code> \u0438 <code>\/about\/b<\/code>, \u043d\u043e \u043d\u0435 \u0441 <code>\/about\/a\/c<\/code><\/li>\n<li>\u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (\u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441 <code>:<\/code>): <code>\/about\/:path*<\/code> \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 <code>\/about\/a\/b\/c<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>*<\/code> \u2014 \u043d\u0443\u043b\u044c \u0438 \u0431\u043e\u043b\u0435\u0435. <code>?<\/code> \u2014 \u044d\u0442\u043e \u043d\u0443\u043b\u044c \u0438\u043b\u0438 \u043e\u0434\u0438\u043d, \u0430 <code>+<\/code> \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438 \u0431\u043e\u043b\u0435\u0435<\/li>\n<li>\u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0438, \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438: <code>\/about\/(.*)<\/code> \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e <code>\/about\/:path*<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NextResponse } from 'next\/server' import type { NextRequest } from 'next\/server'  export function middleware(request: NextRequest) {   if (request.nextUrl.pathname.startsWith('\/about')) {     return NextResponse.rewrite(new URL('\/about-2', request.url))   }    if (request.nextUrl.pathname.startsWith('\/dashboard')) {     return NextResponse.rewrite(new URL('\/dashboard\/user', request.url))   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>NextResponse<\/strong><\/p>\n<p>  <\/p>\n<p><code>NextResponse<\/code> API \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c (<code>redirect<\/code>) \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 URL<\/li>\n<li>\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c (<code>rewrite<\/code>) \u043e\u0442\u0432\u0435\u0442 \u043f\u0443\u0442\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e URL<\/li>\n<li>\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u043e\u0432 API, <code>getServerSideProps<\/code> \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <code>rewrite<\/code><\/li>\n<li>\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043a\u0443\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430<\/li>\n<li>\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u0432 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0435 \u043c\u043e\u0436\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>rewrite<\/code> \u0432 \u0440\u043e\u0443\u0442 (\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430), \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0432\u0435\u0442<\/li>\n<li>\u0432\u0435\u0440\u043d\u0443\u0442\u044c <code>NextResponse<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0443\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0443\u043a\u0438 \u2014 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438. \u0412 <code>Request<\/code> \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 <code>Cookie<\/code>, \u0432 <code>Response<\/code> \u2014 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 <code>Set-Cookie<\/code>. Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0443\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 <code>cookies<\/code> \u043d\u0430 <code>NextRequest<\/code> \u0438 <code>NextResponse<\/code>.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0414\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 <code>cookies<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b <code>get<\/code>, <code>getAll<\/code>, <code>set<\/code>, <code>delete<\/code>, <code>has<\/code> \u0438 <code>clear<\/code>.<\/li>\n<li>\u0414\u043b\u044f \u043e\u0442\u0432\u0435\u0442\u0430 <code>cookies<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b <code>get<\/code>, <code>getAll<\/code>, <code>set<\/code> \u0438 <code>delete<\/code>.<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NextResponse } from 'next\/server' import type { NextRequest } from 'next\/server'  export function middleware(request: NextRequest) {   \/\/ \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \"Cookie:nextjs=fast\"   \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0443\u043a\u0438 \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e `RequestCookies` API   let cookie = request.cookies.get('nextjs')   console.log(cookie) \/\/ => { name: 'nextjs', value: 'fast', Path: '\/' }   const allCookies = request.cookies.getAll()   console.log(allCookies) \/\/ => [{ name: 'nextjs', value: 'fast' }]    request.cookies.has('nextjs') \/\/ => true   request.cookies.delete('nextjs')   request.cookies.has('nextjs') \/\/ => false    \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0443\u043a\u0438 \u0432 \u043e\u0442\u0432\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e `ResponseCookies` API   const response = NextResponse.next()   response.cookies.set('vercel', 'fast')   response.cookies.set({     name: 'vercel',     value: 'fast',     path: '\/',   })   cookie = response.cookies.get('vercel')   console.log(cookie) \/\/ => { name: 'vercel', value: 'fast', Path: '\/' }   \/\/ \u041e\u0442\u0432\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `Set-Cookie:vercel=fast;path=\/`    return response }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c API <code>NextResponse<\/code> (\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0441 Next.js@13.0.0):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NextResponse } from 'next\/server' import type { NextRequest } from 'next\/server'  export function middleware(request: NextRequest) {   \/\/ \u041a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-hello-from-middleware1`   const requestHeaders = new Headers(request.headers)   requestHeaders.set('x-hello-from-middleware1', 'hello')    \/\/ \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432 `NextResponse.rewrite`   const response = NextResponse.next({     request: {       \/\/ \u041d\u043e\u0432\u044b\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430       headers: requestHeaders,     },   })    \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043e\u0442\u0432\u0435\u0442\u0430 `x-hello-from-middleware2`   response.headers.set('x-hello-from-middleware2', 'hello')   return response }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u0432\u0435\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c <code>Response<\/code> \u0438\u043b\u0438 <code>NextResponse<\/code> (\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0441 Next.js@13.1.0):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NextRequest } from 'next\/server' import { isAuthenticated } from '@lib\/auth'  \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430 \u043f\u0443\u0442\u044f\u043c\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0441 `\/api\/` export const config = {   matcher: '\/api\/:function*', }  export function middleware(request: NextRequest) {   \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430   if (!isAuthenticated(request)) {     \/\/ \u041e\u0442\u0432\u0435\u0447\u0430\u0435\u043c JSON, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435     return Response.json(       { success: false, message: '\u041f\u0440\u043e\u0432\u0430\u043b \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438' },       { status: 401 }     )   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>waitUntil<\/code> \u0438 <code>NextFetchEvent<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 <code>NextFetchEvent<\/code> \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/FetchEvent\">FetchEvent<\/a> \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/ExtendableEvent\/waitUntil\">waitUntil<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>waitUntil<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430 \u0434\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043c\u0438\u0441\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NextResponse } from 'next\/server' import type { NextFetchEvent, NextRequest } from 'next\/server'  export function middleware(req: NextRequest, event: NextFetchEvent) {   event.waitUntil(     fetch('https:\/\/my-analytics-platform.com', {       method: 'POST',       body: JSON.stringify({ pathname: req.nextUrl.pathname }),     })   )    return NextResponse.next() }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0444\u043b\u0430\u0433\u0438 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 Next.js@13.1 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u0444\u043b\u0430\u0433\u0430 \u0434\u043b\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430: <code>skipMiddlewareUrlNormalize<\/code> \u0438 <code>skipTrailingSlashRedirect<\/code>.<\/p>\n<p>  <\/p>\n<p><code>skipTrailingSlashRedirect<\/code> \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Next.js \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0445 \u0441\u043b\u044d\u0448\u0435\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0435 \u0441\u043b\u044d\u0448\u0438 \u0434\u043b\u044f \u043e\u0434\u043d\u0438\u0445 \u043f\u0443\u0442\u0435\u0439 \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js module.exports = {   skipTrailingSlashRedirect: true, }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ middleware.js const legacyPrefixes = ['\/docs', '\/blog']  export default async function middleware(req) {   const { pathname } = req.nextUrl    if (legacyPrefixes.some((prefix) => pathname.startsWith(prefix))) {     return NextResponse.next()   }    \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0445 \u0441\u043b\u044d\u0448\u0435\u0439   if (     !pathname.endsWith('\/') &amp;&amp;     !pathname.match(\/((?!\\.well-known(?:\\\/.*)?)(?:[^\/]+\\\/)*[^\/]+\\.\\w+)\/)   ) {     req.nextUrl.pathname += '\/'     return NextResponse.redirect(req.nextUrl)   } }<\/code><\/pre>\n<p>  <\/p>\n<p><code>skipMiddlewareUrlNormalize<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e URL \u0432 Next.js \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0440\u044f\u043c\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u044d\u0442\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \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 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e URL.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js module.exports = {   skipMiddlewareUrlNormalize: true, }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ middleware.js export default async function middleware(req) {   const { pathname } = req.nextUrl    \/\/ GET \/_next\/data\/build-id\/hello.json    console.log(pathname)   \/\/ \u0421 \u0444\u043b\u0430\u0433\u043e\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0443\u0442\u0438 \u0438\u043c\u0435\u0435\u0442 \u0432\u0438\u0434 `\/_next\/data\/build-id\/hello.json`   \/\/ \u0411\u0435\u0437 \u0444\u043b\u0430\u0433\u0430 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u043e `\/hello` }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, Node.js \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0446 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430.<\/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\/804663\/\"> https:\/\/habr.com\/ru\/articles\/804663\/<\/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 \u043f\u0435\u0440\u0432\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\/808259\/\">\u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/810055\/\">\u0422\u0440\u0435\u0442\u044c\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-372483","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/372483","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=372483"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/372483\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=372483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=372483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=372483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}