{"id":387527,"date":"2024-06-29T07:22:22","date_gmt":"2024-06-29T07:22:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=387527"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=387527","title":{"rendered":"<span>Next.js: \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e. \u0418\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u0432\u0442\u043e\u0440\u0430\u044f<\/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\/2s\/qg\/xv\/2sqgxvllqf-p6w-a6axpi4l8qfo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/2s\/qg\/xv\/2sqgxvllqf-p6w-a6axpi4l8qfo.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u043e <code>Next.js<\/code> (\u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043a\u043e\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f).<\/p>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 <code>React<\/code> \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \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, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 <code>SPA<\/code>, \u0442.\u0435. \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c <code>SPA<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u043e\u0431\u043e\u0442\u0430\u043c\u0438, \u0447\u0442\u043e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 <code>SEO<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043f\u043e \u043c\u043e\u0438\u043c \u043b\u0438\u0447\u043d\u044b\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f\u043c, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043b\u0430 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <a href=\"https:\/\/typescript-handbook.ru\/\"><code>\u043c\u043e\u0435\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e SPA-PWA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/code><\/a> \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/stereobooster\/react-snap\"><code>react-snap<\/code><\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c <code>React-SPA<\/code> \u0432 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u043f\u0443\u0442\u0435\u043c \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 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u041c\u0435\u0442\u0430\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432 <code>head<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u0438\u0445 \u0443\u0442\u0438\u043b\u0438\u0442, \u043a\u0430\u043a <a href=\"https:\/\/www.npmjs.com\/package\/react-helmet\"><code>react-helmet<\/code><\/a>. \u041e\u0434\u043d\u0430\u043a\u043e <code>Next.js<\/code> \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u043e\u0433\u043e \u0436\u0435 <code>react-snap<\/code>). \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/nextjs.org\/docs\/getting-started\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <code>React<\/code>. \u0422\u0430\u043a\u0436\u0435 <em>\u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>, \u0447\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0430\u0441 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u043c \u043f\u043e <code>Next.js<\/code>, \u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e \u043d\u0435\u043c \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 2 \u0447\u0430\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043d\u043e\u043c\u0435\u0440 \u0434\u0432\u0430.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/588498\/\">\u0418\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0432\u0430\u044f<\/a><\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p><em>\u0420\u0435\u043c\u0430\u0440\u043a\u0430<\/em>: \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0438\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0440\u0430\u0431\u043e\u0447\u0438\u043c\u0438 \u0438\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 <code>MD<\/code> \u0445\u0430\u0431\u0440\u043e\u0432\u0441\u043a\u0438\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"#%D0%BF%D1%80%D0%BE%D0%B4%D0%B2%D0%B8%D0%BD%D1%83%D1%82%D1%8B%D0%B5-%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/a><br \/> \n<ul>\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%B0%D1%8F-%D0%BC%D0%B0%D1%80%D1%88%D1%80%D1%83%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\">\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#%D1%8D%D0%BA%D1%81%D0%BF%D0%BE%D1%80%D1%82-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B9-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8\">\u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/a><\/li>\n<li><a href=\"#%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%8B%D0%B9-%D0%B8%D0%BC%D0%BF%D0%BE%D1%80%D1%82-%D0%B8-%D1%81%D0%B8%D0%BD%D0%BE%D0%BD%D0%B8%D0%BC%D1%8B-%D0%BF%D1%83%D1%82%D0%B5%D0%B9-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D0%B5%D0%B9\">\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><\/li>\n<li><a href=\"#%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%BD%D1%8B%D0%B9-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440<\/a><\/li>\n<li><a href=\"#%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%BD%D0%BE%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%BD%D1%8B%D0%B5-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a<\/a><\/li>\n<li><a href=\"#%D0%B4%D0%B8%D1%80%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%B8%D1%8F-src\"><code>\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f src<\/code><\/a><\/li>\n<li><a href=\"#%D0%BB%D0%BE%D0%BA%D0%B0%D0%BB%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%B0%D1%8F-%D0%BC%D0%B0%D1%80%D1%88%D1%80%D1%83%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\">\u041b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f (\u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f)<\/a><\/li>\n<li><a href=\"#%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8-%D0%B1%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8\">\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#api\">API<\/a><br \/> \n<ul>\n<li><a href=\"#next-cli\">Next CLI<\/a><\/li>\n<li><a href=\"#create-next-app\">Create Next App<\/a><\/li>\n<li><a href=\"#nextrouter\"><code>next\/router<\/code><\/a><\/li>\n<li><a href=\"#nextlink\"><code>next\/link<\/code><\/a><\/li>\n<li><a href=\"#nextimage\"><code>next\/image<\/code><\/a><\/li>\n<li><a href=\"#nexthead\"><code>next\/head<\/code><\/a><\/li>\n<li><a href=\"#nextserver\"><code>next\/server<\/code><\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#nextconfigjs\"><code>next.config.js<\/code><\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"prodvinutye-vozmozhnosti\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  <\/p>\n<h3 id=\"dinamicheskaya-marshrutizaciya\">\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 <code>import<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 <code>SSR<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0435\u0442\u043e\u0447\u043d\u044b\u0439 (fuzzy) \u043f\u043e\u0438\u0441\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/fusejs.io\/\"><code>fuse.js<\/code><\/a>, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044f \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useState } from 'react'  const names = ['John', 'Jane', 'Alice', 'Bob', 'Harry']  export default function Page() {   const [results, setResults] = useState([])    return (     &lt;div>       &lt;input         type=\"text\"         placeholder=\"\u041f\u043e\u0438\u0441\u043a\"         onChange={async ({ currentTarget: { value } }) => {           \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438           const Fuse = (await import('fuse.js')).default           const fuse = new Fuse(names)            setResults(fuse.search(value))         }}       \/>       &lt;pre>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430: {JSON.stringify(results, null, 2)}&lt;\/pre>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 (code splitting), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 <code>React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/code> \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 <code>next\/dynamic<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u044b\u0447\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c <code>..\/components\/Hello<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic' import Header from '..\/components\/Header'  const DynamicHello = dynamic(() => import('..\/components\/Hello'))  export default function Home() {   return (     &lt;div>       &lt;Header \/>       &lt;DynamicHello \/>       &lt;h1>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/Hello.js export const Hello = () => &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442!&lt;\/p><\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0435\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0437 <code>Promise<\/code>, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e <code>import<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic' import Header from '..\/components\/Header'  const DynamicHello = dynamic(() =>   import('..\/components\/Hello')     .then((module) => module.Hello) )  export default function Home() {   return (     &lt;div>       &lt;Header \/>       &lt;DynamicHello \/>       &lt;h1>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \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 <code>loading<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic' import Header from '..\/components\/Header'  const DynamicHelloWithCustomLoading = dynamic(   () => import('..\/components\/Hello'),   { loading: () => &lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p> } )  export default function Home() {   return (     &lt;div>       &lt;Header \/>       &lt;DynamicHelloWithCustomLoading \/>       &lt;h1>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 <code>SSR<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \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 <code>ssr<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic' import Header from '..\/components\/Header'  const DynamicHelloWithNoSSR = dynamic(   () => import('..\/components\/Hello'),   { ssr: false } )  export default function Home() {   return (     &lt;div>       &lt;Header \/>       &lt;DynamicHelloWithNoSSR \/>       &lt;h1>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>suspense<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043b\u0435\u043d\u0438\u0432\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 <code>React.lazy<\/code> \u0438 <code>&lt;Suspense><\/code>. <em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>, \u0447\u0442\u043e \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 <code>fallback<\/code>. \u041f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <code>SSR<\/code> \u0432 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import dynamic from 'next\/dynamic' import Header from '..\/components\/Header'  const DynamicLazyHello = dynamic(() => import('..\/components\/Hello'), { suspense: true })  export default function Home() {   return (     &lt;div>       &lt;Header \/>       &lt;DynamicLazyHello \/>       &lt;h1>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"avtomaticheskaya-staticheskaya-optimizaciya\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 <code>getServerSideProps<\/code>, <code>Next.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 (\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).<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, <code>Next.js<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \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 \u043e\u0431\u044a\u0435\u043a\u0442 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 <code>query<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u044b\u043c. \u041f\u043e\u0441\u043b\u0435 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 <code>Next.js<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f <code>query<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><code>next build<\/code> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 HTML-\u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0434\u043b\u044f <code>pages\/about.js<\/code> \u0431\u0443\u0434\u0435\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">.next\/server\/pages\/about.html<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0435\u0441\u043b\u0438 \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>getServerSideProps<\/code>, \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">.next\/server\/pages\/about.js<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e <code>App<\/code> \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0431\u0435\u0437 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f<\/li>\n<li>\u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e <code>Document<\/code> \u0441 <code>getInitialProps<\/code> \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 <code>ctx.req<\/code> \u043f\u0435\u0440\u0435\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0414\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e, <code>ctx.req<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>undefined<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"eksport-staticheskoy-razmetki\">\u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p><code>next export<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 <code>HTML<\/code>. \u0422\u0430\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 <code>Next.js<\/code>, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442.<\/p>\n<p>  <\/p>\n<p><code>next export<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0437\u0430 \u0441\u0447\u0435\u0442 \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\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 <code>HTML<\/code>. \u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>getStaticPaths<\/code>, \u0447\u0442\u043e\u0431\u044b <code>Next.js<\/code> \u043c\u043e\u0433 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><code>next export<\/code> \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u0435\u0437 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0422\u0430\u043a\u0438\u0435 \u0444\u0438\u0447\u0438, \u043a\u0430\u043a \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438 \u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>next export<\/code> \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">next build &amp;&amp; next export<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>out<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>next export<\/code> \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. HTML-\u0444\u0430\u0439\u043b\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>pages<\/code>. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>exportPathMap<\/code> \u0432 <code>next.config.js<\/code> \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>next export<\/code> \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c HTML-\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getStaticProps<\/code>, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e <code>getStaticProps<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>getInitialProps<\/code>, \u043d\u043e \u044d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/li>\n<li>\u0440\u0435\u0436\u0438\u043c <code>fallback: true<\/code> \u0432 <code>getStaticProps<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li>\n<li>\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li>\n<li><code>getServerSideProps<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li>\n<li>\u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li>\n<li>\u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Image<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f (\u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>loader<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f)<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"absolyutnyy-import-i-sinonimy-putey-moduley\">\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h3>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>baseUrl<\/code> \u0438 <code>paths<\/code> \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 <code>tsconfig.json<\/code> \u0438 <code>jsconfig.json<\/code>.<\/p>\n<p>  <\/p>\n<p><code>baseUrl<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ `tsconfig.json` \u0438\u043b\u0438 `jsconfig.json` {   \"compilerOptions\": {     \"baseUrl\": \".\"   } }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/button.js export const Button = () => &lt;button>Click Me&lt;\/button>  \/\/ pages\/index.js import { Button } from 'components\/button'  export default function Index() {   return (     &lt;>       &lt;h1>\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/h1>       &lt;Button \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><code>paths<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b \u0434\u043b\u044f \u043f\u0443\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ `tsconfig.json` \u0438\u043b\u0438 `jsconfig.json` {   \"compilerOptions\": {     \"baseUrl\": \".\",     \"paths\": {       \"@\/*\": [\"components\/*\"]     }   } }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/button.js export const Button = () => &lt;button>Click Me&lt;\/button>  \/\/ pages\/index.js import { Button } from '@\/button'  export default function Index() {   return (     &lt;>       &lt;h1>\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/h1>       &lt;Button \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"kastomnyy-server\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440<\/h3>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ server.js const { createServer } = require('http') const { parse } = require('url') const next = require('next')  const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler()  app.prepare().then(() => {   createServer((req, res) => {     \/\/ `true` \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0431\u043e\u0440 \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430     const parseUrl = parse(req.url, true)     const { pathname, query } = parseUrl      switch (pathname) {       case '\/a':         return app.render(req, res, '\/a', query)       case '\/b':         return app.render(req, res, '\/b', query)       default:         handle(req, res, parsedUrl)     }   }).listen(3000, (err) => {     if (err) throw err     console.log('\u0417\u0430\u043f\u0443\u0449\u0435\u043d \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443: http:\/\/localhost:3000')   }) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b <code>scripts<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"scripts\": {   \"dev\": \"node server.js\",   \"build\": \"next build\",   \"start\": \"NODE_ENV=production node server.js\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a <code>Next.js-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const next = require('next') const app = next({})<\/code><\/pre>\n<p>  <\/p>\n<p><code>next<\/code> \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>dev: boolean<\/code> \u2014 \u0437\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/li>\n<li><code>dir: string<\/code> \u2014 \u043a\u043e\u0440\u043d\u0435\u0432\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>.<\/code>)<\/li>\n<li><code>quiet: boolean<\/code> \u2014 \u0435\u0441\u043b\u0438 <code>true<\/code>, \u043e\u0448\u0438\u0431\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>false<\/code>)<\/li>\n<li><code>conf: object<\/code> \u2014 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 <code>next.config.js<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e <code>app<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>Next.js<\/code> \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>pages<\/code> \u043f\u043e \u043f\u0443\u0442\u0438, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u0430. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u0444\u0430\u0439\u043b\u0430\u0445 \u0432 <code>pages<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>useFileSystemPublicRoutes<\/code> \u0432 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   useFileSystemPublicRoutes: false }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c \u0444\u0430\u0439\u043b\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>SSR<\/code>. \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u0438\u043c \u043f\u0443\u0442\u044f\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"kastomnoe-prilozhenie\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>App<\/code> \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043c\u0430\u043a\u0435\u0442 (layout) \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438<\/li>\n<li>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \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<\/li>\n<li>\u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>componentDidCatch<\/code><\/li>\n<li>\u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e <code>App<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>pages\/_app.js<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ pages\/_app.js import App from 'next\/app'  function MyApp({ Component, pageProps }) {   return &lt;Component {...pageProps} \/> }  MyApp.getInitialProps = async (appContext) => {   const appProps = await App.getInitialProps(appContext)    return { ...appProps } }  export default MyApp<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f <code>Component<\/code> \u2014 \u044d\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. <code>pageProps<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u043f\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u044b\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e <code>App<\/code> (\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u0430 <code>pages\/_app.js<\/code>) \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/li>\n<li>\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e <code>getInitialProps<\/code> \u0432 <code>App<\/code> \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0431\u0435\u0437 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438<\/li>\n<li>\u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 <code>getInitialProps<\/code> \u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 <code>import App from 'next\/app'<\/code>, \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>App.getInitialProps(appContext)<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>getInitialProps<\/code> \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0442\u0432\u0435\u0442\u0430 \u0441 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c<\/li>\n<li>\u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f <code>App<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u0430\u043a <code>getStaticProps<\/code> \u0438\u043b\u0438 <code>getServerSideProps<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"kastomnye-stranicy-oshibok\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043e\u043a<\/h3>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u043e\u0448\u0438\u0431\u043e\u043a <code>404<\/code> \u0438 <code>500<\/code>. \u0414\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u044b <code>pages\/404.js<\/code> \u0438 <code>pages\/500.js<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ pages\/404.js export default function Custom404() {   return &lt;h1>404 - \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430&lt;\/h1> }  \/\/ pages\/500.js export default function Custom500() {   return &lt;h1>500 - \u041e\u0448\u0438\u0431\u043a\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0430 \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <code>getStaticProps<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0448\u0438\u0431\u043a\u0438 500 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>Error<\/code>. \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>pages\/_error.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u0434 \u0432\u0440\u043e\u0434\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function Error({ statusCode }) {   return (     &lt;p>       {statusCode         ? `\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 ${statusCode}`         : `\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435`}     &lt;\/p>   ) }  Error.getInitialProps = ({ res, err }) => {   const statusCode = res ? res.statusCode : err ? err.statusCode : 404   return { statusCode } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: <code>pages\/_error.js<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435. \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0435\u043a\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0441\u0442\u0430 \u0435\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0448\u0438\u0431\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Error<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Error from 'next\/error'  export async function getServerSideProps() {   const res = await fetch('https:\/\/api.github.com\/repos\/harryheman\/react-total')   const errorCode = res.ok ? false : res.statusCode   const data = await res.json()    return {     props: {       errorCode,       stars: data.stergazers_count     }   } }  export default function Page({ errorCode, stars }) {   if (errorCode) {     return &lt;Error statusCode={errorCode} \/>   }    return &lt;div>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0432\u0435\u0437\u0434: {stars}&lt;\/div> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Error<\/code> \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u043f <code>title<\/code> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434\u0443.<\/p>\n<p>  <\/p>\n<h3 id=\"direktoriya-src\">\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>src<\/code><\/h3>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>src\/pages<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>pages<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>src\/pages<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 <code>pages<\/code><\/li>\n<li>\u0444\u0430\u0439\u043b\u044b \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>next.config.js<\/code> \u0438 <code>tsconfig.json<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>public<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"lokalizovannaya-marshrutizaciya-internacionalizaciya\">\u041b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f (\u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f)<\/h3>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043b\u043e\u043a\u0430\u043b\u0435\u0439, \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u044c \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a \u0434\u043e\u043c\u0435\u043d\u0443 \u043b\u043e\u043a\u0430\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 <code>i18n<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u043a\u0430\u043a <code>react-intl<\/code>, <code>react-i18next<\/code>, <code>lingui<\/code>, <code>rosetta<\/code>, <code>next-intl<\/code> \u0438 \u0434\u0440.<\/p>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <code>i18n<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>. \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043b\u043e\u043a\u0430\u043b\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a <code>\u044f\u0437\u044b\u043a-\u0440\u0435\u0433\u0438\u043e\u043d-\u0441\u043a\u0440\u0438\u043f\u0442<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>en-US<\/code> \u2014 \u0430\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/li>\n<li><code>nl-NL<\/code> \u2014 \u043d\u0438\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439 (\u0433\u043e\u043b\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439)<\/li>\n<li><code>nl<\/code> \u2014 \u043d\u0438\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439 \u0431\u0435\u0437 \u0443\u0447\u0435\u0442\u0430 \u0440\u0435\u0433\u0438\u043e\u043d\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js module.exports = {   i18n: {     \/\/ \u041b\u043e\u043a\u0430\u043b\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c     locales: ['en-US', 'fr', 'nl-NL'],     \/\/ \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f     \/\/ \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043f\u0443\u0442\u0438 \u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430,     \/\/ \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, `\/hello`     defaultLocale: 'en-US',     \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043c\u0435\u043d\u043e\u0432 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043a \u043d\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u0435\u0439     \/\/ (\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u043e\u043c\u0435\u043d\u043e\u0432)     \/\/ \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043f\u043e\u0434\u0434\u043e\u043c\u0435\u043d\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043c\u0435\u043d\u0430,     \/\/ \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, `fr.example.com`     domains: [       {         domain: 'example.com',         defaultLocale: 'en-US'       },       {         domain: 'example.nl',         defaultLocale: 'nl-NL'       },       {         domain: 'example.fr',         defaultLocale: 'fr',         \/\/ \u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 `http` \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f         \/\/ \u043b\u043e\u043a\u0430\u043b\u0438, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0439 \u043a \u0434\u043e\u043c\u0435\u043d\u0443 (\u0442.\u0435. \u043f\u043e `http` \u0432\u043c\u0435\u0441\u0442\u043e `https`)         http: true       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 2 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0431\u043f\u0443\u0442\u0435\u0439 (subpaths) \u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u043e\u043c\u0435\u043d\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><em>\u0420\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0431\u043f\u0443\u0442\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u043e\u043a\u0430\u043b\u044c \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 <code>url<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js module.exports = {   i18n: {     locales: ['en-US', 'fr', 'nl-NL'],     defaultLocale: 'en-US'   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c <code>en-US<\/code>, <code>fr<\/code> \u0438 <code>nl-NL<\/code> \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430, \u0430 <code>en-US<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0414\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <code>pages\/blog<\/code> \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 <code>url<\/code>:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>\/blog<\/code><\/li>\n<li><code>\/fr\/blog<\/code><\/li>\n<li><code>\/nl-nl\/blog<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u0420\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u043e\u043c\u0435\u043d\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u043e\u043a\u0430\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0434\u043e\u043c\u0435\u043d\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js module.exports = {   i18n: {     locales: ['en-US', 'fr', 'nl-NL', 'nl-BE'],     defaultLocale: 'en-US',      domains: [       {         domain: 'example.com',         defaultLocale: 'en-US',       },       {         domain: 'example.fr',         defaultLocale: 'fr',       },       {         domain: 'example.nl',         defaultLocale: 'nl-NL',         \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043b\u043e\u043a\u0430\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u0434\u043e\u043c\u0435\u043d\u043e\u043c         locales: ['nl-BE']       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <code>pages\/blog<\/code> \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 <code>url<\/code>:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>example.com\/blog<\/code><\/li>\n<li><code>example.fr\/blog<\/code><\/li>\n<li><code>example.nl\/blog<\/code><\/li>\n<li><code>example.nl\/nl-BE\/blog<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, <code>Next.js<\/code> \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u043b\u043e\u043a\u0430\u043b\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>Accept-Language<\/code> \u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430. \u041f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043b\u043e\u043a\u0430\u043b\u0438, \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u043e\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 <code>example.com<\/code> \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Accept-Language: fr;q=0.9<\/code>, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u043e\u043c\u0435\u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 <code>example.fr<\/code>, \u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0431\u043f\u0443\u0442\u0435\u0439 \u2014 \u043d\u0430 <code>\/fr<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u0438<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js module.exports = {   i18n: {     localeDetection: false   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043b\u043e\u043a\u0430\u043b\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043b\u043e\u043a\u0430\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0435, \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u0430 <code>useRouter<\/code>. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>locale<\/code> \u2014 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li>\n<li><code>locales<\/code> \u2014 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u0438<\/li>\n<li><code>defaultLocale<\/code> \u2014 \u043b\u043e\u043a\u0430\u043b\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \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 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>getStaticProps<\/code> \u0438\u043b\u0438 <code>getServerSideProps<\/code> \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043b\u043e\u043a\u0430\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>getStaticPaths<\/code> \u043b\u043e\u043a\u0430\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 <code>context<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445 <code>locales<\/code> \u0438 <code>defaultLocale<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043b\u043e\u043a\u0430\u043b\u044f\u043c\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043b\u043e\u043a\u0430\u043b\u044f\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>next\/link<\/code> \u0438\u043b\u0438 <code>next\/router<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f <code>next\/link<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u043e\u043f <code>locale<\/code> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u044c. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u043f \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link'  export default function IndexPage(props) {   return (     &lt;Link href=\"\/another\" locale=\"fr\">       &lt;a>\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a `\/fr\/another`&lt;\/a>     &lt;\/Link>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>next\/router<\/code> \u043b\u043e\u043a\u0430\u043b\u044c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function IndexPage(props) {   const router = useRouter()    return (     &lt;div       onClick={() => {         router.push('\/another', '\/another', { locale: 'fr' })       }}     >       \u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a `\/fr\/another`     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u0438 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0439\u0441\u044f \u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0435, \u0442\u0430\u043a\u043e\u0439 \u0442\u0430\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0430 <code>href<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router' const router = useRouter() const { pathname, asPath, query } = router \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 router.push({ pathname, query }, asPath, { locale: nextLocale })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 <code>href<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link'  export default function IndexPage(props) {   return (     &lt;Link href=\"\/fr\/another\" locale={false}>       &lt;a>\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a `\/fr\/another`&lt;\/a>     &lt;\/Link>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>Next.js<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>Accept-Language<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0443\u043a\u0438 <code>NEXT_LOCALE=\u043b\u043e\u043a\u0430\u043b\u044c<\/code>. \u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0442\u0430\u043a\u043e\u0439 \u043a\u0443\u043a\u0438, <code>Accept-Language<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/li>\n<li><code>Next.js<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>lang<\/code> \u043a \u0442\u0435\u0433\u0443 <code>html<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u043d \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0430 <code>hreflang<\/code> \u2014 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (\u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>next\/head<\/code>).<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u0438 <code>getStaticProps<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>getStaticProps<\/code>, \u0432\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u044b, \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0438\u0437 <code>getStaticPaths<\/code>. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c <code>params<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435 <code>locale<\/code>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0435 \u043b\u043e\u043a\u0430\u043b\u044c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ pages\/blog\/[slug].js export const getStaticPaths = ({ locales }) => {   return {     paths: [       \/\/ \u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 `locale` \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u043e\u043a\u0430\u043b\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e       { params: { slug: 'post-1' }, locale: 'en-US' },       { params: { slug: 'post-1' }, locale: 'fr' },     ],     fallback: true   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0435\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 <code>getStaticProps<\/code>, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043b\u043e\u043a\u0430\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043b\u043e\u043a\u0430\u043b\u0435\u0439, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 <code>getStaticProps<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0436\u0438\u043c <code>fallback<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u0437 <code>getStaticPaths<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043f\u0443\u0442\u0438 \u0438 \u043b\u043e\u043a\u0430\u043b\u0438 \u0434\u043b\u044f \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. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0437 <code>getStaticProps<\/code> \u043d\u0435\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c <code>notFound: true<\/code>, \u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export async function getStaticProps({ locale }) {   \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u044b \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e `API`   const res = await fetch(`https:\/\/example.com\/posts?locale=${locale}`)   const posts = await res.json()    if (posts.length === 0) {     return {       notFound: true     }   }    return {     props: {       posts     }   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>locales<\/code>: \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 100 \u043b\u043e\u043a\u0430\u043b\u0435\u0439<\/li>\n<li><code>domains<\/code>: \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 100 \u0434\u043e\u043c\u0435\u043d\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"zagolovki-bezopasnosti\">\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/md\/security\/security.md\">\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u0438 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043f\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>headers<\/code> \u0432 <code>next.config.js<\/code>. \u0414\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c HTTP-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ next.config.js \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 const securityHeaders = []  module.exports = {   async headers() {     return [       {         \/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u0440\u043e\u0443\u0442\u0430\u043c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438         source: '\/(.*)',         headers: securityHeaders       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p><em><code>X-DNS-Prefetch-Control<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 (prefetching) <code>DNS<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u0437\u0430\u0431\u043b\u0430\u0433\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043c\u0435\u043d\u043e\u0432 \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, <code>CSS<\/code>, <code>JS<\/code> \u0438 \u0442.\u0434. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u043b\u0438\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'X-DNS-Prefetch-Control',   value: 'on' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>Strict-Transport-Security<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>HTTPS<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>HTTP<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'Strict-Transport-Security',   \/\/ 2 \u0433\u043e\u0434\u0430   value: 'max-age=63072000; includeSubDomains; preload' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>X-XSS-Protection<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u043c\u0435\u0436\u0441\u0430\u0439\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0438\u043d\u0433\u0430 \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Content-Security-Policy<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'X-XSS-Protection',   value: '1; mode=block' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>X-Frame-Options<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043c\u043e\u0436\u0435\u0442 \u043b\u0438 \u0441\u0430\u0439\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 <code>iframe<\/code>. \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>frame-ancestors<\/code> \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>CSP<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'X-Frame-Options',   value: 'SAMEORIGIN' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>Permissions-Policy<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 <code>API<\/code> \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (\u0440\u0430\u043d\u044c\u0448\u0435 \u043e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f <code>Feature-Policy<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'Permissions-Policy',   value: 'camera=(), microphone=(), geolocation=()' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>X-Content-Type-Options<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0438\u043f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>Content-Type<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'X-Content-Type-Options',   value: 'nosniff' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>Referrer-Policy<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043c, \u043a\u0430\u043a\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0432\u0435\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'Referrer-Policy',   value: 'origin-when-cross-origin' }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>Content-Security-Policy<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0441\u0442\u0438\u043b\u0435\u0439, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043c\u0435\u0434\u0438\u0430 \u0438 \u0434\u0440.:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{   key: 'Content-Security-Policy',   value: \/\/ \u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 `CSP` }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"api\">API<\/h2>\n<p>  <\/p>\n<h3 id=\"next-cli\">Next CLI<\/h3>\n<p>  <\/p>\n<p><code>Next CLI<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c, \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx next -h<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">NODE_OPTIONS='--throw-deprecation' next NODE_OPTIONS='-r esm' next NODE_OPTIONS='--inspect' next<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0421\u0431\u043e\u0440\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>next build<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0430\u0437\u043c\u0435\u0440 (size) \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/li>\n<li>\u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0439 (first load) <code>JS<\/code> \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0424\u043b\u0430\u0433 <code>--profile<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0444\u0430\u0439\u043b\u0438\u043d\u0433:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">next build --profile<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u043b\u0430\u0433 <code>--verbose<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">next build --verbose<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>next dev<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u043a\u043e\u0434\u0430, \u043e\u0442\u0447\u0435\u0442\u0430\u043c\u0438 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>http:\/\/localhost:3000<\/code>. \u041f\u043e\u0440\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043b\u0430\u0433\u0430 <code>-p<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx next dev -p 4000<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>PORT<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">PORT=4000 npx next dev<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0445\u043e\u0441\u0442 (<code>0.0.0.0<\/code>) \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043b\u0430\u0433\u0430 <code>-H<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx next dev -H 192.168.1.2<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0434\u0430\u043a\u0448\u043d<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>next start<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>next build<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041b\u0438\u043d\u0442\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>next lint<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 <code>ESLint<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445 <code>pages<\/code>, <code>components<\/code> \u0438 <code>lib<\/code>. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u043b\u0430\u0433\u0430 <code>--dir<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">next lint --dir utils<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"create-next-app\">Create Next App<\/h3>\n<p>  <\/p>\n<p>CLI <code>create-next-app<\/code> \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u043e\u043b\u0432\u0430\u043d\u043a\u0443 <code>Next-\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx create-next-app [app-name] # or yarn create next-app [app-name]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <code>TypeScript<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx create-next-app [app-name] --typescript # or yarn create next-app [app-name] --ts<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>--ts | --typescript<\/code> \u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>TS-\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/code><\/li>\n<li><code>-e, --example [example-name][github-url]<\/code> \u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u0412 <code>URL<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u043b\u044e\u0431\u0430\u044f \u0432\u0435\u0442\u043a\u0430 \u0438\/\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f<\/li>\n<li><code>--example-path [path-to-example]<\/code><\/li>\n<li><code>--use-npm<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"nextrouter\"><code>next\/router<\/code><\/h3>\n<p>  <\/p>\n<p><strong><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\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 <code>router<\/code> \u0432 \u043b\u044e\u0431\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export const ActiveLink = ({ children, href }) => {   const router = useRouter()    const style = {     marginRight: 10,     color: router.asPath === href ? 'green' : 'blue',   }    const handleClick = (e) => {     e.preventDefault()     router.push(href)   }    return (     &lt;a href={href} onClick={handleClick} style={style}>       {children}     &lt;\/a>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u044a\u0435\u043a\u0442 <code>router<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 <code>router<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f <code>useRouter<\/code> \u0438 <code>withRouter<\/code> \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>pathname: string<\/code> \u2014 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u043e\u0443\u0442, \u043f\u0443\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437 <code>\/pages<\/code> \u0431\u0435\u0437 <code>basePath<\/code> \u0438\u043b\u0438 <code>locale<\/code><\/li>\n<li><code>query: object<\/code> \u2014 \u0441\u0442\u0440\u043e\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>{}<\/code><\/li>\n<li><code>asPath: string<\/code> \u2014 \u043f\u0443\u0442\u044c (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430), \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0431\u0435\u0437 <code>basePath<\/code> \u0438\u043b\u0438 <code>locale<\/code><\/li>\n<li><code>isFallback: boolean<\/code> \u2014 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435?<\/li>\n<li><code>basePath: string<\/code> \u2014 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0443\u0442\u044c<\/li>\n<li><code>locale: string<\/code> \u2014 \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li>\n<li><code>locales: string[]<\/code> \u2014 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u0438<\/li>\n<li><code>defaultLocale: string<\/code> \u2014 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li>\n<li><code>domainsLocales: Array&lt;{ domain, defaultLocalem locales }><\/code> \u2014 \u043b\u043e\u043a\u0430\u043b\u0438 \u0434\u043b\u044f \u0434\u043e\u043c\u0435\u043d\u043e\u0432<\/li>\n<li><code>isReady: boolean<\/code> \u2014 \u0433\u043e\u0442\u043e\u0432\u044b \u043b\u0438 \u043f\u043e\u043b\u044f \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e? \u041c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 <code>useEffect<\/code><\/li>\n<li><code>isPreview: boolean<\/code> \u2014 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430?<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong><code>router.push<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>router.push<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 <code>next\/link<\/code> \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">router.push(url, as, options)<\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li><code>url: string | object<\/code> \u2014 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/li>\n<li><code>as: string | object<\/code> \u2014 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u0430\u0434\u0440\u0435\u0441\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/li>\n<li><code>options<\/code> \u2014 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<br \/> \n<ul>\n<li><code>scroll: boolean<\/code> \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043b\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0432 \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b? \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>true<\/code><\/li>\n<li><code>shallow: boolean<\/code> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043f\u0443\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>getStaticProps<\/code>, <code>getServerSideProps<\/code> \u0438\u043b\u0438 <code>getInitialProps<\/code>. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code><\/li>\n<li><code>locale: string<\/code> \u2014 \u043b\u043e\u043a\u0430\u043b\u044c \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>pages\/about.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function Page() {   const router = useRouter()    return (     &lt;button className=\"link\" onClick={() => router.push('\/about')}>       \u041e \u043d\u0430\u0441     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>pages\/post\/[pid].js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function Page() {   const router = useRouter()    return (     &lt;button className=\"link\" onClick={() => router.push('\/post\/abc')}>       \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>pages\/login.js<\/code> (\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useEffect } from 'react' import { useRouter } from 'next\/router'  \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f const useUser = () => ({ user: null, loading: false })  export default function Page() {   const { user, loading } = useUser()   const router = useRouter()    useEffect(() => {     if (!loading &amp;&amp; !user) {       router.push('\/login')     }   }, [user, loading])    return user ? &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {user.name}!&lt;\/p> : &lt;p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p> }<\/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 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function ReadMore({ post }) {   const router = useRouter()    return (     &lt;button       className='link'       onClick={() => {         router.push({           pathname: '\/post\/[pid]',           query: { pid: post.id }         })       }}     >       \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>router.replace<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>router.replace<\/code> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0443\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>URL<\/code> \u0432 \u0441\u0442\u0435\u043a <code>history<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">router.replace(url, as, options)<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function Page() {   const router = useRouter()    return (     &lt;button className=\"link\" onClick={() => router.replace('\/home')}>       \u0413\u043b\u0430\u0432\u043d\u0430\u044f     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>router.prefetch<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>router.prefetch<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0434\u043b\u044f \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. <em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: <code>next\/link<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">router.prefetch(url, as)<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0444\u0438\u043b\u044f. \u0414\u043b\u044f \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0444\u0438\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useCallback, useEffect } from 'react' import { useRouter } from 'next\/router'  export default function Login() {   const router = useRouter()    const handleSubmit = useCallback((e) => {     e.preventDefault()      fetch('\/api\/login', {       method: 'POST',       headers: { 'Content-Type': 'application\/json' },       body: JSON.stringify({         \/* \u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f *\/       }),     }).then((res) => {       \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0444\u0438\u043b\u044f       if (res.ok) router.push('\/dashboard')     })   }, [])    useEffect(() => {     \/\/ \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0444\u0438\u043b\u044f     router.prefetch('\/dashboard')   }, [])    return (     &lt;form onSubmit={handleSubmit}>       {\/* \u041f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b *\/}       &lt;button type=\"submit\">\u0412\u043e\u0439\u0442\u0438&lt;\/button>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>router.beforePopState<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>router.beforePopState<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>popstate<\/code> \u043f\u0435\u0440\u0435\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043f\u0443\u0442\u0438 \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">router.beforePopState(cb)<\/code><\/pre>\n<p>  <\/p>\n<p><code>cb<\/code> \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>popstate<\/code>. \u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>url: string<\/code> \u2014 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b)<\/li>\n<li><code>as: string<\/code> \u2014 <code>URL<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/li>\n<li><code>options: object<\/code> \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u0437 <code>router.push<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p><code>beforePopState<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f <code>SSR<\/code>, \u043a\u0430\u043a \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useEffect } from 'react' import { useRouter } from 'next\/router'  export default function Page() {   const router = useRouter()    useEffect(() => {     router.beforePopState(({ url, as, options }) => {       \/\/ \u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043f\u0443\u0442\u0438       if (as !== '\/' &amp;&amp; as !== '\/other') {         \/\/ \u0417\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c `SSR` \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 404         window.location.href = as         return false       }        return true     })   }, [])    return &lt;p>\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c!&lt;\/p> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>router.back<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041f\u0440\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f <code>window.history.back()<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function Page() {   const router = useRouter()    return (     &lt;button className=\"link\" onClick={() => router.back()}>       \u041d\u0430\u0437\u0430\u0434     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>router.reload<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 <code>URL<\/code>. \u041f\u0440\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f <code>window.location.reload()<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useRouter } from 'next\/router'  export default function Page() {   const router = useRouter()    return (     &lt;button className=\"link\" onClick={() => router.reload()}>       \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>router.events<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>routeChangeStart(url, { shallow })<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0430<\/li>\n<li><code>routeChangeComplete(url, { shallow })<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0430<\/li>\n<li><code>routeChangeError(err, url, { shallow })<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u0438 \u043f\u0440\u043e\u0432\u0430\u043b\u0435 \u0438\u043b\u0438 \u043e\u0442\u043c\u0435\u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0430<\/li>\n<li><code>beforeHistoryChange(url, { shallow })<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/li>\n<li><code>hashChangeStart(url, { shallow })<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0445\u0435\u0448-\u0447\u0430\u0441\u0442\u0438 <code>URL<\/code> (\u043d\u043e \u043d\u0435 \u0441\u0430\u043c\u043e\u0433\u043e <code>URL<\/code>)<\/li>\n<li><code>hashChangeComplete(url, { shallow })<\/code> \u2014 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0445\u0435\u0448-\u0447\u0430\u0441\u0442\u0438 <code>URL<\/code> (\u043d\u043e \u043d\u0435 \u0441\u0430\u043c\u043e\u0433\u043e <code>URL<\/code>)<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0437\u0434\u0435\u0441\u044c <code>url<\/code> \u2014 \u044d\u0442\u043e \u0430\u0434\u0440\u0435\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f <code>basePath<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ pages\/_app.js import { useEffect } from 'react' import { useRouter } from 'next\/router'  export default function MyApp({ Component, pageProps }) {   const router = useRouter()    useEffect(() => {     const handleRouteChange = (url, { shallow }) => {       console.log(         `\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 ${url} ${           shallow ? '\u0441' : '\u0431\u0435\u0437'         } \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438`       )     }      router.events.on('routeChangeStart', handleRouteChange)      \/\/ \u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430     \/\/ \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 `off`     return () => {       router.events.off('routeChangeStart', handleRouteChange)     }   }, [])    return &lt;Component {...pageProps} \/> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>withRouter<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e <code>useRouter<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <code>withRouter<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { withRouter } from 'next\/router'  function Page({ router }) {   return &lt;p>{router.pathname}&lt;\/p> }  export default withRouter(Page)<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>TypeScript<\/code><\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import React from 'react' import { withRouter, NextRouter } from 'next\/router'  interface WithRouterProps {   router: NextRouter }  interface MyComponentProps extends WithRouterProps {}  class MyComponent extends React.Component&lt;MyComponentProps> {   render() {     return &lt;p>{this.props.router.pathname}&lt;\/p>   } }  export default withRouter(MyComponent)<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"nextlink\"><code>next\/link<\/code><\/h3>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code>, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0438\u0437 <code>next\/link<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>pages<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>pages\/index.js<\/code><\/li>\n<li><code>pages\/about.js<\/code><\/li>\n<li><code>pages\/blog\/[slug].js<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u044d\u0442\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link'  export default function Home() {   return (     &lt;ul>       &lt;li>         &lt;Link href=\"\/\">           &lt;a>\u0413\u043b\u0430\u0432\u043d\u0430\u044f&lt;\/a>         &lt;\/Link>       &lt;\/li>       &lt;li>         &lt;Link href=\"\/about\">           &lt;a>\u041e \u043d\u0430\u0441&lt;\/a>         &lt;\/Link>       &lt;\/li>       &lt;li>         &lt;Link href=\"\/blog\/hello-world\">           &lt;a>\u041f\u043e\u0441\u0442&lt;\/a>         &lt;\/Link>       &lt;\/li>     &lt;\/ul>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><code>Link<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u043f\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>href<\/code> \u2014 \u043f\u0443\u0442\u044c \u0438\u043b\u0438 <code>URL<\/code> \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u043f<\/li>\n<li><code>as<\/code> \u2014 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043f\u0443\u0442\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/li>\n<li><code>passHref<\/code> \u2014 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 <code>Link<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u043f <code>href<\/code> \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code><\/li>\n<li><code>prefetch<\/code> \u2014 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 <code>true<\/code>. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e <code>Link<\/code>, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (\u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435). \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>prefetch={false}<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0430\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443. \u0414\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f JSON-\u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/li>\n<li><code>replace<\/code> \u2014 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e <code>URL<\/code> \u0432 \u0441\u0442\u0435\u043a. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 <code>false<\/code><\/li>\n<li><code>scroll<\/code> \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0432 \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 <code>true<\/code><\/li>\n<li><code>shallow<\/code> \u2014 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0443\u0442\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430 <code>getStaticProps<\/code>, <code>getServerSideProps<\/code> \u0438\u043b\u0438 <code>getInitialProps<\/code>. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 <code>false<\/code><\/li>\n<li><code>locale<\/code> \u2014 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a \u043f\u0443\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c. <code>locale<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u044c. \u041a\u043e\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code>, \u043f\u0440\u043e\u043f <code>href<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0420\u043e\u0443\u0442 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0434\u043b\u044f <code>pages\/blog\/[slug].js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link'  export default function Posts({ posts }) {   return (     &lt;ul>       {posts.map((post) => (         &lt;li key={post.id}>           &lt;Link href={`\/blog\/${encodeURIComponent(post.slug)}`}>             &lt;a>{post.title}&lt;\/a>           &lt;\/Link>         &lt;\/li>       ))}     &lt;\/ul>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f \u0442\u0435\u0433\u0430 <code>a<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>Link<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 <code>a<\/code>, <code>Link<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u043e\u043f <code>passHref<\/code>. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043a\u0430\u043a <code>styled-components<\/code>. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u0433 <code>a<\/code> \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>href<\/code>, \u0447\u0442\u043e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0438 <code>SEO<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link' import styled from 'styled-components'  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 `a` const RedLink = styled.a`   color: red; `  export default function NavLink({ href, name }) {   \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c `passHref`   return (     &lt;Link href={href} passHref>       &lt;RedLink>{name}&lt;\/RedLink>     &lt;\/Link>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>Link<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u043a\u0440\u043e\u043c\u0435 <code>passHref<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0435 \u0432 <code>React.forwardRef<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link' import { forwardRef } from 'react'  \/\/ `onClick`, `href` \u0438 `ref` \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 const MyButton = forwardRef(({ onClick, href }, ref) => {   return (     &lt;a href={href} onClick={onClick} ref={ref}>       \u041a\u043b\u0438\u043a\u043d\u0438     &lt;\/a>   ) })  export default function Home() {   return (     &lt;Link href=\"\/about\" passHref>       &lt;MyButton \/>     &lt;\/Link>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u044a\u0435\u043a\u0442 <code>URL<\/code><\/strong><\/p>\n<p>  <\/p>\n<p><code>Link<\/code> \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 <code>URL<\/code>. \u0414\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Link from 'next\/link'  export default function Home() {   return (     &lt;ul>       &lt;li>         &lt;Link           href={{             pathname: '\/about',             query: { name: 'test' },           }}         >           &lt;a>\u041e \u043d\u0430\u0441&lt;\/a>         &lt;\/Link>       &lt;\/li>       &lt;li>         &lt;Link           href={{             pathname: '\/blog\/[slug]',             query: { slug: 'my-post' },           }}         >           &lt;a>\u041f\u043e\u0441\u0442&lt;\/a>         &lt;\/Link>       &lt;\/li>     &lt;\/ul>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442: <code>\/about?name=test<\/code><\/li>\n<li>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442: <code>\/blog\/my-post<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043c\u0435\u043d\u0430 <code>URL<\/code><\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Link href=\"\/about\" replace>   &lt;a>\u041e \u043d\u0430\u0441&lt;\/a> &lt;\/Link><\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Link href=\"\/?page=2\" scroll={false}>   &lt;a>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0449\u0435&lt;\/a> &lt;\/Link><\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"nextimage\"><code>next\/image<\/code><\/h3>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Image<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>src<\/code> \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0438\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0443\u0442\u0435\u043c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u043f\u0430 <code>loader<\/code> \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u044d\u0442\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>domains<\/code> \u0444\u0430\u0439\u043b\u0430 <code>next.config.js<\/code><\/li>\n<li><code>width<\/code> \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445: \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/li>\n<li><code>height<\/code> \u2014 \u0432\u044b\u0441\u043e\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445: \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>layout<\/code> \u2014 <code>intrinsic | fixed | responsive | fill<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>intrinsic<\/code><\/li>\n<li><code>loader<\/code> \u2014 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f <code>URL<\/code>. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u043f\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <code>images<\/code> \u0432 <code>next.config.js<\/code>. <code>loader<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <code>src<\/code>, <code>width<\/code> \u0438 <code>quality<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Image from 'next\/image'  const myLoader = ({ src, width, quality }) => `https:\/\/example.com\/${src}?w=${width}&amp;q=${quality || 75}`  const MyImage = (props) => (   &lt;Image     loader={myLoader}     src=\"me.png\"     alt=\"\"     role=\"presentation\"     width={500}     height={500}   \/> )<\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li><code>sizes<\/code> \u2014 \u0441\u0442\u0440\u043e\u043a\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u043a\u0430\u0445. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>100vw<\/code> \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>layout=\"responsive\"<\/code> \u0438\u043b\u0438 <code>layout=\"fill\"<\/code><\/li>\n<li><code>quality<\/code> \u2014 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043e\u0442 <code>1<\/code> \u0434\u043e <code>100<\/code>, \u0433\u0434\u0435 <code>100<\/code> \u2014 \u043b\u0443\u0447\u0448\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>75<\/code><\/li>\n<li><code>priority<\/code> \u2014 \u0435\u0441\u043b\u0438 <code>true<\/code>, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u043c \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430<\/li>\n<li><code>placeholder<\/code> \u2014 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <code>blur<\/code> \u0438 <code>empty<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>empty<\/code>. \u041a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>blur<\/code>, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043f\u0430 <code>blurDataURL<\/code>. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>src<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 <code>JPG<\/code>, <code>PNG<\/code>, <code>WebP<\/code> \u0438\u043b\u0438 <code>AVIF<\/code>, <code>blurDataURL<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u043f\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><code>objectFit<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>layout=\"fill\"<\/code><\/li>\n<li><code>objectPosition<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>layout=\"fill\"<\/code><\/li>\n<li><code>onLoadingComplete<\/code> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044f<\/li>\n<li><code>lazyBoundary<\/code> \u2014 \u0441\u0442\u0440\u043e\u043a\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0435\u0433\u043e \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>200px<\/code><\/li>\n<li><code>unoptimized<\/code> \u2014 \u0435\u0441\u043b\u0438 <code>true<\/code>, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u043b\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>false<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u043f\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Image<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>img<\/code>, \u043a\u0440\u043e\u043c\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>style<\/code> \u2014 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>className<\/code><\/li>\n<li><code>srcSet<\/code> \u2014 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/li>\n<li><code>ref<\/code> \u2014 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>onLoadingComplete<\/code><\/li>\n<li><code>decoding<\/code> \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 <code>async<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u0414\u043e\u043c\u0435\u043d\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0434\u043e\u043c\u0435\u043d\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442 \u0430\u0442\u0430\u043a, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435\u043c \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   images: {     domains: ['assets.acme.com']   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>deviceSizes<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a \u0434\u043b\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u042d\u0442\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>layout=\"responsive\"<\/code> \u0438\u043b\u0438 <code>layout=\"fill\"<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e module.exports = {   images: {     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>imageSizes<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0438\u0441\u043a\u0430. \u042d\u0442\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0447\u043d\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (srcset) \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   images: {     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]   } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"nexthead\"><code>next\/head<\/code><\/h3>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Head<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 <code>head<\/code> \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Head from 'next\/head'  export default function IndexPage() {   return (     &lt;div>       &lt;Head>         &lt;title>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&lt;\/title>         &lt;meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" \/>       &lt;\/Head>       &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/p>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f <code>key<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u0434\u0443\u043f\u043b\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Head from 'next\/head'  export default function IndexPage() {   return (     &lt;div>       &lt;Head>         &lt;title>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&lt;\/title>         &lt;meta property=\"og:title\" content=\"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" key=\"title\" \/>       &lt;\/Head>       &lt;Head>         &lt;meta property=\"og:title\" content=\"\u041d\u043e\u0432\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" key=\"title\" \/>       &lt;\/Head>       &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/p>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e <code>&lt;meta property=\"og:title\" content=\"\u041d\u043e\u0432\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" key=\"title\" \/><\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 <code>head<\/code> \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><code>title<\/code>, <code>meta<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u044f\u043c\u044b\u043c\u0438 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 <code>Head<\/code>. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 \u043e\u0434\u0438\u043d <code>&lt;React.Fragment><\/code> \u0438\u043b\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"nextserver\"><code>next\/server<\/code><\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>middleware<\/code>, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0439\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>_middleware<\/code>. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 <code>FetchEvent<\/code>, <code>Response<\/code> \u0438 <code>Request<\/code>.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import type { NextRequest, NextFetchEvent } from 'next\/server'  export type Middleware = (   request: NextRequest,   event: NextFetchEvent ) => Promise&lt;Response | undefined> | Response | undefined<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f <code>middleware<\/code>. \u042d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439.<\/p>\n<p>  <\/p>\n<p><strong><code>NextRequest<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 <code>NextRequest<\/code> \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>Request<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>cookies<\/code> \u2014 \u043a\u0443\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/li>\n<li><code>nextUrl<\/code> \u2014 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439, \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 <code>URL<\/code>, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0430\u043a\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043a\u0430\u043a <code>pathname<\/code>, <code>basePath<\/code>, <code>trailingSlash<\/code> \u0438 <code>i18n<\/code><\/li>\n<li><code>geo<\/code> \u2014 \u0433\u0435\u043e\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0435<br \/> \n<ul>\n<li><code>country<\/code> \u2014 \u043a\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u044b<\/li>\n<li><code>region<\/code> \u2014 \u043a\u043e\u0434 \u0440\u0435\u0433\u0438\u043e\u043d\u0430<\/li>\n<li><code>city<\/code> \u2014 \u0433\u043e\u0440\u043e\u0434<\/li>\n<li><code>latitude<\/code> \u2014 \u0434\u043e\u043b\u0433\u043e\u0442\u0430<\/li>\n<li><code>longitude<\/code> \u2014 \u0448\u0438\u0440\u043e\u0442\u0430<\/li>\n<\/ul>\n<\/li>\n<li><code>ip<\/code> \u2014 IP-\u0430\u0434\u0440\u0435\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/li>\n<li><code>ua<\/code> \u2014 \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><code>NextRequest<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u043e <code>Request<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import type { NextRequest } from 'next\/server'<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>NextFetchEvent<\/code><\/strong><\/p>\n<p>  <\/p>\n<p><code>NextFetchEvent<\/code> \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 <code>FetchEvent<\/code> \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>waitUntil<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>waitUntil<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043e\u0448\u0438\u0431\u043e\u043a, \u043a\u0430\u043a <code>Sentry<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import type { NextFetchEvent } from 'next\/server'<\/code><\/pre>\n<p>  <\/p>\n<p><strong><code>NextResponse<\/code><\/strong><\/p>\n<p>  <\/p>\n<p><code>NextResponse<\/code> \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 <code>Response<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>cookies<\/code> \u2014 \u043a\u0443\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430<\/li>\n<li><code>redirect()<\/code> \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>NextResponse<\/code> \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 (redirects)<\/li>\n<li><code>rewrite()<\/code> \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>NextResponse<\/code> \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0435\u0439 (rewrites)<\/li>\n<li><code>next()<\/code> \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>NextResponse<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { NextResponse } from 'next\/server'<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"nextconfigjs\"><code>next.config.js<\/code><\/h2>\n<p>  <\/p>\n<p>\u0424\u0430\u0439\u043b <code>next.config.js<\/code> \u0438\u043b\u0438 <code>next.config.mjs<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>Next.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/**  * @type {import('next').NextConfig}  *\/ const nextConfig = {   \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/ }  module.exports = nextConfig<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 <code>next.config.mjs<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/**  * @type {import('next').NextConfig}  *\/ const nextConfig = {   \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/ }  export default nextConfig<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = (phase, { defaultConfig }) => {   \/**    * @type {import('next').NextConfig}    *\/   const nextConfig = {     \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/   }   return nextConfig }<\/code><\/pre>\n<p>  <\/p>\n<p><code>phase<\/code> \u2014 \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0444\u0430\u0437\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>PHASE_EXPORT<\/code><\/li>\n<li><code>PHASE_PRODUCTION_BUILD<\/code><\/li>\n<li><code>PHASE_PRODUCTION_SERVER<\/code><\/li>\n<li><code>PHASE_DEVELOPMENT_SERVER<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0424\u0430\u0437\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 <code>next\/constants<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const { PHASE_DEVELOPMENT_SERVER } = require('next\/constants')  module.exports = (phase, { defaultConfig }) => {   if (phase === PHASE_DEVELOPMENT_SERVER) {     return {       \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 *\/     }   }    return {     \/* \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u044b \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0440<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   env: {     someKey: 'some-value'   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function Page() {   return &lt;h1>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c `someKey` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f `{process.env.someKey}`&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function Page() {   return &lt;h1>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c `someKey` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f `some-value`&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>headers<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 HTTP-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async headers() {     return [       {         source: '\/about',         headers: [           {             key: 'x-custom-header',             value: '\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430',           },           {             key: 'x-another-custom-header',             value: '\u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><code>headers<\/code> \u2014 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 <code>source<\/code> \u0438 <code>headers<\/code>:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>source<\/code> \u2014 \u0430\u0434\u0440\u0435\u0441 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/li>\n<li><code>headers<\/code> \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 <code>key<\/code> \u0438 <code>value<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>basePath: false | undefined<\/code> \u2014 \u0435\u0441\u043b\u0438 <code>false<\/code>, <code>basePath<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0438, \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0435\u0439<\/li>\n<li><code>locale: false | undefined<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u043d\u0430 \u043b\u0438 \u043f\u0440\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li>\n<li><code>has<\/code> \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 <code>type<\/code>, <code>key<\/code> \u0438 <code>value<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043a\u043b\u044e\u0447\u0430\u043c\u0438, \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0443\u0442\u044c <code>\/blog\/:slug<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 <code>\/blog\/hello-world<\/code> (\u0431\u0435\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async headers() {     return [       {         source: '\/blog\/:slug',         headers: [           {             key: 'x-slug',             value: ':slug', \/\/ \u0421\u043e\u0432\u043f\u0430\u0432\u0448\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439           },           {             key: 'x-slug-:slug', \/\/ \u0421\u043e\u0432\u043f\u0430\u0432\u0448\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0435\u0439             value: '\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0438\u0441\u043a \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u043f\u0443\u0442\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>*<\/code> \u043f\u043e\u0441\u043b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>\/blog\/:slug*<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 <code>\/blog\/a\/b\/c\/d\/hello-world<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async headers() {     return [       {         source: '\/blog\/:slug*',         headers: [           {             key: 'x-slug',             value: ':slug*',           },           {             key: 'x-slug-:slug*',             value: '\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u043f\u0443\u0442\u0435\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>\/blog\/:slug(\\\\d{1,})<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 <code>\/blog\/123<\/code>, \u043d\u043e \u043d\u0435 \u0441 <code>\/blog\/abc<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async headers() {     return [       {         source: '\/blog\/:post(\\\\d{1,})',         headers: [           {             key: 'x-post',             value: ':post'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0438\u043c\u0432\u043e\u043b\u044b <code>( ) { } : * + ?<\/code> \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 <code>source<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>\\\\<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async headers() {     return [       {         \/\/ \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 `\/english(default)\/something`         source: '\/english\\\\(default\\\\)\/:slug',         headers: [           {             key: 'x-header',             value: 'some-value'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043a\u0443\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435 <code>has<\/code>. \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0435\u0439 <code>source<\/code> \u0438 <code>has<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>has<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>type: string<\/code> \u2014 <code>header | cookie | host | query<\/code><\/li>\n<li><code>key: string<\/code> \u2014 \u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f<\/li>\n<li><code>value: string | undefined<\/code> \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438. \u0415\u0441\u043b\u0438 <code>undefined<\/code>, \u043b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c. \u0414\u043b\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f <code>hello-world<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>hello-(?&lt;param>.*)<\/code>, <code>world<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>destination<\/code> \u043a\u0430\u043a <code>:param<\/code>:<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   async headers() {     return [       \/\/ \u0415\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-add-header`,       \/\/ \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-another-header`       {         source: '\/:path*',         has: [           {             type: 'header',             key: 'x-add-header',           },         ],         headers: [           {             key: 'x-another-header',             value: 'hello'           }         ]       },       \/\/ \u0415\u0441\u043b\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 `source`, `query` \u0438 `cookie`,       \/\/ \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-authorized`       {         source: '\/specific\/:path*',         has: [           {             type: 'query',             key: 'page',             \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 `page` \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435,             \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c             \/\/ \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0437\u0430\u0445\u0432\u0430\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 `(?&lt;page>home)`             value: 'home',           },           {             type: 'cookie',             key: 'authorized',             value: 'true',           },         ],         headers: [           {             key: 'x-authorized',             value: ':authorized'           }         ]       },       \/\/ \u0415\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-authorized` \u0438 \u043e\u043d       \/\/ \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u0441\u043a\u043e\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-another-header`       {         source: '\/:path*',         has: [           {             type: 'header',             key: 'x-authorized',             value: '(?&lt;authorized>yes|true)',           },         ],         headers: [           {             key: 'x-another-header',             value: ':authorized'           }         ]       },       \/\/ \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0445\u043e\u0441\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f `example.com`,       \/\/ \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0434\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a       {         source: '\/:path*',         has: [           {             type: 'host',             value: 'example.com',           },         ],         headers: [           {             key: 'x-another-header',             value: ':authorized'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>basePath<\/code> \u0438 <code>i18n<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 <code>basePath<\/code>, \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\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 \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e <code>source<\/code>, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e <code>basePath: false<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   basePath: '\/docs',    async headers() {     return [       {         source: '\/with-basePath', \/\/ \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \/docs\/with-basePath         headers: [           {             key: 'x-hello',             value: 'world'           }         ]       },       {         source: '\/without-basePath', \/\/ \u043d\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f         headers: [           {             key: 'x-hello',             value: 'world'           }         ],         basePath: false       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 <code>i18n<\/code> \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e <code>source<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>locales<\/code>, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e <code>locale: false<\/code> \u2014 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>source<\/code> \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 \u043b\u043e\u043a\u0430\u043b\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   i18n: {     locales: ['en', 'fr', 'de'],     defaultLocale: 'en',   },    async headers() {     return [       {         source: '\/with-locale', \/\/ \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0441\u0435\u0445 \u043b\u043e\u043a\u0430\u043b\u0435\u0439         headers: [           {             key: 'x-hello',             value: 'world'           }         ]       },       {         \/\/ \u0440\u0443\u0447\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438         source: '\/nl\/with-locale-manual',         locale: false,         headers: [           {             key: 'x-hello',             value: 'world'           }         ]       },       {         \/\/ \u044d\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 `\/`, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 `en` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f `defaultLocale`         source: '\/en',         locale: false,         headers: [           {             key: 'x-hello',             value: 'world'           }         ]       },       {         \/\/ \u044d\u0442\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \/(en|fr|de)\/(.*), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a         \/\/ `\/` \u0438\u043b\u0438 `\/fr`, \u0430 \u0441 `\/:path*` \u0431\u0443\u0434\u0435\u0442         source: '\/(.*)',         headers: [           {             key: 'x-hello',             value: 'worlld'           }         ]       }     ]   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>Webpack<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0412\u0435\u0431\u043f\u0430\u043a\u0430 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e <code>Next.js<\/code> \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>webpack<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {     \/\/ \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433     return config   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b: \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>isServer<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>buildId: string<\/code> \u2014 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0441\u0431\u043e\u0440\u043a\u0438<\/li>\n<li><code>dev: boolean<\/code> \u2014 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/li>\n<li><code>isServer: boolean<\/code> \u2014 \u0435\u0441\u043b\u0438 <code>true<\/code>, \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/li>\n<li><code>defaultLocales: object<\/code> \u2014 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u044b:<br \/> \n<ul>\n<li><code>babel: object<\/code> \u2014 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>babel-loader<\/code><\/li>\n<\/ul>\n<\/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 <code>defaultLoaders.babel<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   webpack: (config, options) => {     config.module.rules.push({       test: \/\\.mdx\/,       use: [         options.defaultLoaders.babel,         {           loader: '@mdx-js\/loader',           options: pluginOptions.options         }       ]     })      return config   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>distDir<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   distDir: 'build' }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>generateBuildId<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0441\u0431\u043e\u0440\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   generateBuildId: async () => {     \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0445\u0435\u0448 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0433\u0438\u0442-\u043a\u043e\u043c\u043c\u0438\u0442\u0430     return 'my-build-id'   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>eslint<\/code> \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   eslint: {     ignoreDuringBuilds: true   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f <code>typescript<\/code> \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   typescript: {     ignoreBuildErrors: true   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044d\u0442\u043e \u0432\u0441\u0435.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f!<\/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\/590157\/\"> https:\/\/habr.com\/ru\/articles\/590157\/<\/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\/2s\/qg\/xv\/2sqgxvllqf-p6w-a6axpi4l8qfo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/2s\/qg\/xv\/2sqgxvllqf-p6w-a6axpi4l8qfo.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u043e <code>Next.js<\/code> (\u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043a\u043e\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f).<\/p>\n<p>  <\/p>\n<p><code>Next.js<\/code> \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 <code>React<\/code> \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \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, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 <code>SPA<\/code>, \u0442.\u0435. \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c <code>SPA<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u043e\u0431\u043e\u0442\u0430\u043c\u0438, \u0447\u0442\u043e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 <code>SEO<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043f\u043e \u043c\u043e\u0438\u043c \u043b\u0438\u0447\u043d\u044b\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f\u043c, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043b\u0430 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <a href=\"https:\/\/typescript-handbook.ru\/\"><code>\u043c\u043e\u0435\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e SPA-PWA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/code><\/a> \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/stereobooster\/react-snap\"><code>react-snap<\/code><\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c <code>React-SPA<\/code> \u0432 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u043f\u0443\u0442\u0435\u043c \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 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u041c\u0435\u0442\u0430\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432 <code>head<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u0438\u0445 \u0443\u0442\u0438\u043b\u0438\u0442, \u043a\u0430\u043a <a href=\"https:\/\/www.npmjs.com\/package\/react-helmet\"><code>react-helmet<\/code><\/a>. \u041e\u0434\u043d\u0430\u043a\u043e <code>Next.js<\/code> \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u043e\u0433\u043e \u0436\u0435 <code>react-snap<\/code>). \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/nextjs.org\/docs\/getting-started\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <code>React<\/code>. \u0422\u0430\u043a\u0436\u0435 <em>\u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>, \u0447\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0430\u0441 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u043c \u043f\u043e <code>Next.js<\/code>, \u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e \u043d\u0435\u043c \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 2 \u0447\u0430\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043d\u043e\u043c\u0435\u0440 \u0434\u0432\u0430.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/588498\/\">\u0418\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0432\u0430\u044f<\/a><\/p>\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-387527","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/387527","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=387527"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/387527\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=387527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=387527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=387527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}