nest next
1.0.0
Renderiza el módulo para agregar el soporte NextJS para NESTJS.
Nest-Next proporciona un módulo NESTJS para integrar Next.js en una aplicación Nest.js, permite la representación de las páginas Next.js a través de los controladores Nestjs y también proporciona accesorios iniciales a la página.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextSi está utilizando Next.js con TypeScript, que probablemente sea el caso, también deberá instalar los tipos de TypeScript para React y React-Dom.
Importe el Rendermodule al módulo raíz de su aplicación y llame al método 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 acepta las opciones de configuración como el segundo argumento en el método Forrootasync.
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} Por defecto, el renderizador servirá páginas de /pages/views dir. Debido a las limitaciones con Siguiente, el directorio /pages no es configurable, pero el directorio dentro del directorio /pages es configurable.
La opción viewsDir determina la carpeta dentro de pages para renderizar. Por defecto, el valor es /views pero esto se puede cambiar o establecerse en NULL para renderizar desde la raíz de pages .
Por defecto, el modo DEV se establecerá en true a menos que la opción esté sobrescribida. Actualmente, el modo DEV determina cómo se deben serializar los errores antes de enviarse al siguiente.
Siguiente 9 Se agregaron soporte de mecanografiar cero config incorporado. Este cambio es excelente en general, pero a continuación requiere configuraciones específicas en el TSCONFIG que son incompatibles con lo que se necesita para el servidor. Sin embargo, estas configuraciones se pueden anular fácilmente en el archivo tsconfig.server.json .
Si tiene problemas con tokens inesperados, archivos que no emiten cuando se construyen para la producción, advertencias sobre allowJs y declaration que no se usan juntos y otros errores relacionados con TypeScript; Consulte el archivo tsconfig.server.json en el proyecto de ejemplo para la configuración completa.
En lugar de hacer que Nest maneje la respuesta para las solicitudes de 404, se pueden reenviar al controlador de solicitudes del próximo.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,Vea esta discusión para más contexto.
El RenderModule anula el render de express/fastify. Para representar una página en su controlador, importe el decorador de renderizado de @nestjs/common y agregue al método que represente la página. La ruta para la página es relativa al directorio /pages .
import { Controller , Get , Render } from '@nestjs/common' ;
@ Controller ( )
export class AppController {
@ Get ( )
@ Render ( 'Index' )
public index ( ) {
// initial props
return {
title : 'Next with Nest' ,
} ;
}
}Además, la función de renderizado está disponible en el objeto RES.
@ Controller ( )
export class AppController {
@ Get ( )
public index ( @ Res ( ) res : RenderableResponse ) {
res . render ( 'Index' , {
title : 'Next with Nest' ,
} ) ;
}
}La función de renderizado toma en la vista, así como los accesorios iniciales pasados a la página.
render = ( view : string , initialProps ?: any ) => any ;Se puede acceder a los accesorios iniciales enviados a la página de vista Next.js desde el método de consulta del contexto dentro del método GetInitialProps.
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 ;Por defecto, los errores se manejarán y se representarán con el renderizador de error de Next, que utiliza la página personalizable _Error. Además, los errores se pueden interceptar configurando su propio controlador de errores.
Se puede configurar un controlador de errores personalizado para anular o mejorar el comportamiento predeterminado. Esto se puede usar para cosas como registrar el error o hacer una respuesta diferente.
En su controlador de errores personalizado, tiene la opción de interceptar e inspeccionar el error, o enviar su propia respuesta. Si se envía una respuesta desde el controlador de errores, la solicitud se considera realizada y el error no se reenviará al renderizador de errores de Next. Si no se envía una respuesta en el controlador de errores, después de que el controlador devuelve el error se reenvía al renderizador de errores. Consulte el flujo de solicitud a continuación para obtener una explicación visual.
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; Puede establecer el controlador de errores obteniendo el servicio RenderService del contenedor de 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 ) ;
} ) ;
...
} La imagen está vinculada a una versión más grande
Los proyectos de configuración totalmente se pueden ver en la carpeta de ejemplos
A continuación, presenta páginas del directorio de páginas. El código fuente del nido puede permanecer en la carpeta predeterminada /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
A continuación, presenta páginas del directorio de páginas en el subproyecto "UI". El proyecto Nest está en la carpeta "servidor". Para hacer que el tipo de propiedades sea seguro entre los proyectos "UI" y "servidor", hay una carpeta llamada "DTO" fuera de ambos proyectos. Los cambios en él durante el "desarrollo" ejecutan la recompilación desencadenante de ambos proyectos.
/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
Para ejecutar este proyecto, el proyecto "UI" y "servidor" debe construirse, en cualquier orden. El proyecto "DTO" será creado implícitamente por el proyecto "Servidor". Después de ambas compilaciones, el proyecto "servidor" se puede iniciar en modo de desarrollo o de producción.
Es importante que las referencias "UI" a "DTO" se refieran a los archivos TypeScript (archivos .ts en la carpeta "SRC"), y no a los archivos de declaración (archivos .d.ts en la carpeta "DIST"), debido a cómo no se compila de la misma manera que el servidor.
Actualmente, las próximas páginas de "capturar todas las rutas" no funcionan correctamente. Consulte el número 101 para más detalles.
Para contribuir, asegúrese de que sus cambios pasen la suite de prueba. Para ejecutar Test Suite docker , se requiere docker-compose . Ejecute npm run test para ejecutar pruebas. El dramaturgo se instalará con los paquetes requeridos. Para ejecutar las pruebas en el siguiente modo de desarrollo, ejecute npm run test-dev . También puede especificar las variables NODE_VERSION y las principales variables NEXT_VERSION para ejecutar pruebas en entornos específicos.
Licencia de MIT
Copyright (c) 2018-presente Kyle McCarthy
El permiso se otorga, de forma gratuita, a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el "software"), para tratar en el software sin restricción, incluidos los derechos de los derechos de usar, copiar, modificar, fusionar, publicar, distribuir, sublicense y/o vender copias del software, y para permitir que las personas a quienes se les proporciona el software para hacer, sujeto a las siguientes condiciones: las siguientes condiciones: las siguientes condiciones: las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o porciones sustanciales del software.
El software se proporciona "tal cual", sin garantía de ningún tipo, expresa o implícita, incluidas, entre otros, las garantías de comerciabilidad, idoneidad para un propósito particular y no infracción. En ningún caso los autores o titulares de derechos de autor serán responsables de cualquier reclamo, daños u otra responsabilidad, ya sea en una acción de contrato, agravio o de otra manera, que surge, de o en relación con el software o el uso u otros tratos en el software.
