{"id":399826,"date":"2024-06-29T14:54:24","date_gmt":"2024-06-29T14:54:24","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=399826"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=399826","title":{"rendered":"<span>NEST-NEXT: Best Practices \u2014 \u0427\u0430\u0441\u0442\u044c 1<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 nest.js \u0438 NEXT.js, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0432\u044b\u0431\u043e\u0440 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SSR. <a href=\"https:\/\/habr.com\/ru\/post\/571032\/\" rel=\"noopener noreferrer nofollow\">\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e HMR, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 SSR \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 &#171;\u0437\u0430 \u0441\u043b\u0435\u0448\u043e\u043c&#187;.<\/p>\n<blockquote>\n<p>\u041d\u0430\u0441\u0442\u0443\u043f\u0438\u043b \u041e\u043a\u0442\u044f\u0431\u0440\u044c 2022 \u0438 \u0432\u044b\u0448\u043b\u0430 <a href=\"https:\/\/nextjs.org\/blog\/next-13\" rel=\"noopener noreferrer nofollow\">\u043d\u043e\u0432\u0430\u044f 13 \u0432\u0435\u0440\u0441\u0438\u044f NEXT.js<\/a>. \u0412 \u043d\u0435\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u044e\u0442 \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c nest.js \u0438 NEXT.js \u0432\u043c\u0435\u0441\u0442\u0435. \u041f\u043e\u043a\u0430 \u044f \u0438\u0437\u0443\u0447\u0430\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u043e\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0435\u0439 <code>app<\/code> \u0438 \u0433\u043e\u0442\u043e\u0432\u043b\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0430\u043c \u0442\u043e\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0430\u0448 \u0444\u0438\u0434\u0431\u0435\u043a \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e NEXT.js 13 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 <code>nest-next<\/code> (\u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435) \u0432 <a href=\"https:\/\/github.com\/kyle-mccarthy\/nest-next\/issues\/92\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u043c GitHub issue<\/a>. <\/p>\n<\/blockquote>\n<h3>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p><a href=\"#introduction\" rel=\"noopener noreferrer nofollow\">\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#before-we-start\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#create-nest-app\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f nest<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#install-nexjs\" rel=\"noopener noreferrer nofollow\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 NEXT.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#befriend-frameworks\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0440\u0443\u0436\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#srr\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f SSR<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#nest-controller\" rel=\"noopener noreferrer nofollow\">\u0427\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 nest<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#direct-services\" rel=\"noopener noreferrer nofollow\">\u0427\u0435\u0440\u0435\u0437 \u043f\u0440\u044f\u043c\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#self-fetch\" rel=\"noopener noreferrer nofollow\">\u0427\u0435\u0440\u0435\u0437 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#fetch-wrapper\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 fetch<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#params-interceptor\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#conclusion\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"introduction\" id=\"introduction\"><\/a><\/p>\n<h3>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u0430 \u0432 2021 \u0433\u043e\u0434\u0443, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/nextjs.org\" rel=\"noopener noreferrer nofollow\">NEXT.js<\/a> &#8212; \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 React \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c SSR\/SSG, TypeScript, code-splitting, \u0440\u0430\u0443\u0442\u0438\u043d\u0433 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0447\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041d\u043e \u044d\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440. <\/p>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 &#8212; \u0430 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430\/\u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a\u0430? \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/nestjs.com\" rel=\"noopener noreferrer nofollow\">nest<\/a> &#8212; \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 node.js \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0431\u044d\u043a\u0435\u043d\u0434\u044b. \u0421\u0438\u043b\u044c\u043d\u044b\u043c \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043f\u043e Angular\/Spring MVC \u043c\u043e\u0434\u0435\u043b\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 DI.<\/p>\n<p>\u0410 \u043a\u0430\u043a \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0432\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438? \u0415\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0445\u0438\u0442\u0440\u044b\u0439 proxy-\u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438: \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432\/\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0438 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u043a\u0441\u0438. <\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/nest-next\" rel=\"noopener noreferrer nofollow\">nest-next<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c NEXT.js \u0432\u043d\u0443\u0442\u0440\u0438 nest, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0442.\u0434. \u041d\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0440\u044f\u0434 \u043d\u044e\u0430\u043d\u0441\u043e\u0432 \u0438 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u0435\u0439, \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 nest-next, \u043f\u043e \u0445\u043e\u0434\u0443 \u0447\u0435\u0433\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0442\u0435\u043c\u0438 best practices, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u044b \u043c\u043d\u043e\u044e \u0438 \u043c\u043e\u0438\u043c\u0438 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u0437\u0430 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435.<\/p>\n<blockquote>\n<p>\u041f\u043e \u0445\u043e\u0434\u0443 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044f\u0441\u044c \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430 \u043f\u0440\u043e\u0432\u044f\u0437\u043a\u0443 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0422\u0430\u043c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e\u0431 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"before-we-start\" id=\"before-we-start\"><\/a><\/p>\n<h3>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c<\/h3>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c NEXT.js \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u043b\u0438 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u044e\u0442\u0441\u044f \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a\u0430. \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u0432\u0441\u0435\u0440\u044c\u0435\u0437 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/nextjs.org\/docs\/api-routes\/introduction\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 NEXT.js<\/a>. \u0415\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438 \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0431\u044d\u043a\u0435\u043d\u0434, \u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 NEXT.js \u043a\u0430\u043a \u0440\u0430\u0437 \u044d\u0442\u043e \u0438 \u0443\u043c\u0435\u0435\u0442, \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0442\u044f\u043d\u0443\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0443\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<blockquote>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0431\u0438\u043e\u0437 nest-next \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, \u043b\u0438\u0431\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0439 \u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438\/\u0438\u043b\u0438 \u0437\u0430\u0432\u044f\u0437\u043a\u043e\u0439 \u043f\u043e\u0434 \u0438\u043c\u0435\u044e\u0449\u0443\u044e\u0441\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043d\u0430 Express\/nest.<\/p>\n<\/blockquote>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0430 \u043d\u0430 2 \u0447\u0430\u0441\u0442\u0438: \u0432 \u044d\u0442\u043e\u0439, \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 nest-next \u0441 \u043d\u0443\u043b\u044f \u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435, \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c SSR. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u0441\u0435\u0431\u044f \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 \u044d\u0442\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0442\u043e\u0438\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 <a href=\"https:\/\/habr.com\/ru\/post\/571032\/\" rel=\"noopener noreferrer nofollow\">\u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a>, \u0433\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e HMR, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 SSR \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 &#171;\u0437\u0430 \u0441\u043b\u044d\u0448\u043e\u043c&#187;.<\/p>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435: \u0434\u043b\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 GitHub &#8212; <a href=\"https:\/\/github.com\/yakovlev-alexey\/nest-next-example\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/yakovlev-alexey\/nest-next-example<\/a> &#8212; \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u0432 \u0446\u0435\u043b\u043e\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0445\u043e\u0434\u043e\u043c \u0434\u0438\u043b\u043e\u0433\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"create-nest-app\" id=\"create-nest-app\"><\/a><\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f nest<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 nest \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u043e\u0439 @nestjs\/cli, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b:<\/p>\n<pre><code class=\"bash\">npx @nestjs\/cli new nest-next-example<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430. \u042f \u0432\u044b\u0431\u0440\u0430\u043b yarn \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438 \u0434\u0430\u043b\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0434\u043b\u044f yarn, \u0434\u043b\u044f npm \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0440\u0430\u0437\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>test<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0444\u0430\u0439\u043b <code>app.controller.spec.ts<\/code> &#8212; \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043a\u0438 <code>src<\/code>:<\/p>\n<pre><code>\u2514\u2500\u2500 src     \u251c\u2500\u2500 client # \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434: \u0445\u0443\u043a\u0438, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0442.\u0434.     \u251c\u2500\u2500 pages # \u044d\u043a\u0440\u0430\u043d\u044b \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u0430 (NEXT.js)     \u251c\u2500\u2500 server # \u0441\u0435\u0440\u0432\u0435\u0440 nest.js     \u2514\u2500\u2500 shared # \u043e\u0431\u0449\u0438\u0435 \u0442\u0438\u043f\u044b\/\u0445\u0435\u043b\u043f\u0435\u0440\u044b \u0438 \u0442.\u0434.<\/code><\/pre>\n<p>\u041e\u0442\u0440\u0430\u0437\u0438\u043c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 nest:<\/p>\n<pre><code class=\"json\">\/\/ .\/nest-cli.json {     \"collection\": \"@nestjs\/schematics\",     \"sourceRoot\": \"src\",     \"entryFile\": \"server\/main\" }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>yarn start:dev<\/code> \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0448 <code>\"Hello world\"<\/code> \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:3000<\/code> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<blockquote>\n<p>\u0418\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 nest, \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430 <code>Error: Cannot find module '...\/dist\/server\/main'<\/code> &#8212; \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c <code>\"entryFile\": \"main\"<\/code>.<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"install-nextjs\" id=\"install-nextjs\"><\/a><\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 NEXT.js<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 NEXT.js: <\/p>\n<pre><code class=\"bash\"># NEXT.js \u0438 \u0435\u0433\u043e peer \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 yarn add next react react-dom # \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u0438\u043f\u044b \u0438 \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f eslint yarn add -D @types\/react @types\/react-dom eslint-config-next<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 NEXT.js: <code>yarn next dev<\/code>. \u0412 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0443\u0442 \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f: \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0444\u0430\u0439\u043b <code>next-env.d.ts<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d <code>tsconfig.json<\/code>. \u0421\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c nest, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 TypeScript \u0441\u043b\u043e\u043c\u0430\u043b\u0438 \u0441\u0431\u043e\u0440\u043a\u0443. \u041f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043c\u0435\u044e\u0449\u0438\u0439\u0441\u044f <code>tsconfig.build.json<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <code>tsconfig.server.json<\/code> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0442\u0443\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"json\">\/\/ .\/tsconfig.server.json {     \"extends\": \".\/tsconfig.json\",     \"compilerOptions\": {         \"noEmit\": false     },     \"include\": [         \".\/src\/server\/**\/*.ts\",         \".\/src\/shared\/**\/*.ts\",         \".\/@types\/**\/*.d.ts\"     ] }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u043d\u043e\u0432\u044c \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 Typescript. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 <code>package.json<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0431\u043e\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432:<\/p>\n<pre><code class=\"json\">\/\/ .\/package.json \"scripts\": {     \"prebuild\": \"rimraf dist\",     \"build\": \"yarn build:next &amp;&amp; yarn build:nest\",     \"build:next\": \"next build\",     \"build:nest\": \"nest build --path .\/tsconfig.server.json\",     \"start\": \"node .\/dist\/server\/main.js\",     \"start:next\": \"next dev\",     \"start:dev\": \"nest start --path .\/tsconfig.server.json --watch\",     \"start:debug\": \"nest start --path .\/tsconfig.server.json --debug --watch\",     \"start:prod\": \"node dist\/main\",     \/\/ ... \u043f\u0440\u043e\u0447\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b (lint\/format etc) },<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src\/pages<\/code> \u044d\u043a\u0440\u0430\u043d <code>index<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>App<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b NEXT.js:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/pages\/app.tsx import { FC } from 'react'; import { AppProps } from 'next\/app';  const App: FC&lt;AppProps> = ({ Component, pageProps }) => {     return &lt;Component {...pageProps} \/>; };  export default App;<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ .\/src\/pages\/index.tsx import { FC } from 'react';  const Home: FC = () => {     return &lt;h1>Home&lt;\/h1>; };  export default Home;<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0441\u0435\u0440\u0432\u0435\u0440 NEXT.js \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>yarn start:next<\/code>, \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:3000<\/code>.<\/p>\n<blockquote>\n<p>\u0412 <code>.gitignore<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>.next<\/code> &#8212; \u0442\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0431\u043e\u0440\u043e\u043a NEXT.js<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"befriend-frameworks\" id=\"befriend-frameworks\"><\/a><\/p>\n<h3>\u041f\u043e\u0434\u0440\u0443\u0436\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u043e \u043d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u044c\u044e \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c NEXT.js \u0432 nest. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 nest-next:<\/p>\n<pre><code class=\"bash\">yarn add nest-next<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c <code>RenderModule<\/code> \u0432 <code>app.module.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts import { Module } from '@nestjs\/common'; import { RenderModule } from 'nest-next'; import Next from 'next'; import { AppController } from '.\/app.controller'; import { AppService } from '.\/app.service';  @Module({     \/* \u0432 \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442         \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 NEXT.js *\/     imports: [RenderModule.forRootAsync(Next({}))],     controllers: [AppController],     providers: [AppService], }) export class AppModule {}<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@Render<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440-\u043c\u043e\u0434\u0443\u043b\u0435\u043c nest. \u041e\u0431\u043d\u043e\u0432\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 <code>app.controller.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.controller.ts import { Controller, Get, Render } from '@nestjs\/common'; import { AppService } from '.\/app.service';  @Controller() export class AppController {     constructor(private readonly appService: AppService) {}          @Get()     @Render('index')     home() {         return {};     } }<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 nest: <code>yarn start:dev<\/code>. \u041f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 NEXT.js &#8212; \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b \u043d\u0435 \u0431\u044b\u043b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d &#8212; \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0440\u0435\u0436\u0438\u043c\u0435. \u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 NEXT.js \u043e\u043f\u0446\u0438\u044e <code>dev: true<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts imports: [     RenderModule.forRootAsync(Next({ dev: true })) ],<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 <code>localhost:3000<\/code>.  \u041c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 404 NEXT.js &#8212; \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0432\u0435\u0434\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b <code>index.tsx<\/code> \u0432 <code>src\/pages<\/code> \u0438 \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0435\u0433\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 NEXT.js. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 nest-next \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0449\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>views<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>pages<\/code>, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043e\u043f\u0446\u0438\u044e <code>viewsDir<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>RenderModule<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts imports: [     RenderModule.forRootAsync(         Next({ dev: true }),         \/* \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 null \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 nest-next              \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u044b \u0432 \u043a\u043e\u0440\u043d\u0435 pages *\/         { viewsDir: null }     ) ],<\/code><\/pre>\n<blockquote>\n<p>\u0420\u044f\u0434\u043e\u043c \u0441 <code>viewsDir<\/code> \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043e\u043f\u0446\u0438\u044f <code>dev<\/code> \u0443\u0436\u0435 \u0434\u043b\u044f nest-next, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0443\u0436\u0435 \u0437\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0438\u0445 \u0432 NEXT.js &#8212; \u0432 production \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0445\u043e\u0442\u0435\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:3000<\/code> \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0432 <code>index.tsx<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"ssr\" id=\"ssr\"><\/a><\/p>\n<h3>\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f SSR<\/h3>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 NEXT.js &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f SSR. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c getServerSideProps (\u0434\u0430\u043b\u0435\u0435 &#8212; GSSP) &#8212; \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 &#8212; \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 SSR. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c nest-next \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u044b \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 NEXT.js. \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 &#8212; \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0432 \u0431\u043b\u043e\u0433\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u043b\u043e\u0433\u043f\u043e\u0441\u0442\u0430 \u043f\u043e id. \u041d\u0430 \u043d\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/shared\/types\/blog-post.ts export type BlogPost = {     title: string;     id: number; };  \/\/ .\/src\/server\/app.controller.ts import { Controller, Get, Param, Render } from '@nestjs\/common';  \/\/ ...  @Get(':id') @Render('[id]') public blogPost(@Param('id') id: string) {  return {}; }<\/code><\/pre>\n<pre><code class=\"dart\">\/\/ .\/src\/pages\/[id].tsx import { GetServerSideProps } from 'next'; import Link from 'next\/link'; import { FC } from 'react'; import { BlogPost } from 'src\/shared\/types\/blog-post';  type TBlogProps = {     post: BlogPost; };  const Blog: FC&lt;TBlogProps> = ({ post = {} }) => {     return (         &lt;div>             &lt;Link href={'\/'}>Home&lt;\/Link>             &lt;h1>Blog {post.title}&lt;\/h1>         &lt;\/div>     ); };  export const getServerSideProps: GetServerSideProps&lt;TBlogProps> = async (     ctx, ) => {     return { props: {} }; };  export default Blog;<\/code><\/pre>\n<pre><code class=\"dart\">\/\/ .\/src\/pages\/index.tsx import { GetServerSideProps } from 'next'; import Link from 'next\/link'; import { FC } from 'react'; import { BlogPost } from 'src\/shared\/types\/blog-post';  type THomeProps = {     blogPosts: BlogPost[]; };  const Home: FC&lt;THomeProps> = ({ blogPosts = [] }) => {     return (         &lt;div>             &lt;h1>Home&lt;\/h1>             {blogPosts.map(({ title, id }) => (                 &lt;div key={id}>                     &lt;Link href={`\/${id}`}>{title}&lt;\/Link>                 &lt;\/div>             ))}         &lt;\/div>     ); };  export const getServerSideProps: GetServerSideProps&lt;THomeProps> = async (     ctx, ) => {     return { props: {} }; };  export default Home;<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p><a class=\"anchor\" name=\"nest-controller\" id=\"nest-controller\"><\/a><\/p>\n<h4>\u0427\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 nest<\/h4>\n<p>\u041d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 <code>home<\/code> \u0432 <code>app.controller.ts<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 &#8212; \u0432\u0441\u0435, \u0447\u0442\u043e \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043e\u0442\u0441\u044e\u0434\u0430, \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0432 <code>ctx.query<\/code> \u0432 GSSP.<\/p>\n<p>\u0417\u0430\u043c\u043e\u043a\u0430\u0435\u043c \u0431\u043b\u043e\u0433\u043f\u043e\u0441\u0442\u044b \u0432 <code>app.service.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.service.ts import { Injectable } from '@nestjs\/common'; import { from } from 'rxjs';  const BLOG_POSTS = [     { title: 'Lorem Ipsum', id: 1 },     { title: 'Dolore Sit', id: 2 },     { title: 'Ame', id: 3 }, ];  @Injectable() export class AppService {     getBlogPosts() {         return from(BLOG_POSTS);     } }<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043c\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u0438 \u0432\u0435\u0440\u043d\u0435\u043c \u0431\u043b\u043e\u0433\u043f\u043e\u0441\u0442\u044b \u0438\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.controller.ts import { map, toArray } from 'rxjs';  \/\/ ...  @Get('\/') @Render('index') home() {     return this.appService.getBlogPosts().pipe(         toArray(),         map((blogPosts) => ({ blogPosts })),     ); }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 GSSP \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a <code>blogPosts<\/code> \u0447\u0435\u0440\u0435\u0437 <code>ctx.query<\/code>. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u0435\u043d &#8212; \u0442\u0430\u0439\u043f\u0438\u043d\u0433\u0438 query \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u043d\u0435\u0442 \u0442\u0430\u043c \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e <code>blogPosts<\/code>, \u0430 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 <code>ParsedUrlQuery<\/code>. \u0414\u0435\u0439\u0441\u0442\u0438\u0432\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>localhost:3000\/1<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 Home &#8212; \u043c\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e <code>blogPosts<\/code> \u0442\u0430\u043c \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f.<\/p>\n<blockquote>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 NEXT.js \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c\u0443 \u044d\u043d\u0434\u043e\u043f\u0438\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442 GSSP \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 JSON &#8212; \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0430 \u0432 <code>ctx.query<\/code> \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u0437 \u0430\u0434\u0440\u0435\u0441\u0430 \u0438 <code>location.search<\/code>.<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"direct-services\" id=\"direct-services\"><\/a><\/p>\n<h4>\u0427\u0435\u0440\u0435\u0437 \u043f\u0440\u044f\u043c\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c<\/h4>\n<p>\u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, GSSP \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c nest \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0442\u0435\u043b\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0442\u0430\u043a \u0436\u0435 \u043d\u0430\u0441 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 &#8212; \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u044b \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043f\u0440\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u044b-\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b, DI \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 nest \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u043d\u0430\u0442\u043e\u043b\u043a\u043d\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u0445\u043e\u0436\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 &#8212; \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>req<\/code>) \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p><a class=\"anchor\" name=\"self-fetch\" id=\"self-fetch\"><\/a><\/p>\n<h4>\u0427\u0435\u0440\u0435\u0437 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435<\/h4>\n<p>\u041d\u0430\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 (\u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u0434\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442) \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>fetch<\/code> \u0438\u0437 GSSP. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 <code>fetch<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0440\u0435\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0434\u0432\u0438\u043d\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0440\u0435\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 &#8212; \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043f\u043e\u0440\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/shared\/constants\/env.ts export const isServer = typeof window === 'undefined';  export const isClient = !isServer;  export const NODE_ENV = process.env.NODE_ENV;  export const PORT = process.env.PORT || 3000;<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u043f\u043e\u0440\u0442 \u0432 <code>main.ts<\/code> (<code>await app.listen(PORT)<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0440\u0435\u0436\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043b\u044f NEXT \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0440\u0435\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts RenderModule.forRootAsync(     Next({ dev: NODE_ENV === 'development' }),     { viewsDir: null } )  \/\/ .\/package.json \"start:dev\": \"NODE_ENV=development nest start --path .\/tsconfig.server.json --watch\"<\/code><\/pre>\n<blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u0437 <code>src\/shared<\/code> \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 nest \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438\u043d\u0430\u0447\u0435: <code>main.ts<\/code> \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u0432 <code>dist\/server<\/code>, \u043a\u0430\u043a \u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u044b \u043c\u0435\u043d\u044f\u043b\u0438 <code>entryFile<\/code> \u0432 <code>nest-cli.json<\/code>, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0430 \u043f\u0430\u043f\u043a\u0443 <code>dist<\/code> \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c, \u0438\u043d\u0430\u0447\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"fetch-wrapper\" id=\"fetch-wrapper\"><\/a><\/p>\n<p><strong>\u041e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 fetch<\/strong><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0430\u0434\u0440\u0435\u0441\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 <code>fetch<\/code> \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0440\u0435\u0434\u044b \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f &#8212; \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u0441\u044b\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u0435\u0431\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/shared\/utils\/fetch.ts import { isServer, PORT } from '..\/constants\/env';  const envAwareFetch = (url: string, options?: Record&lt;string, unknown>) => {     const fetchUrl =         isServer &amp;&amp; url.startsWith('\/') ? `http:\/\/localhost:${PORT}${url}` : url;      return fetch(fetchUrl, options).then((res) => res.json()); };  export { envAwareFetch as fetch };<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0435\u0440\u0432\u0438\u0441 <code>app.service.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.service.ts import { Injectable, NotFoundException } from '@nestjs\/common'; import { from, of, toArray } from 'rxjs';  const BLOG_POSTS = [   { title: 'Lorem Ipsum', id: 1 },   { title: 'Dolore Sit', id: 2 },   { title: 'Ame', id: 3 }, ];  @Injectable() export class AppService {   getBlogPosts() {     return from(BLOG_POSTS).pipe(toArray());   }    getBlogPost(postId: number) {     const blogPost = BLOG_POSTS.find(({ id }) => id === postId);      if (!blogPost) {       throw new NotFoundException();     }      return of(blogPost);   } }<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u044b API \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0431\u043b\u043e\u0433\u043f\u043e\u0441\u0442\u043e\u0432 \u0432 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.controller.ts import { Controller, Get, Param, ParseIntPipe, Render } from '@nestjs\/common'; import { AppService } from '.\/app.service';  @Controller() export class AppController {   constructor(private readonly appService: AppService) {}    @Get('\/')   @Render('index')   home() {     return {};   }    @Get(':id')   @Render('[id]')   public blogPost(@Param('id') id: string) {     return {};   }    @Get('\/api\/blog-posts')   public listBlogPosts() {     return this.appService.getBlogPosts();   }    @Get('\/api\/blog-posts\/:id')   public getBlogPostById(@Param('id', new ParseIntPipe()) id: number) {     return this.appService.getBlogPost(id);   } }<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b GSSP \u0432 \u043d\u0430\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/pages\/index.tsx import { fetch } from 'src\/shared\/utils\/fetch';  export const getServerSideProps: GetServerSideProps&lt;THomeProps> = async () => {     const blogPosts = await fetch('\/api\/blog-posts');     return { props: { blogPosts } }; };  \/\/ .\/src\/pages\/[id].tsx import { fetch } from 'src\/shared\/utils\/fetch';  export const getServerSideProps: GetServerSideProps&lt;TBlogProps> = async () => {     const id = ctx.query.id;     const post = await fetch(`\/api\/blog-posts\/${id}`);          return { props: { post } }; };<\/code><\/pre>\n<p>\u0417\u0430\u0439\u0434\u0435\u043c \u043d\u0430 <code>localhost:3000<\/code> \u0438 \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u043b\u043e\u0433\u043f\u043e\u0441\u0442\u043e\u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f. \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u0441\u0442\u043e\u0432 &#8212; \u0437\u0434\u0435\u0441\u044c \u0442\u043e\u0436\u0435 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e, \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435. \u041d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443: \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 &#8212; \u0442\u0430\u043a\u043e\u0439 \u0431\u043b\u043e\u0433\u043f\u043e\u0441\u0442 \u043d\u0435 \u0431\u044b\u043b \u043d\u0430\u0439\u0434\u0435\u043d. \u0421\u0442\u0440\u0430\u043d\u043d\u043e, \u0432\u0435\u0434\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u043f\u0440\u0438 SSR nest-next \u043f\u043e\u0434\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0432 <code>ctx.query<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0442\u0430\u043c \u043d\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u0420\u0435\u0448\u0438\u043c \u044d\u0442\u043e \u043d\u0435\u0434\u043e\u0440\u0430\u0437\u0443\u043c\u0435\u043d\u0438\u0435 &#8212; \u0432\u0435\u0440\u043d\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.controller.ts @Get(':id') @Render('[id]') public blogPost(@Param('id') id: string) {     return { id }; }<\/code><\/pre>\n<blockquote>\n<p>\u0414\u043b\u044f \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430 API \u043c\u044b \u043f\u0430\u0440\u0441\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432 Int &#8212; \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u0435\u0434\u044c \u044d\u0442\u043e \u0432\u043d\u0435\u0441\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b: NEXT.js \u043d\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0438\u0445 <code>ctx.query<\/code>, \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438 \u043c\u044b. <\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 &#8212; \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c, \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u043b\u043e \u043d\u0430\u0448\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. <\/p>\n<p><a class=\"anchor\" name=\"params-interceptor\" id=\"params-interceptor\"><\/a><\/p>\n<p><strong>\u041f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/strong><\/p>\n<p>\u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e &#8212; \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f <code>location.search<\/code>. \u0414\u043b\u044f \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043e\u0431\u0440\u0430\u0442\u0438\u043c\u0441\u044f \u043a AOP <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%90%D1%81%D0%BF%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">(Aspect-oriented programming)<\/a> \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0443 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 nest: \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443 <a href=\"https:\/\/docs.nestjs.com\/interceptors\" rel=\"noopener noreferrer nofollow\">Interceptor<\/a>.<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/params.interceptor.ts import {     Injectable,     NestInterceptor,     ExecutionContext,     CallHandler, } from '@nestjs\/common'; import { Request } from 'express'; import { Observable } from 'rxjs'; import { map } from 'rxjs\/operators';  @Injectable() export class ParamsInterceptor implements NestInterceptor {     intercept(context: ExecutionContext, next: CallHandler): Observable&lt;unknown> {         const request = context.switchToHttp().getRequest() as Request;                  \/* \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e\u0434\u043b\u043e\u0436\u0438\u043c           \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 *\/         return next.handle().pipe(             map((data) => {                 return {                     ...request.query,                     ...request.params,                     ...data,                 };             }),         );     } } <\/code><\/pre>\n<blockquote>\n<p>\u0412 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 NEXT.js, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 query. \u0422\u0430\u043a \u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0438\u0437 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043d\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.controller.ts import { UseInterceptors } from '@nestjs\/common'; import { ParamsInterceptor } from '.\/params.interceptor';  \/\/ ...  @Get('\/') @Render('index') @UseInterceptors(ParamsInterceptor) public home() {     return {}; }  @Get(':id') @Render('[id]') @UseInterceptors(ParamsInterceptor) public blogPost() {     return {}; }<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0430\u0434\u0440\u0435\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0432 nest \u0438 NEXT.js. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430\u0445 <code>@Get()<\/code> \u0438 <code>@Render()<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c. \u041d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 API, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0432\u0435\u0448\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f &#8212; \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 JSON \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<blockquote>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 nest-next \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 API &#8212; \u0442\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@UseInterceptors()<\/code> \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0432\u0435\u0441\u044c \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u043d\u0435 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b.<\/p>\n<\/blockquote>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435: \u0432\u043d\u043e\u0432\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 &#8212; \u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p><a class=\"anchor\" name=\"conclusion\" id=\"conclusion\"><\/a><\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u0430. \u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0432\u044b\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u0443 \u0438\u0437 nest-next, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u044f\u0434 \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c\u0441\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u044d\u043d\u0442\u0435\u0440\u043f\u0440\u0430\u0439\u0437\u0435. \u041f\u0440\u043e \u043d\u0438\u0445 <a href=\"https:\/\/habr.com\/ru\/post\/571032\/\" rel=\"noopener noreferrer nofollow\">\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a>.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0433\u043b\u0430 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0432\u043e\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e, \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e nest-next.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/570886\/\"> https:\/\/habr.com\/ru\/articles\/570886\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 nest.js \u0438 NEXT.js, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0432\u044b\u0431\u043e\u0440 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SSR. <a href=\"https:\/\/habr.com\/ru\/post\/571032\/\" rel=\"noopener noreferrer nofollow\">\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e HMR, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 SSR \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 &#171;\u0437\u0430 \u0441\u043b\u0435\u0448\u043e\u043c&#187;.<\/p>\n<blockquote>\n<p>\u041d\u0430\u0441\u0442\u0443\u043f\u0438\u043b \u041e\u043a\u0442\u044f\u0431\u0440\u044c 2022 \u0438 \u0432\u044b\u0448\u043b\u0430 <a href=\"https:\/\/nextjs.org\/blog\/next-13\" rel=\"noopener noreferrer nofollow\">\u043d\u043e\u0432\u0430\u044f 13 \u0432\u0435\u0440\u0441\u0438\u044f NEXT.js<\/a>. \u0412 \u043d\u0435\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u044e\u0442 \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c nest.js \u0438 NEXT.js \u0432\u043c\u0435\u0441\u0442\u0435. \u041f\u043e\u043a\u0430 \u044f \u0438\u0437\u0443\u0447\u0430\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u043e\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0435\u0439 <code>app<\/code> \u0438 \u0433\u043e\u0442\u043e\u0432\u043b\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0430\u043c \u0442\u043e\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0430\u0448 \u0444\u0438\u0434\u0431\u0435\u043a \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e NEXT.js 13 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 <code>nest-next<\/code> (\u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435) \u0432 <a href=\"https:\/\/github.com\/kyle-mccarthy\/nest-next\/issues\/92\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u043c GitHub issue<\/a>. <\/p>\n<\/blockquote>\n<h3>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p><a href=\"#introduction\" rel=\"noopener noreferrer nofollow\">\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#before-we-start\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#create-nest-app\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f nest<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#install-nexjs\" rel=\"noopener noreferrer nofollow\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 NEXT.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#befriend-frameworks\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0440\u0443\u0436\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#srr\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f SSR<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#nest-controller\" rel=\"noopener noreferrer nofollow\">\u0427\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 nest<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#direct-services\" rel=\"noopener noreferrer nofollow\">\u0427\u0435\u0440\u0435\u0437 \u043f\u0440\u044f\u043c\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#self-fetch\" rel=\"noopener noreferrer nofollow\">\u0427\u0435\u0440\u0435\u0437 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#fetch-wrapper\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 fetch<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#params-interceptor\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#conclusion\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"introduction\" id=\"introduction\"><\/a><\/p>\n<h3>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u0430 \u0432 2021 \u0433\u043e\u0434\u0443, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/nextjs.org\" rel=\"noopener noreferrer nofollow\">NEXT.js<\/a> &#8212; \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 React \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c SSR\/SSG, TypeScript, code-splitting, \u0440\u0430\u0443\u0442\u0438\u043d\u0433 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0447\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041d\u043e \u044d\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440. <\/p>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 &#8212; \u0430 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430\/\u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a\u0430? \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/nestjs.com\" rel=\"noopener noreferrer nofollow\">nest<\/a> &#8212; \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 node.js \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0431\u044d\u043a\u0435\u043d\u0434\u044b. \u0421\u0438\u043b\u044c\u043d\u044b\u043c \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043f\u043e Angular\/Spring MVC \u043c\u043e\u0434\u0435\u043b\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 DI.<\/p>\n<p>\u0410 \u043a\u0430\u043a \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0432\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438? \u0415\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0445\u0438\u0442\u0440\u044b\u0439 proxy-\u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438: \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432\/\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0438 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u043a\u0441\u0438. <\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/nest-next\" rel=\"noopener noreferrer nofollow\">nest-next<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c NEXT.js \u0432\u043d\u0443\u0442\u0440\u0438 nest, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0442.\u0434. \u041d\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0440\u044f\u0434 \u043d\u044e\u0430\u043d\u0441\u043e\u0432 \u0438 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u0435\u0439, \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 nest-next, \u043f\u043e \u0445\u043e\u0434\u0443 \u0447\u0435\u0433\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0442\u0435\u043c\u0438 best practices, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u044b \u043c\u043d\u043e\u044e \u0438 \u043c\u043e\u0438\u043c\u0438 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u0437\u0430 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435.<\/p>\n<blockquote>\n<p>\u041f\u043e \u0445\u043e\u0434\u0443 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044f\u0441\u044c \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430 \u043f\u0440\u043e\u0432\u044f\u0437\u043a\u0443 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0422\u0430\u043c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e\u0431 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"before-we-start\" id=\"before-we-start\"><\/a><\/p>\n<h3>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c<\/h3>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c NEXT.js \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u043b\u0438 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u044e\u0442\u0441\u044f \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a\u0430. \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u0432\u0441\u0435\u0440\u044c\u0435\u0437 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/nextjs.org\/docs\/api-routes\/introduction\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 NEXT.js<\/a>. \u0415\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438 \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0431\u044d\u043a\u0435\u043d\u0434, \u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 NEXT.js \u043a\u0430\u043a \u0440\u0430\u0437 \u044d\u0442\u043e \u0438 \u0443\u043c\u0435\u0435\u0442, \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0442\u044f\u043d\u0443\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0443\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<blockquote>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0431\u0438\u043e\u0437 nest-next \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, \u043b\u0438\u0431\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0439 \u0444\u0440\u043e\u043d\u0442\u0431\u044d\u043a-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438\/\u0438\u043b\u0438 \u0437\u0430\u0432\u044f\u0437\u043a\u043e\u0439 \u043f\u043e\u0434 \u0438\u043c\u0435\u044e\u0449\u0443\u044e\u0441\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043d\u0430 Express\/nest.<\/p>\n<\/blockquote>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0430 \u043d\u0430 2 \u0447\u0430\u0441\u0442\u0438: \u0432 \u044d\u0442\u043e\u0439, \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 nest-next \u0441 \u043d\u0443\u043b\u044f \u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435, \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c SSR. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u0441\u0435\u0431\u044f \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 \u044d\u0442\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0442\u043e\u0438\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 <a href=\"https:\/\/habr.com\/ru\/post\/571032\/\" rel=\"noopener noreferrer nofollow\">\u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a>, \u0433\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e HMR, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 SSR \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 &#171;\u0437\u0430 \u0441\u043b\u044d\u0448\u043e\u043c&#187;.<\/p>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435: \u0434\u043b\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 GitHub &#8212; <a href=\"https:\/\/github.com\/yakovlev-alexey\/nest-next-example\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/yakovlev-alexey\/nest-next-example<\/a> &#8212; \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u0432 \u0446\u0435\u043b\u043e\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0445\u043e\u0434\u043e\u043c \u0434\u0438\u043b\u043e\u0433\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"create-nest-app\" id=\"create-nest-app\"><\/a><\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f nest<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 nest \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u043e\u0439 @nestjs\/cli, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b:<\/p>\n<pre><code class=\"bash\">npx @nestjs\/cli new nest-next-example<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430. \u042f \u0432\u044b\u0431\u0440\u0430\u043b yarn \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438 \u0434\u0430\u043b\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0434\u043b\u044f yarn, \u0434\u043b\u044f npm \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0440\u0430\u0437\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>test<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0444\u0430\u0439\u043b <code>app.controller.spec.ts<\/code> &#8212; \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043a\u0438 <code>src<\/code>:<\/p>\n<pre><code>\u2514\u2500\u2500 src     \u251c\u2500\u2500 client # \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434: \u0445\u0443\u043a\u0438, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0442.\u0434.     \u251c\u2500\u2500 pages # \u044d\u043a\u0440\u0430\u043d\u044b \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u0430 (NEXT.js)     \u251c\u2500\u2500 server # \u0441\u0435\u0440\u0432\u0435\u0440 nest.js     \u2514\u2500\u2500 shared # \u043e\u0431\u0449\u0438\u0435 \u0442\u0438\u043f\u044b\/\u0445\u0435\u043b\u043f\u0435\u0440\u044b \u0438 \u0442.\u0434.<\/code><\/pre>\n<p>\u041e\u0442\u0440\u0430\u0437\u0438\u043c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 nest:<\/p>\n<pre><code class=\"json\">\/\/ .\/nest-cli.json {     \"collection\": \"@nestjs\/schematics\",     \"sourceRoot\": \"src\",     \"entryFile\": \"server\/main\" }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>yarn start:dev<\/code> \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0448 <code>\"Hello world\"<\/code> \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:3000<\/code> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<blockquote>\n<p>\u0418\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 nest, \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430 <code>Error: Cannot find module '...\/dist\/server\/main'<\/code> &#8212; \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c <code>\"entryFile\": \"main\"<\/code>.<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"install-nextjs\" id=\"install-nextjs\"><\/a><\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 NEXT.js<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 NEXT.js: <\/p>\n<pre><code class=\"bash\"># NEXT.js \u0438 \u0435\u0433\u043e peer \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 yarn add next react react-dom # \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u0438\u043f\u044b \u0438 \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f eslint yarn add -D @types\/react @types\/react-dom eslint-config-next<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 NEXT.js: <code>yarn next dev<\/code>. \u0412 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0443\u0442 \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f: \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0444\u0430\u0439\u043b <code>next-env.d.ts<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d <code>tsconfig.json<\/code>. \u0421\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c nest, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 TypeScript \u0441\u043b\u043e\u043c\u0430\u043b\u0438 \u0441\u0431\u043e\u0440\u043a\u0443. \u041f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043c\u0435\u044e\u0449\u0438\u0439\u0441\u044f <code>tsconfig.build.json<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <code>tsconfig.server.json<\/code> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0442\u0443\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"json\">\/\/ .\/tsconfig.server.json {     \"extends\": \".\/tsconfig.json\",     \"compilerOptions\": {         \"noEmit\": false     },     \"include\": [         \".\/src\/server\/**\/*.ts\",         \".\/src\/shared\/**\/*.ts\",         \".\/@types\/**\/*.d.ts\"     ] }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u043d\u043e\u0432\u044c \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 Typescript. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 <code>package.json<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0431\u043e\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432:<\/p>\n<pre><code class=\"json\">\/\/ .\/package.json \"scripts\": {     \"prebuild\": \"rimraf dist\",     \"build\": \"yarn build:next &amp;&amp; yarn build:nest\",     \"build:next\": \"next build\",     \"build:nest\": \"nest build --path .\/tsconfig.server.json\",     \"start\": \"node .\/dist\/server\/main.js\",     \"start:next\": \"next dev\",     \"start:dev\": \"nest start --path .\/tsconfig.server.json --watch\",     \"start:debug\": \"nest start --path .\/tsconfig.server.json --debug --watch\",     \"start:prod\": \"node dist\/main\",     \/\/ ... \u043f\u0440\u043e\u0447\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b (lint\/format etc) },<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src\/pages<\/code> \u044d\u043a\u0440\u0430\u043d <code>index<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>App<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b NEXT.js:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/pages\/app.tsx import { FC } from 'react'; import { AppProps } from 'next\/app';  const App: FC&lt;AppProps> = ({ Component, pageProps }) => {     return &lt;Component {...pageProps} \/>; };  export default App;<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ .\/src\/pages\/index.tsx import { FC } from 'react';  const Home: FC = () => {     return &lt;h1>Home&lt;\/h1>; };  export default Home;<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0441\u0435\u0440\u0432\u0435\u0440 NEXT.js \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>yarn start:next<\/code>, \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:3000<\/code>.<\/p>\n<blockquote>\n<p>\u0412 <code>.gitignore<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>.next<\/code> &#8212; \u0442\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0431\u043e\u0440\u043e\u043a NEXT.js<\/p>\n<\/blockquote>\n<p><a class=\"anchor\" name=\"befriend-frameworks\" id=\"befriend-frameworks\"><\/a><\/p>\n<h3>\u041f\u043e\u0434\u0440\u0443\u0436\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u043e \u043d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u044c\u044e \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c NEXT.js \u0432 nest. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 nest-next:<\/p>\n<pre><code class=\"bash\">yarn add nest-next<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c <code>RenderModule<\/code> \u0432 <code>app.module.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts import { Module } from '@nestjs\/common'; import { RenderModule } from 'nest-next'; import Next from 'next'; import { AppController } from '.\/app.controller'; import { AppService } from '.\/app.service';  @Module({     \/* \u0432 \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442         \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 NEXT.js *\/     imports: [RenderModule.forRootAsync(Next({}))],     controllers: [AppController],     providers: [AppService], }) export class AppModule {}<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@Render<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440-\u043c\u043e\u0434\u0443\u043b\u0435\u043c nest. \u041e\u0431\u043d\u043e\u0432\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 <code>app.controller.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.controller.ts import { Controller, Get, Render } from '@nestjs\/common'; import { AppService } from '.\/app.service';  @Controller() export class AppController {     constructor(private readonly appService: AppService) {}          @Get()     @Render('index')     home() {         return {};     } }<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 nest: <code>yarn start:dev<\/code>. \u041f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 NEXT.js &#8212; \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0431\u0430\u043d\u0434\u043b \u043d\u0435 \u0431\u044b\u043b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d &#8212; \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0440\u0435\u0436\u0438\u043c\u0435. \u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 NEXT.js \u043e\u043f\u0446\u0438\u044e <code>dev: true<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts imports: [     RenderModule.forRootAsync(Next({ dev: true })) ],<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 <code>localhost:3000<\/code>.  \u041c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 404 NEXT.js &#8212; \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0432\u0435\u0434\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b <code>index.tsx<\/code> \u0432 <code>src\/pages<\/code> \u0438 \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0435\u0433\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 NEXT.js. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 nest-next \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0449\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>views<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>pages<\/code>, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043e\u043f\u0446\u0438\u044e <code>viewsDir<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>RenderModule<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ .\/src\/server\/app.module.ts imports: [     RenderModule.forRootAsync(         Next({ dev: true }),         \/* \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 null \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 nest-next              \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u044b \u0432 \u043a\u043e\u0440\u043d\u0435 pages *\/         { viewsDir: null }     ) ],<\/code><\/pre>\n<blockquote>\n<p>\u0420\u044f\u0434\u043e\u043c \u0441 <code>viewsDir<\/code> \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043e\u043f\u0446\u0438\u044f <code>dev<\/code> \u0443\u0436\u0435 \u0434\u043b\u044f nest-next, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0443\u0436\u0435 \u0437\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0438\u0445 \u0432 NEXT.js &#8212; \u0432 production \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0445\u043e\u0442\u0435\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n<\/blockquote>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>localhost:3000<\/code> \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0432 <code>index.tsx<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"ssr\" id=\"ssr\"><\/a><\/p>\n<h3>\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f SSR<\/h3>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-399826","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/399826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=399826"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/399826\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=399826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=399826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=399826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}