{"id":2301,"date":"2022-01-26T09:37:44","date_gmt":"2022-01-26T09:37:44","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2301"},"modified":"2022-01-26T09:37:44","modified_gmt":"2022-01-26T09:37:44","slug":"next-js-%d0%bf%d0%be%d0%b4%d1%80%d0%be%d0%b1%d0%bd%d0%be%d0%b5-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d1%81%d1%82%d0%b2%d0%be","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2301","title":{"rendered":"Next.js: \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e."},"content":{"rendered":"\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\n\n\n<!--more-->\n\n\n\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\n\n\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\n\n\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\n\n\n<ul><li><a href=\"https:\/\/nextjs.org\/docs\/getting-started\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/li><li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><\/li><\/ul>\n\n\n\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\n\n\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\n\n\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><a><\/a><\/p>\n\n\n\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\n\n\n<ul><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><ul><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#%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><\/ul><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#api\">API<\/a><br><ul><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#next-cli\">Next CLI<\/a><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#create-next-app\">Create Next App<\/a><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#nextrouter\"><code>next\/router<\/code><\/a><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#nextlink\"><code>next\/link<\/code><\/a><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#nextimage\"><code>next\/image<\/code><\/a><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#nexthead\"><code>next\/head<\/code><\/a><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#nextserver\"><code>next\/server<\/code><\/a><\/li><\/ul><\/li><li><a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/590157\/#nextconfigjs\"><code>next.config.js<\/code><\/a><\/li><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useState } from 'react'\n\nconst names = &#91;'John', 'Jane', 'Alice', 'Bob', 'Harry']\n\nexport default function Page() {\n  const &#91;results, setResults] = useState(&#91;])\n\n  return (\n    &lt;div&gt;\n      &lt;input\n        type=\"text\"\n        placeholder=\"\u041f\u043e\u0438\u0441\u043a\"\n        onChange={async ({ currentTarget: { value } }) =&gt; {\n          \/\/ \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\n          const Fuse = (await import('fuse.js')).default\n          const fuse = new Fuse(names)\n\n          setResults(fuse.search(value))\n        }}\n      \/&gt;\n      &lt;pre&gt;\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430: {JSON.stringify(results, null, 2)}&lt;\/pre&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import dynamic from 'next\/dynamic'\nimport Header from '..\/components\/Header'\n\nconst DynamicHello = dynamic(() =&gt; import('..\/components\/Hello'))\n\nexport default function Home() {\n  return (\n    &lt;div&gt;\n      &lt;Header \/&gt;\n      &lt;DynamicHello \/&gt;\n      &lt;h1&gt;\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ components\/Hello.js\nexport const Hello = () =&gt; &lt;p&gt;\u041f\u0440\u0438\u0432\u0435\u0442!&lt;\/p&gt;<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import dynamic from 'next\/dynamic'\nimport Header from '..\/components\/Header'\n\nconst DynamicHello = dynamic(() =&gt;\n  import('..\/components\/Hello')\n    .then((module) =&gt; module.Hello)\n)\n\nexport default function Home() {\n  return (\n    &lt;div&gt;\n      &lt;Header \/&gt;\n      &lt;DynamicHello \/&gt;\n      &lt;h1&gt;\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong>\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import dynamic from 'next\/dynamic'\nimport Header from '..\/components\/Header'\n\nconst DynamicHelloWithCustomLoading = dynamic(\n  () =&gt; import('..\/components\/Hello'),\n  { loading: () =&gt; &lt;p&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p&gt; }\n)\n\nexport default function Home() {\n  return (\n    &lt;div&gt;\n      &lt;Header \/&gt;\n      &lt;DynamicHelloWithCustomLoading \/&gt;\n      &lt;h1&gt;\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 <code>SSR<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import dynamic from 'next\/dynamic'\nimport Header from '..\/components\/Header'\n\nconst DynamicHelloWithNoSSR = dynamic(\n  () =&gt; import('..\/components\/Hello'),\n  { ssr: false }\n)\n\nexport default function Home() {\n  return (\n    &lt;div&gt;\n      &lt;Header \/&gt;\n      &lt;DynamicHelloWithNoSSR \/&gt;\n      &lt;h1&gt;\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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&gt;<\/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\n\n\n<pre class=\"wp-block-code\"><code>import dynamic from 'next\/dynamic'\nimport Header from '..\/components\/Header'\n\nconst DynamicLazyHello = dynamic(() =&gt; import('..\/components\/Hello'), { suspense: true })\n\nexport default function Home() {\n  return (\n    &lt;div&gt;\n      &lt;Header \/&gt;\n      &lt;DynamicLazyHello \/&gt;\n      &lt;h1&gt;\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430&lt;\/h1&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>.next\/server\/pages\/about.html<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>.next\/server\/pages\/about.js<\/code><\/pre>\n\n\n\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n\n\n\n<ul><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><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><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>next build &amp;&amp; next export<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n\n\n\n<ul><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><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><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><li><code>getServerSideProps<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li><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><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><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ `tsconfig.json` \u0438\u043b\u0438 `jsconfig.json`\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\"\n  }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ components\/button.js\nexport const Button = () =&gt; &lt;button&gt;Click Me&lt;\/button&gt;\n\n\/\/ pages\/index.js\nimport { Button } from 'components\/button'\n\nexport default function Index() {\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/h1&gt;\n      &lt;Button \/&gt;\n    &lt;\/&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ `tsconfig.json` \u0438\u043b\u0438 `jsconfig.json`\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\/*\": &#91;\"components\/*\"]\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ components\/button.js\nexport const Button = () =&gt; &lt;button&gt;Click Me&lt;\/button&gt;\n\n\/\/ pages\/index.js\nimport { Button } from '@\/button'\n\nexport default function Index() {\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/h1&gt;\n      &lt;Button \/&gt;\n    &lt;\/&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<h3 id=\"kastomnyy-server\">\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440<\/h3>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ server.js\nconst { createServer } = require('http')\nconst { parse } = require('url')\nconst next = require('next')\n\nconst dev = process.env.NODE_ENV !== 'production'\nconst app = next({ dev })\nconst handle = app.getRequestHandler()\n\napp.prepare().then(() =&gt; {\n  createServer((req, res) =&gt; {\n    \/\/ `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\n    const parseUrl = parse(req.url, true)\n    const { pathname, query } = parseUrl\n\n    switch (pathname) {\n      case '\/a':\n        return app.render(req, res, '\/a', query)\n      case '\/b':\n        return app.render(req, res, '\/b', query)\n      default:\n        handle(req, res, parsedUrl)\n    }\n  }).listen(3000, (err) =&gt; {\n    if (err) throw err\n    console.log('\u0417\u0430\u043f\u0443\u0449\u0435\u043d \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443: http:\/\/localhost:3000')\n  })\n})<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\"scripts\": {\n  \"dev\": \"node server.js\",\n  \"build\": \"next build\",\n  \"start\": \"NODE_ENV=production node server.js\"\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>const next = require('next')\nconst app = next({})<\/code><\/pre>\n\n\n\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\n\n\n<ul><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><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><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><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><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  useFileSystemPublicRoutes: false\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\n<ul><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><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><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><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><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><\/ul>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ pages\/_app.js\nimport App from 'next\/app'\n\nfunction MyApp({ Component, pageProps }) {\n  return &lt;Component {...pageProps} \/&gt;\n}\n\nMyApp.getInitialProps = async (appContext) =&gt; {\n  const appProps = await App.getInitialProps(appContext)\n\n  return { ...appProps }\n}\n\nexport default MyApp<\/code><\/pre>\n\n\n\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\n\n\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n\n\n\n<ul><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><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><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><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><\/ul>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ pages\/404.js\nexport default function Custom404() {\n  return &lt;h1&gt;404 - \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430&lt;\/h1&gt;\n}\n\n\/\/ pages\/500.js\nexport default function Custom500() {\n  return &lt;h1&gt;500 - \u041e\u0448\u0438\u0431\u043a\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435&lt;\/h1&gt;\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>export default function Error({ statusCode }) {\n  return (\n    &lt;p&gt;\n      {statusCode\n        ? `\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 ${statusCode}`\n        : `\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435`}\n    &lt;\/p&gt;\n  )\n}\n\nError.getInitialProps = ({ res, err }) =&gt; {\n  const statusCode = res ? res.statusCode : err ? err.statusCode : 404\n  return { statusCode }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Error from 'next\/error'\n\nexport async function getServerSideProps() {\n  const res = await fetch('https:\/\/api.github.com\/repos\/harryheman\/react-total')\n  const errorCode = res.ok ? false : res.statusCode\n  const data = await res.json()\n\n  return {\n    props: {\n      errorCode,\n      stars: data.stergazers_count\n    }\n  }\n}\n\nexport default function Page({ errorCode, stars }) {\n  if (errorCode) {\n    return &lt;Error statusCode={errorCode} \/&gt;\n  }\n\n  return &lt;div&gt;\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0432\u0435\u0437\u0434: {stars}&lt;\/div&gt;\n}<\/code><\/pre>\n\n\n\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\n\n\n<h3 id=\"direktoriya-src\">\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>src<\/code><\/h3>\n\n\n\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\n\n\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n\n\n\n<ul><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><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><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<p><strong>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b<\/strong><\/p>\n\n\n\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\n\n\n<ul><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><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><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><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ next.config.js\nmodule.exports = {\n  i18n: {\n    \/\/ \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\n    locales: &#91;'en-US', 'fr', 'nl-NL'],\n    \/\/ \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\n    \/\/ \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,\n    \/\/ \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, `\/hello`\n    defaultLocale: 'en-US',\n    \/\/ \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\n    \/\/ (\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)\n    \/\/ \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,\n    \/\/ \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, `fr.example.com`\n    domains: &#91;\n      {\n        domain: 'example.com',\n        defaultLocale: 'en-US'\n      },\n      {\n        domain: 'example.nl',\n        defaultLocale: 'nl-NL'\n      },\n      {\n        domain: 'example.fr',\n        defaultLocale: 'fr',\n        \/\/ \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\n        \/\/ \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`)\n        http: true\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ next.config.js\nmodule.exports = {\n  i18n: {\n    locales: &#91;'en-US', 'fr', 'nl-NL'],\n    defaultLocale: 'en-US'\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<ul><li><code>\/blog<\/code><\/li><li><code>\/fr\/blog<\/code><\/li><li><code>\/nl-nl\/blog<\/code><\/li><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ next.config.js\nmodule.exports = {\n  i18n: {\n    locales: &#91;'en-US', 'fr', 'nl-NL', 'nl-BE'],\n    defaultLocale: 'en-US',\n\n    domains: &#91;\n      {\n        domain: 'example.com',\n        defaultLocale: 'en-US',\n      },\n      {\n        domain: 'example.fr',\n        defaultLocale: 'fr',\n      },\n      {\n        domain: 'example.nl',\n        defaultLocale: 'nl-NL',\n        \/\/ \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\n        locales: &#91;'nl-BE']\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<ul><li><code>example.com\/blog<\/code><\/li><li><code>example.fr\/blog<\/code><\/li><li><code>example.nl\/blog<\/code><\/li><li><code>example.nl\/nl-BE\/blog<\/code><\/li><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ next.config.js\nmodule.exports = {\n  i18n: {\n    localeDetection: false\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<ul><li><code>locale<\/code> \u2014 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li><li><code>locales<\/code> \u2014 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u0438<\/li><li><code>defaultLocale<\/code> \u2014 \u043b\u043e\u043a\u0430\u043b\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/li><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\n\nexport default function IndexPage(props) {\n  return (\n    &lt;Link href=\"\/another\" locale=\"fr\"&gt;\n      &lt;a&gt;\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a `\/fr\/another`&lt;\/a&gt;\n    &lt;\/Link&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function IndexPage(props) {\n  const router = useRouter()\n\n  return (\n    &lt;div\n      onClick={() =&gt; {\n        router.push('\/another', '\/another', { locale: 'fr' })\n      }}\n    &gt;\n      \u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a `\/fr\/another`\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\nconst router = useRouter()\nconst { pathname, asPath, query } = router\n\/\/ \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\nrouter.push({ pathname, query }, asPath, { locale: nextLocale })<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\n\nexport default function IndexPage(props) {\n  return (\n    &lt;Link href=\"\/fr\/another\" locale={false}&gt;\n      &lt;a&gt;\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a `\/fr\/another`&lt;\/a&gt;\n    &lt;\/Link&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong>\u0417\u0430\u043c\u0435\u0442\u043a\u0438<\/strong><\/p>\n\n\n\n<ul><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><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><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ pages\/blog\/&#91;slug].js\nexport const getStaticPaths = ({ locales }) =&gt; {\n  return {\n    paths: &#91;\n      \/\/ \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\n      { params: { slug: 'post-1' }, locale: 'en-US' },\n      { params: { slug: 'post-1' }, locale: 'fr' },\n    ],\n    fallback: true\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>export async function getStaticProps({ locale }) {\n  \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u044b \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e `API`\n  const res = await fetch(`https:\/\/example.com\/posts?locale=${locale}`)\n  const posts = await res.json()\n\n  if (posts.length === 0) {\n    return {\n      notFound: true\n    }\n  }\n\n  return {\n    props: {\n      posts\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/strong><\/p>\n\n\n\n<ul><li><code>locales<\/code>: \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 100 \u043b\u043e\u043a\u0430\u043b\u0435\u0439<\/li><li><code>domains<\/code>: \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 100 \u0434\u043e\u043c\u0435\u043d\u043e\u0432<\/li><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ next.config.js\n\/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432\nconst securityHeaders = &#91;]\n\nmodule.exports = {\n  async headers() {\n    return &#91;\n      {\n        \/\/ \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\n        source: '\/(.*)',\n        headers: securityHeaders\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong><\/p>\n\n\n\n<p><em><code>X-DNS-Prefetch-Control<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'X-DNS-Prefetch-Control',\n  value: 'on'\n}<\/code><\/pre>\n\n\n\n<p><em><code>Strict-Transport-Security<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'Strict-Transport-Security',\n  \/\/ 2 \u0433\u043e\u0434\u0430\n  value: 'max-age=63072000; includeSubDomains; preload'\n}<\/code><\/pre>\n\n\n\n<p><em><code>X-XSS-Protection<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'X-XSS-Protection',\n  value: '1; mode=block'\n}<\/code><\/pre>\n\n\n\n<p><em><code>X-Frame-Options<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'X-Frame-Options',\n  value: 'SAMEORIGIN'\n}<\/code><\/pre>\n\n\n\n<p><em><code>Permissions-Policy<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'Permissions-Policy',\n  value: 'camera=(), microphone=(), geolocation=()'\n}<\/code><\/pre>\n\n\n\n<p><em><code>X-Content-Type-Options<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'X-Content-Type-Options',\n  value: 'nosniff'\n}<\/code><\/pre>\n\n\n\n<p><em><code>Referrer-Policy<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'Referrer-Policy',\n  value: 'origin-when-cross-origin'\n}<\/code><\/pre>\n\n\n\n<p><em><code>Content-Security-Policy<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>{\n  key: 'Content-Security-Policy',\n  value: \/\/ \u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 `CSP`\n}<\/code><\/pre>\n\n\n\n<h2 id=\"api\">API<\/h2>\n\n\n\n<h3 id=\"next-cli\">Next CLI<\/h3>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>npx next -h<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>NODE_OPTIONS='--throw-deprecation' next\nNODE_OPTIONS='-r esm' next\nNODE_OPTIONS='--inspect' next<\/code><\/pre>\n\n\n\n<p><strong>\u0421\u0431\u043e\u0440\u043a\u0430<\/strong><\/p>\n\n\n\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\n\n\n<ul><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><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><\/ul>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>next build --profile<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>next build --verbose<\/code><\/pre>\n\n\n\n<p><strong>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/strong><\/p>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>npx next dev -p 4000<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>PORT=4000 npx next dev<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>npx next dev -H 192.168.1.2<\/code><\/pre>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0434\u0430\u043a\u0448\u043d<\/strong><\/p>\n\n\n\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\n\n\n<p><strong>\u041b\u0438\u043d\u0442\u0435\u0440<\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>next lint --dir utils<\/code><\/pre>\n\n\n\n<h3 id=\"create-next-app\">Create Next App<\/h3>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app &#91;app-name]\n# or\nyarn create next-app &#91;app-name]<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app &#91;app-name] --typescript\n# or\nyarn create next-app &#91;app-name] --ts<\/code><\/pre>\n\n\n\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong><\/p>\n\n\n\n<ul><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><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><li><code>--example-path [path-to-example]<\/code><\/li><li><code>--use-npm<\/code><\/li><\/ul>\n\n\n\n<h3 id=\"nextrouter\"><code>next\/router<\/code><\/h3>\n\n\n\n<p><strong><code>useRouter<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport const ActiveLink = ({ children, href }) =&gt; {\n  const router = useRouter()\n\n  const style = {\n    marginRight: 10,\n    color: router.asPath === href ? 'green' : 'blue',\n  }\n\n  const handleClick = (e) =&gt; {\n    e.preventDefault()\n    router.push(href)\n  }\n\n  return (\n    &lt;a href={href} onClick={handleClick} style={style}&gt;\n      {children}\n    &lt;\/a&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><em>\u041e\u0431\u044a\u0435\u043a\u0442 <code>router<\/code><\/em><\/p>\n\n\n\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\n\n\n<ul><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><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><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><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><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><li><code>locale: string<\/code> \u2014 \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li><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><li><code>defaultLocale: string<\/code> \u2014 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f \u043b\u043e\u043a\u0430\u043b\u044c<\/li><li><code>domainsLocales: Array&lt;{ domain, defaultLocalem locales }&gt;<\/code> \u2014 \u043b\u043e\u043a\u0430\u043b\u0438 \u0434\u043b\u044f \u0434\u043e\u043c\u0435\u043d\u043e\u0432<\/li><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><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><\/ul>\n\n\n\n<p><strong><code>router.push<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>router.push(url, as, options)<\/code><\/pre>\n\n\n\n<ul><li><code>url: string | object<\/code> \u2014 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/li><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><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><ul><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><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><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><\/ul><\/li><\/ul>\n\n\n\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function Page() {\n  const router = useRouter()\n\n  return (\n    &lt;button className=\"link\" onClick={() =&gt; router.push('\/about')}&gt;\n      \u041e \u043d\u0430\u0441\n    &lt;\/button&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function Page() {\n  const router = useRouter()\n\n  return (\n    &lt;button className=\"link\" onClick={() =&gt; router.push('\/post\/abc')}&gt;\n      \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435\n    &lt;\/button&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useEffect } from 'react'\nimport { useRouter } from 'next\/router'\n\n\/\/ \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\nconst useUser = () =&gt; ({ user: null, loading: false })\n\nexport default function Page() {\n  const { user, loading } = useUser()\n  const router = useRouter()\n\n  useEffect(() =&gt; {\n    if (!loading &amp;&amp; !user) {\n      router.push('\/login')\n    }\n  }, &#91;user, loading])\n\n  return user ? &lt;p&gt;\u041f\u0440\u0438\u0432\u0435\u0442, {user.name}!&lt;\/p&gt; : &lt;p&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/p&gt;\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function ReadMore({ post }) {\n  const router = useRouter()\n\n  return (\n    &lt;button\n      className='link'\n      onClick={() =&gt; {\n        router.push({\n          pathname: '\/post\/&#91;pid]',\n          query: { pid: post.id }\n        })\n      }}\n    &gt;\n      \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435\n    &lt;\/button&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong><code>router.replace<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>router.replace(url, as, options)<\/code><\/pre>\n\n\n\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function Page() {\n  const router = useRouter()\n\n  return (\n    &lt;button className=\"link\" onClick={() =&gt; router.replace('\/home')}&gt;\n      \u0413\u043b\u0430\u0432\u043d\u0430\u044f\n    &lt;\/button&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong><code>router.prefetch<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>router.prefetch(url, as)<\/code><\/pre>\n\n\n\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useCallback, useEffect } from 'react'\nimport { useRouter } from 'next\/router'\n\nexport default function Login() {\n  const router = useRouter()\n\n  const handleSubmit = useCallback((e) =&gt; {\n    e.preventDefault()\n\n    fetch('\/api\/login', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/json' },\n      body: JSON.stringify({\n        \/* \u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f *\/\n      }),\n    }).then((res) =&gt; {\n      \/\/ \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\n      if (res.ok) router.push('\/dashboard')\n    })\n  }, &#91;])\n\n  useEffect(() =&gt; {\n    \/\/ \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\n    router.prefetch('\/dashboard')\n  }, &#91;])\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      {\/* \u041f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b *\/}\n      &lt;button type=\"submit\"&gt;\u0412\u043e\u0439\u0442\u0438&lt;\/button&gt;\n    &lt;\/form&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong><code>router.beforePopState<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>router.beforePopState(cb)<\/code><\/pre>\n\n\n\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\n\n\n<ul><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><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><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><\/ul>\n\n\n\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useEffect } from 'react'\nimport { useRouter } from 'next\/router'\n\nexport default function Page() {\n  const router = useRouter()\n\n  useEffect(() =&gt; {\n    router.beforePopState(({ url, as, options }) =&gt; {\n      \/\/ \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\n      if (as !== '\/' &amp;&amp; as !== '\/other') {\n        \/\/ \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\n        window.location.href = as\n        return false\n      }\n\n      return true\n    })\n  }, &#91;])\n\n  return &lt;p&gt;\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c!&lt;\/p&gt;\n}<\/code><\/pre>\n\n\n\n<p><strong><code>router.back<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function Page() {\n  const router = useRouter()\n\n  return (\n    &lt;button className=\"link\" onClick={() =&gt; router.back()}&gt;\n      \u041d\u0430\u0437\u0430\u0434\n    &lt;\/button&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong><code>router.reload<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { useRouter } from 'next\/router'\n\nexport default function Page() {\n  const router = useRouter()\n\n  return (\n    &lt;button className=\"link\" onClick={() =&gt; router.reload()}&gt;\n      \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\n    &lt;\/button&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong><code>router.events<\/code><\/strong><\/p>\n\n\n\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\n\n\n<ul><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><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><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><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><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><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><\/ul>\n\n\n\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\n\n\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ pages\/_app.js\nimport { useEffect } from 'react'\nimport { useRouter } from 'next\/router'\n\nexport default function MyApp({ Component, pageProps }) {\n  const router = useRouter()\n\n  useEffect(() =&gt; {\n    const handleRouteChange = (url, { shallow }) =&gt; {\n      console.log(\n        `\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} ${\n          shallow ? '\u0441' : '\u0431\u0435\u0437'\n        } \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`\n      )\n    }\n\n    router.events.on('routeChangeStart', handleRouteChange)\n\n    \/\/ \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\n    \/\/ \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`\n    return () =&gt; {\n      router.events.off('routeChangeStart', handleRouteChange)\n    }\n  }, &#91;])\n\n  return &lt;Component {...pageProps} \/&gt;\n}<\/code><\/pre>\n\n\n\n<p><strong><code>withRouter<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import { withRouter } from 'next\/router'\n\nfunction Page({ router }) {\n  return &lt;p&gt;{router.pathname}&lt;\/p&gt;\n}\n\nexport default withRouter(Page)<\/code><\/pre>\n\n\n\n<p><strong><code>TypeScript<\/code><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nimport { withRouter, NextRouter } from 'next\/router'\n\ninterface WithRouterProps {\n  router: NextRouter\n}\n\ninterface MyComponentProps extends WithRouterProps {}\n\nclass MyComponent extends React.Component&lt;MyComponentProps&gt; {\n  render() {\n    return &lt;p&gt;{this.props.router.pathname}&lt;\/p&gt;\n  }\n}\n\nexport default withRouter(MyComponent)<\/code><\/pre>\n\n\n\n<h3 id=\"nextlink\"><code>next\/link<\/code><\/h3>\n\n\n\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\n\n\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\n\n\n<ul><li><code>pages\/index.js<\/code><\/li><li><code>pages\/about.js<\/code><\/li><li><code>pages\/blog\/[slug].js<\/code><\/li><\/ul>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\n\nexport default function Home() {\n  return (\n    &lt;ul&gt;\n      &lt;li&gt;\n        &lt;Link href=\"\/\"&gt;\n          &lt;a&gt;\u0413\u043b\u0430\u0432\u043d\u0430\u044f&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link href=\"\/about\"&gt;\n          &lt;a&gt;\u041e \u043d\u0430\u0441&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link href=\"\/blog\/hello-world\"&gt;\n          &lt;a&gt;\u041f\u043e\u0441\u0442&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<ul><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><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><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><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><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><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><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><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><\/ul>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\n\nexport default function Posts({ posts }) {\n  return (\n    &lt;ul&gt;\n      {posts.map((post) =&gt; (\n        &lt;li key={post.id}&gt;\n          &lt;Link href={`\/blog\/${encodeURIComponent(post.slug)}`}&gt;\n            &lt;a&gt;{post.title}&lt;\/a&gt;\n          &lt;\/Link&gt;\n        &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\nimport styled from 'styled-components'\n\n\/\/ \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`\nconst RedLink = styled.a`\n  color: red;\n`\n\nexport default function NavLink({ href, name }) {\n  \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c `passHref`\n  return (\n    &lt;Link href={href} passHref&gt;\n      &lt;RedLink&gt;{name}&lt;\/RedLink&gt;\n    &lt;\/Link&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\nimport { forwardRef } from 'react'\n\n\/\/ `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\nconst MyButton = forwardRef(({ onClick, href }, ref) =&gt; {\n  return (\n    &lt;a href={href} onClick={onClick} ref={ref}&gt;\n      \u041a\u043b\u0438\u043a\u043d\u0438\n    &lt;\/a&gt;\n  )\n})\n\nexport default function Home() {\n  return (\n    &lt;Link href=\"\/about\" passHref&gt;\n      &lt;MyButton \/&gt;\n    &lt;\/Link&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p><strong>\u041e\u0431\u044a\u0435\u043a\u0442 <code>URL<\/code><\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link'\n\nexport default function Home() {\n  return (\n    &lt;ul&gt;\n      &lt;li&gt;\n        &lt;Link\n          href={{\n            pathname: '\/about',\n            query: { name: 'test' },\n          }}\n        &gt;\n          &lt;a&gt;\u041e \u043d\u0430\u0441&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link\n          href={{\n            pathname: '\/blog\/&#91;slug]',\n            query: { slug: 'my-post' },\n          }}\n        &gt;\n          &lt;a&gt;\u041f\u043e\u0441\u0442&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<ul><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><li>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442: <code>\/blog\/my-post<\/code><\/li><\/ul>\n\n\n\n<p><strong>\u0417\u0430\u043c\u0435\u043d\u0430 <code>URL<\/code><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Link href=\"\/about\" replace&gt;\n  &lt;a&gt;\u041e \u043d\u0430\u0441&lt;\/a&gt;\n&lt;\/Link&gt;<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>&lt;Link href=\"\/?page=2\" scroll={false}&gt;\n  &lt;a&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0449\u0435&lt;\/a&gt;\n&lt;\/Link&gt;<\/code><\/pre>\n\n\n\n<h3 id=\"nextimage\"><code>next\/image<\/code><\/h3>\n\n\n\n<p><strong>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b<\/strong><\/p>\n\n\n\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\n\n\n<ul><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><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><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><\/ul>\n\n\n\n<p><strong>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b<\/strong><\/p>\n\n\n\n<ul><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><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><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import Image from 'next\/image'\n\nconst myLoader = ({ src, width, quality }) =&gt; `https:\/\/example.com\/${src}?w=${width}&amp;q=${quality || 75}`\n\nconst MyImage = (props) =&gt; (\n  &lt;Image\n    loader={myLoader}\n    src=\"me.png\"\n    alt=\"\"\n    role=\"presentation\"\n    width={500}\n    height={500}\n  \/&gt;\n)<\/code><\/pre>\n\n\n\n<ul><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><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><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><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><\/ul>\n\n\n\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\n\n\n<ul><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><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><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><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><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><\/ul>\n\n\n\n<p><strong>\u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u043f\u044b<\/strong><\/p>\n\n\n\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\n\n\n<ul><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><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><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><li><code>decoding<\/code> \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 <code>async<\/code><\/li><\/ul>\n\n\n\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/strong><\/p>\n\n\n\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\n\n\n<p><em>\u0414\u043e\u043c\u0435\u043d\u044b<\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  images: {\n    domains: &#91;'assets.acme.com']\n  }\n}<\/code><\/pre>\n\n\n\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\nmodule.exports = {\n  images: {\n    deviceSizes: &#91;640, 750, 828, 1080, 1200, 1920, 2048, 3840]\n  }\n}<\/code><\/pre>\n\n\n\n<p><em>\u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  images: {\n    imageSizes: &#91;16, 32, 48, 64, 96, 128, 256, 384]\n  }\n}<\/code><\/pre>\n\n\n\n<h3 id=\"nexthead\"><code>next\/head<\/code><\/h3>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Head from 'next\/head'\n\nexport default function IndexPage() {\n  return (\n    &lt;div&gt;\n      &lt;Head&gt;\n        &lt;title&gt;\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&lt;\/title&gt;\n        &lt;meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" \/&gt;\n      &lt;\/Head&gt;\n      &lt;p&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/p&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import Head from 'next\/head'\n\nexport default function IndexPage() {\n  return (\n    &lt;div&gt;\n      &lt;Head&gt;\n        &lt;title&gt;\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&lt;\/title&gt;\n        &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\" \/&gt;\n      &lt;\/Head&gt;\n      &lt;Head&gt;\n        &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\" \/&gt;\n      &lt;\/Head&gt;\n      &lt;p&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0440\u043e\u0434!&lt;\/p&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\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\" \/&gt;<\/code>.<\/p>\n\n\n\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\n\n\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&gt;<\/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\n\n\n<h3 id=\"nextserver\"><code>next\/server<\/code><\/h3>\n\n\n\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\n\n\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\n\n\n<p>\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import type { NextRequest, NextFetchEvent } from 'next\/server'\n\nexport type Middleware = (\n  request: NextRequest,\n  event: NextFetchEvent\n) =&gt; Promise&lt;Response | undefined&gt; | Response | undefined<\/code><\/pre>\n\n\n\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\n\n\n<p><strong><code>NextRequest<\/code><\/strong><\/p>\n\n\n\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\n\n\n<ul><li><code>cookies<\/code> \u2014 \u043a\u0443\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/li><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><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><ul><li><code>country<\/code> \u2014 \u043a\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u044b<\/li><li><code>region<\/code> \u2014 \u043a\u043e\u0434 \u0440\u0435\u0433\u0438\u043e\u043d\u0430<\/li><li><code>city<\/code> \u2014 \u0433\u043e\u0440\u043e\u0434<\/li><li><code>latitude<\/code> \u2014 \u0434\u043e\u043b\u0433\u043e\u0442\u0430<\/li><li><code>longitude<\/code> \u2014 \u0448\u0438\u0440\u043e\u0442\u0430<\/li><\/ul><\/li><li><code>ip<\/code> \u2014 IP-\u0430\u0434\u0440\u0435\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/li><li><code>ua<\/code> \u2014 \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/li><\/ul>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import type { NextRequest } from 'next\/server'<\/code><\/pre>\n\n\n\n<p><strong><code>NextFetchEvent<\/code><\/strong><\/p>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>import type { NextFetchEvent } from 'next\/server'<\/code><\/pre>\n\n\n\n<p><strong><code>NextResponse<\/code><\/strong><\/p>\n\n\n\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\n\n\n<ul><li><code>cookies<\/code> \u2014 \u043a\u0443\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430<\/li><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><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><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><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import { NextResponse } from 'next\/server'<\/code><\/pre>\n\n\n\n<h2 id=\"nextconfigjs\"><code>next.config.js<\/code><\/h2>\n\n\n\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\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 <code>next.config.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * @type {import('next').NextConfig}\n *\/\nconst nextConfig = {\n  \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/\n}\n\nmodule.exports = nextConfig<\/code><\/pre>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 <code>next.config.mjs<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * @type {import('next').NextConfig}\n *\/\nconst nextConfig = {\n  \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/\n}\n\nexport default nextConfig<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = (phase, { defaultConfig }) =&gt; {\n  \/**\n   * @type {import('next').NextConfig}\n   *\/\n  const nextConfig = {\n    \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/\n  }\n  return nextConfig\n}<\/code><\/pre>\n\n\n\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\n\n\n<ul><li><code>PHASE_EXPORT<\/code><\/li><li><code>PHASE_PRODUCTION_BUILD<\/code><\/li><li><code>PHASE_PRODUCTION_SERVER<\/code><\/li><li><code>PHASE_DEVELOPMENT_SERVER<\/code><\/li><\/ul>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>const { PHASE_DEVELOPMENT_SERVER } = require('next\/constants')\n\nmodule.exports = (phase, { defaultConfig }) =&gt; {\n  if (phase === PHASE_DEVELOPMENT_SERVER) {\n    return {\n      \/* \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 *\/\n    }\n  }\n\n  return {\n    \/* \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 *\/\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0440<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  env: {\n    someKey: 'some-value'\n  }\n}<\/code><\/pre>\n\n\n\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Page() {\n  return &lt;h1&gt;\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c `someKey` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f `{process.env.someKey}`&lt;\/h1&gt;\n}<\/code><\/pre>\n\n\n\n<p><em>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Page() {\n  return &lt;h1&gt;\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c `someKey` \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f `some-value`&lt;\/h1&gt;\n}<\/code><\/pre>\n\n\n\n<p><strong>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438<\/strong><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  async headers() {\n    return &#91;\n      {\n        source: '\/about',\n        headers: &#91;\n          {\n            key: 'x-custom-header',\n            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',\n          },\n          {\n            key: 'x-another-custom-header',\n            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'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<ul><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><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><\/ul>\n\n\n\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\n\n\n<ul><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><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><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><\/ul>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  async headers() {\n    return &#91;\n      {\n        source: '\/blog\/:slug',\n        headers: &#91;\n          {\n            key: 'x-slug',\n            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\n          },\n          {\n            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\n            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'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  async headers() {\n    return &#91;\n      {\n        source: '\/blog\/:slug*',\n        headers: &#91;\n          {\n            key: 'x-slug',\n            value: ':slug*',\n          },\n          {\n            key: 'x-slug-:slug*',\n            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'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  async headers() {\n    return &#91;\n      {\n        source: '\/blog\/:post(\\\\d{1,})',\n        headers: &#91;\n          {\n            key: 'x-post',\n            value: ':post'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  async headers() {\n    return &#91;\n      {\n        \/\/ \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 `\/english(default)\/something`\n        source: '\/english\\\\(default\\\\)\/:slug',\n        headers: &#91;\n          {\n            key: 'x-header',\n            value: 'some-value'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\n<ul><li><code>type: string<\/code> \u2014 <code>header | cookie | host | query<\/code><\/li><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><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&gt;.*)<\/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><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  async headers() {\n    return &#91;\n      \/\/ \u0415\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a `x-add-header`,\n      \/\/ \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`\n      {\n        source: '\/:path*',\n        has: &#91;\n          {\n            type: 'header',\n            key: 'x-add-header',\n          },\n        ],\n        headers: &#91;\n          {\n            key: 'x-another-header',\n            value: 'hello'\n          }\n        ]\n      },\n      \/\/ \u0415\u0441\u043b\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 `source`, `query` \u0438 `cookie`,\n      \/\/ \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`\n      {\n        source: '\/specific\/:path*',\n        has: &#91;\n          {\n            type: 'query',\n            key: 'page',\n            \/\/ \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,\n            \/\/ \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\n            \/\/ \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&gt;home)`\n            value: 'home',\n          },\n          {\n            type: 'cookie',\n            key: 'authorized',\n            value: 'true',\n          },\n        ],\n        headers: &#91;\n          {\n            key: 'x-authorized',\n            value: ':authorized'\n          }\n        ]\n      },\n      \/\/ \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\n      \/\/ \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`\n      {\n        source: '\/:path*',\n        has: &#91;\n          {\n            type: 'header',\n            key: 'x-authorized',\n            value: '(?&lt;authorized&gt;yes|true)',\n          },\n        ],\n        headers: &#91;\n          {\n            key: 'x-another-header',\n            value: ':authorized'\n          }\n        ]\n      },\n      \/\/ \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`,\n      \/\/ \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\n      {\n        source: '\/:path*',\n        has: &#91;\n          {\n            type: 'host',\n            value: 'example.com',\n          },\n        ],\n        headers: &#91;\n          {\n            key: 'x-another-header',\n            value: ':authorized'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\n<p><em><code>basePath<\/code> \u0438 <code>i18n<\/code><\/em><\/p>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  basePath: '\/docs',\n\n  async headers() {\n    return &#91;\n      {\n        source: '\/with-basePath', \/\/ \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \/docs\/with-basePath\n        headers: &#91;\n          {\n            key: 'x-hello',\n            value: 'world'\n          }\n        ]\n      },\n      {\n        source: '\/without-basePath', \/\/ \u043d\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f\n        headers: &#91;\n          {\n            key: 'x-hello',\n            value: 'world'\n          }\n        ],\n        basePath: false\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  i18n: {\n    locales: &#91;'en', 'fr', 'de'],\n    defaultLocale: 'en',\n  },\n\n  async headers() {\n    return &#91;\n      {\n        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\n        headers: &#91;\n          {\n            key: 'x-hello',\n            value: 'world'\n          }\n        ]\n      },\n      {\n        \/\/ \u0440\u0443\u0447\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\n        source: '\/nl\/with-locale-manual',\n        locale: false,\n        headers: &#91;\n          {\n            key: 'x-hello',\n            value: 'world'\n          }\n        ]\n      },\n      {\n        \/\/ \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`\n        source: '\/en',\n        locale: false,\n        headers: &#91;\n          {\n            key: 'x-hello',\n            value: 'world'\n          }\n        ]\n      },\n      {\n        \/\/ \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\n        \/\/ `\/` \u0438\u043b\u0438 `\/fr`, \u0430 \u0441 `\/:path*` \u0431\u0443\u0434\u0435\u0442\n        source: '\/(.*)',\n        headers: &#91;\n          {\n            key: 'x-hello',\n            value: 'worlld'\n          }\n        ]\n      }\n    ]\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) =&gt; {\n    \/\/ \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\n    return config\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\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\n\n\n<ul><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><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><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><li><code>defaultLocales: object<\/code> \u2014 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u044b:<br><ul><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><\/ul><\/li><\/ul>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  webpack: (config, options) =&gt; {\n    config.module.rules.push({\n      test: \/\\.mdx\/,\n      use: &#91;\n        options.defaultLoaders.babel,\n        {\n          loader: '@mdx-js\/loader',\n          options: pluginOptions.options\n        }\n      ]\n    })\n\n    return config\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  distDir: 'build'\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  generateBuildId: async () =&gt; {\n    \/\/ \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\n    return 'my-build-id'\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  eslint: {\n    ignoreDuringBuilds: true\n  }\n}<\/code><\/pre>\n\n\n\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\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  typescript: {\n    ignoreBuildErrors: true\n  }\n}<\/code><\/pre>\n\n\n\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","protected":false},"excerpt":{"rendered":"<p>Next.js \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 React \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 SPA, \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","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[161],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2301"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2301"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2301\/revisions"}],"predecessor-version":[{"id":2302,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2301\/revisions\/2302"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}