nest next
1.0.0
Renderize o módulo para adicionar suporte NextJS para Nestjs.
O Nest-Next fornece um módulo NestJS para integrar o próximo.js em um aplicativo Nest.js, permite a renderização das páginas do próximo.js por meio de controladores Nestjs e fornecendo adereços iniciais para a página também.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextSe você estiver usando o Next.js com o TypeScript, que provavelmente é o caso, você também precisará instalar os tipos de texto do TypeScript para reagir e reagir-dom.
Importe o rendermodule para o módulo raiz do seu aplicativo e chame o 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 { }O rendermodule aceita opções de configuração como o segundo argumento no método forrootasync.
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} Por padrão, o renderizador servirá páginas da /pages/views Dir. Devido a limitações com o próximo, o diretório /pages não é configurável, mas o diretório dentro do diretório /pages é configurável.
A opção viewsDir determina a pasta dentro das pages para renderizar. Por padrão, o valor é /views , mas isso pode ser alterado ou definido como nulo para renderizar da raiz das pages .
Por padrão, o modo dev será definido como true a menos que a opção seja substituída. Atualmente, o modo DEV determina como os erros devem ser serializados antes de serem enviados para a próxima.
O próximo 9 adicionou suporte de tipas-descrito de Config Zero. Essa alteração é ótima em geral, mas a próxima requer configurações específicas no tsconfig que são incompatíveis com o que é necessário para o servidor. No entanto, essas configurações podem ser facilmente substituídas no arquivo tsconfig.server.json .
Se você estiver tendo problemas com tokens inesperados, os arquivos não emitem ao criar para produção, avisos sobre allowJs e declaration não estão sendo usados em conjunto e outros erros relacionados ao TypeScript; Consulte o arquivo tsconfig.server.json no projeto de exemplo para a configuração completa.
Em vez de fazer com que o Nest lide com a resposta para solicitações que 404, eles podem ser encaminhados para o manipulador de solicitação do próximo.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,Veja esta discussão para obter mais contexto.
O RenderModule substitui a renderização Express/Fastify. Para renderizar uma página no seu controlador, importe o decorador de renderização de @nestjs/common e adicione -o ao método que renderizará a página. O caminho para a página é relativo ao diretório /pages .
import { Controller , Get , Render } from '@nestjs/common' ;
@ Controller ( )
export class AppController {
@ Get ( )
@ Render ( 'Index' )
public index ( ) {
// initial props
return {
title : 'Next with Nest' ,
} ;
}
}Além disso, a função de renderização é disponibilizada no objeto Res.
@ Controller ( )
export class AppController {
@ Get ( )
public index ( @ Res ( ) res : RenderableResponse ) {
res . render ( 'Index' , {
title : 'Next with Nest' ,
} ) ;
}
}A função de renderização absorve a visualização, bem como os adereços iniciais passados para a página.
render = ( view : string , initialProps ?: any ) => any ;Os adereços iniciais enviados para a página de visualização Next.js podem ser acessados a partir do método de consulta do contexto dentro do 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 padrão, os erros serão tratados e renderizados com o renderizador de erros do Next, que usa a página de _error personalizável. Além disso, os erros podem ser interceptados definindo seu próprio manipulador de erros.
Um manipulador de erros personalizado pode ser definido para substituir ou aprimorar o comportamento padrão. Isso pode ser usado para coisas como registrar o erro ou fazer uma resposta diferente.
No seu manipulador de erros personalizado, você tem a opção de apenas interceptar e inspecionar o erro ou enviar sua própria resposta. Se uma resposta for enviada do manipulador de erros, a solicitação será realizada e o erro não será encaminhado para o renderizador de erros do próximo. Se uma resposta não for enviada no manipulador de erros, depois que o manipulador retornar, o erro será encaminhado para o renderizador de erros. Veja o fluxo de solicitação abaixo para explicar a explicação visual.
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; Você pode definir o manipulador de erros, obtendo o renderService do contêiner do 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 ) ;
} ) ;
...
} A imagem está ligada a uma versão maior
Projetos totalmente configurados podem ser visualizados na pasta Exemplos
Em seguida, renderiza as páginas do diretório de páginas. O código -fonte do ninho pode permanecer na pasta padrão /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
Em seguida, renderiza as páginas do diretório de páginas no subprojeto "UI". O projeto Nest está na pasta "servidor". Para tornar o tipo de propriedades segura entre os projetos "UI" e "servidor", há uma pasta chamada "DTO" fora dos dois projetos. As mudanças nele durante o "Dev" executam a recompilação de ambos os projetos.
/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 executar este projeto, o projeto "UI" e "servidor" deve ser construído, em qualquer ordem. O projeto "DTO" será implicitamente construído pelo projeto "servidor". Após essas duas compilações, o projeto "servidor" pode ser iniciado no modo de dev ou produção.
É importante que as referências "da interface do usuário" a "DTO" se refiram aos arquivos da tipscript (arquivos .ts na pasta "src"), e não nos arquivos de declaração (.d.ts arquivos na pasta "dist"), devido à maneira como não está sendo compilado da mesma maneira que o servidor.
Atualmente, as páginas de "Catch todas as rotas" não funcionam corretamente. Veja a edição nº 101 para obter detalhes.
Para contribuir, verifique se suas alterações passam no conjunto de testes. Para executar docker de suíte de teste, são necessários docker-compose . Execute npm run test para executar testes. O dramaturgo será instalado com os pacotes necessários. Para executar testes no próximo modo de desenvolvimento, execute npm run test-dev . Você também pode especificar as variáveis NODE_VERSION e Main NEXT_VERSION para executar testes em ambientes específicos.
MIT Licença
Copyright (c) 2018-presente Kyle McCarthy
A permissão é concedida, gratuita, a qualquer pessoa que obtenha uma cópia deste software e arquivos de documentação associados (o "software"), para lidar com o software sem restrição, inclusive sem limitação os direitos de usar, copiar, modificar, mesclar, publicar, distribuir, mobilizar o software e/ou vender cópias do software e permitir que as pessoas a quem
O aviso de direitos autorais acima e este aviso de permissão devem ser incluídos em todas as cópias ou em partes substanciais do software.
O software é fornecido "como está", sem garantia de qualquer tipo, expresso ou implícito, incluindo, entre outros, as garantias de comercialização, aptidão para uma finalidade específica e não innoculação. Em nenhum caso os autores ou detentores de direitos autorais serão responsáveis por qualquer reclamação, danos ou outro passivo, seja em uma ação de contrato, delito ou não, decorrente de, fora ou em conexão com o software ou o uso ou outras negociações no software.
