nest next
1.0.0
Рендеринг модуля, чтобы добавить поддержку NextJS для NESTJS.
Nest-Next предоставляет модуль NESTJS для интеграции Next.js в приложение nest.js, он позволяет рендеринг страниц next.js через контроллеры NESTJS и предоставление первоначальных реквизитов на страницу.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextЕсли вы используете Next.js с TypeScript, который, скорее всего, имеет место, вам необходимо также установить типовые типы для React и React-Dom.
Импортируйте rendermodule в корневой модуль вашего приложения и вызовите метод Forrootasync.
import { Module } from '@nestjs/common' ;
import Next from 'next' ;
import { RenderModule } from 'nest-next' ;
@ Module ( {
imports : [
RenderModule . forRootAsync ( Next ( { dev : process . env . NODE_ENV !== 'production' } ) ) ,
...
] ,
...
} )
export class AppModule { }Rendermodule принимает параметры конфигурации в качестве второго аргумента в методе Forrootasync.
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} По умолчанию рендерер будет обслуживать страницы из /pages/views . Из -за ограничений в следующем, каталог /pages не настраивается, но каталог в каталоге /pages настраивается.
Опция viewsDir определяет папку внутри pages для рендеринга. По умолчанию значение составляет /views , но это может быть изменено или установлено на NULL, чтобы отображать из корня pages .
По умолчанию режим разработки будет установлен на true , если опция не будет перезаписана. В настоящее время режим разработки определяет, как ошибки должны быть сериализованы, прежде чем отправляться в дальнейшее.
Следующее 9 добавлено встроенная поддержка типовой типовой цитаты с нулевым конфигуртом. Это изменение в целом великолепно, но затем требуются конкретные настройки в TSConfig, которые несовместимы с тем, что необходимо для сервера. Однако эти настройки могут быть легко переопределены в файле tsconfig.server.json .
Если у вас возникают проблемы с неожиданными токенами, файлы, не излучающие при строительстве для производства, предупреждения о allowJs и declaration не используются вместе, и другие ошибки, связанные с типовым произведением; См. Файл tsconfig.server.json в проекте «Пример для полной конфигурации».
Вместо того, чтобы гневно обрабатывать ответ для запросов, которые 404 могут быть перенаправлены на обработчик запросов Next.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,Смотрите это обсуждение для большего контекста.
RenderModule переопределяет визуализацию Express/Fastify. Чтобы отобразить страницу в вашем контроллере импортируйте декоратор рендеринга из @nestjs/common и добавьте ее в метод, который будет отображать страницу. Путь для страницы относительно каталога /pages .
import { Controller , Get , Render } from '@nestjs/common' ;
@ Controller ( )
export class AppController {
@ Get ( )
@ Render ( 'Index' )
public index ( ) {
// initial props
return {
title : 'Next with Nest' ,
} ;
}
}Кроме того, функция рендеринга доступна на объекте Res.
@ Controller ( )
export class AppController {
@ Get ( )
public index ( @ Res ( ) res : RenderableResponse ) {
res . render ( 'Index' , {
title : 'Next with Nest' ,
} ) ;
}
}Функция рендеринга принимает в представление, а также начальные реквизиты, передаваемые на страницу.
render = ( view : string , initialProps ?: any ) => any ;Первоначальные реквизиты, отправленные на следующую страницу просмотра.
import { NextPage , NextPageContext } from 'next' ;
// The component's props type
type PageProps = {
title : string ;
} ;
// extending the default next context type
type PageContext = NextPageContext & {
query : PageProps ;
} ;
// react component
const Page : NextPage < PageProps > = ( { title } ) => {
return (
< div >
< h1 > { title } < / h1>
< / div >
) ;
} ;
// assigning the initial props to the component's props
Page . getInitialProps = ( ctx : PageContext ) => {
return {
title : ctx . query . title ,
} ;
} ;
export default Page ;По умолчанию ошибки будут обработаны и отображаются с помощью рендеринга Exrure, которая использует настраиваемую страницу _error. Кроме того, ошибки можно перехватить, установив собственный обработчик ошибок.
Пользовательский обработчик ошибок может быть установлен для переопределения или улучшения поведения по умолчанию. Это может быть использовано для таких вещей, как регистрация ошибки или отменение другого ответа.
В вашем пользовательском обработчике ошибок у вас есть возможность просто перехватить и осмотреть ошибку или отправить свой собственный ответ. Если ответ отправляется из обработчика ошибок, запрос считается выполненным, и ошибка не будет перенаправлена на рендеринг ошибки Next. Если ответ не отправляется в обработчике ошибок, после возвращения обработчика ошибка пересылается на рендеринг ошибки. См. Поток запроса ниже для визуального объяснения.
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; Вы можете установить обработчик ошибок, получив отдачу от контейнера Nest.
// in main.ts file after registering the RenderModule
const main ( ) => {
...
// get the RenderService
const service = server . get ( RenderService ) ;
service . setErrorHandler ( async ( err , req , res ) => {
// send JSON response
res . send ( err . response ) ;
} ) ;
...
} Изображение связано с более крупной версией
Проекты с полной настройкой можно просмотреть в папке примеров
Затем отображает страницы из каталога страниц. Исходный код гнезда может оставаться в папке по умолчанию /src
/src
/main.ts
/app.module.ts
/app.controller.ts
/pages
/views
/Index.jsx
/components
...
babel.config.js
next.config.js
nodemon.json
tsconfig.json
tsconfig.server.json
Затем отображает страницы из каталога страниц в подпроекте «UI». Проект NEST находится в папке "сервера". Чтобы обеспечить безопасным типом свойств между проектами «пользовательский интерфейс» и «сервер», есть папка, называемая «DTO» за пределами обоих проектов. Изменения в нем во время «Dev» запускают запуска запуска перекомпиляции обоих проектов.
/server
/src
/main.ts
/app.module.ts
/app.controller.ts
nodemon.json
tsconfig.json
...
/ui
/pages
/index.tsx
/about.tsx
next-env.d.ts
tsconfig.json
...
/dto
/src
/AboutPage.ts
/IndexPage.ts
package.json
Чтобы запустить этот проект, проект «пользовательский интерфейс» и «сервер» должен быть создан в любом порядке. Проект «DTO» будет неявно построен проектом «Сервер». После обеих этих сборков проект «сервер» может быть запущен в DEV или в режиме производства.
Важно, чтобы ссылки на «пользовательского интерфейса» относятся к «DTO», ссылались на файлы TypeScript (.TS в папке «SRC»), а не к файлам объявлений (.D.STS в папке «DIST») из -за того, как в следующий раз не будет скомпилирован таким же образом, как у сервера.
В настоящее время страницы «Поймать все маршруты» не работают правильно. Смотрите выпуск № 101 для деталей.
Чтобы внести свой вклад, убедитесь, что ваши изменения передают тестовый набор. Чтобы запустить Test Suite docker , требуется docker-compose . Запустите npm run test для запуска тестов. Playwright будет установлен с необходимыми пакетами. Чтобы запустить тесты в следующем режиме разработки, запустите npm run test-dev . Вы также можете указать NODE_VERSION и основные переменные NEXT_VERSION для запуска тестов в определенных средах.
MIT Лицензия
Copyright (C)-2018-Present Kyle McCarthy
Настоящим дается разрешение, бесплатно, любому лицу, получающему копию этого программного обеспечения и связанные с ними файлы документации («Программное обеспечение»), чтобы иметь дело в программном обеспечении без ограничений, включая, без ограничения, права на использование, копирование, изменение, объединение, публикацию, распределение, сублиценность и/или продавать копии программного обеспечения и разрешения лиц, на которые программное обеспечение подходит для того, чтобы поступить так, чтобы поступить на следующие условия: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: на следующие условия: к следующим условиям: на следующие условия: на следующие условия.
Вышеуказанное уведомление об авторском праве и это уведомление о разрешении должно быть включено во все копии или существенные части программного обеспечения.
Программное обеспечение предоставляется «как есть», без гарантии любого рода, явного или подразумеваемого, включая, помимо прочего, гарантии товарной пригодности, пригодности для определенной цели и несоответствия. Ни в коем случае авторы или владельцы авторских прав не будут нести ответственность за любые претензии, убытки или другую ответственность, будь то в действии контракта, деликт или иным образом, возникающие из или в связи с программным обеспечением или использованием или другими сделками в программном обеспечении.
