nest next
1.0.0
Rendu le module pour ajouter la prise en charge de NEXTJS pour NESTJS.
Nest-Next fournit un module NESTJS pour intégrer Next.js dans une application Nest.js, il permet également le rendu des pages NEXT.js via les contrôleurs NESTJS et la fourniture d'accessoires initiaux à la page.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextSi vous utilisez Next.js avec TypeScript, ce qui est probablement le cas, vous devrez également installer les types de typeScript pour React et React-Dom.
Importez la redermodule dans le module racine de votre application et appelez la méthode 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 { }La RenderModule accepte les options de configuration comme le deuxième argument de la méthode Forrootasync.
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} Par défaut, le rendu servira des pages du DIR /pages/views . En raison des limites avec SUIVANT, le répertoire /pages n'est pas configurable, mais le répertoire du répertoire /pages est configurable.
L'option viewsDir détermine le dossier à l'intérieur des pages à rendre. Par défaut, la valeur est /views , mais cela peut être modifié ou défini sur NULL pour rendre à partir de la racine des pages .
Par défaut, le mode Dev sera défini sur true , sauf si l'option est écrasée. Actuellement, le mode Dev détermine comment les erreurs doivent être sérialisées avant d'être envoyées à Next.
9 suivants Ajout de la prise en charge de typeScript Zero-Config intégrée. Cette modification est excellente en général, mais ensuite nécessite des paramètres spécifiques dans le TSConfig qui sont incompatibles avec ce qui est nécessaire pour le serveur. Cependant, ces paramètres peuvent facilement être remplacés dans le fichier tsconfig.server.json .
Si vous rencontrez des problèmes avec des jetons inattendus, les fichiers n'émettent pas lors de la création pour la production, les avertissements sur allowJs et declaration qui ne sont pas utilisés ensemble, et d'autres erreurs liées à la dactylographie; Voir le fichier tsconfig.server.json dans l'exemple de projet pour la configuration complète.
Au lieu de faire en sorte que Nest gère la réponse pour les demandes de 404, ils peuvent être transmis au gestionnaire de demande de Next.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,Voir cette discussion pour plus de contexte.
Le RenderModule remplace le rendu express / stabiliser. Pour rendre une page dans votre contrôleur, importez le décorateur de rendu de @nestjs/common et ajoutez-le à la méthode qui rendra la page. Le chemin de la page est relatif au répertoire /pages .
import { Controller , Get , Render } from '@nestjs/common' ;
@ Controller ( )
export class AppController {
@ Get ( )
@ Render ( 'Index' )
public index ( ) {
// initial props
return {
title : 'Next with Nest' ,
} ;
}
}De plus, la fonction de rendu est mise à disposition sur l'objet Res.
@ Controller ( )
export class AppController {
@ Get ( )
public index ( @ Res ( ) res : RenderableResponse ) {
res . render ( 'Index' , {
title : 'Next with Nest' ,
} ) ;
}
}La fonction de rendu prend la vue, ainsi que les accessoires initiaux transmis à la page.
render = ( view : string , initialProps ?: any ) => any ;Les accessoires initiaux envoyés à la page de vue suivante.
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 ;Par défaut, les erreurs seront gérées et rendues avec le rendu d'erreur de Next, qui utilise la page _error personnalisable. De plus, les erreurs peuvent être interceptées en définissant votre propre gestionnaire d'erreurs.
Un gestionnaire d'erreur personnalisé peut être défini pour remplacer ou améliorer le comportement par défaut. Cela peut être utilisé pour des choses telles que la journalisation de l'erreur ou le rendu d'une réponse différente.
Dans votre gestionnaire d'erreurs personnalisé, vous avez la possibilité d'intercepter et d'inspecter l'erreur ou d'envoyer votre propre réponse. Si une réponse est envoyée à partir du gestionnaire d'erreurs, la demande est considérée et l'erreur ne sera pas transmise au rendu d'erreur de Next. Si une réponse n'est pas envoyée dans le gestionnaire d'erreurs, après le renvoi du gestionnaire, l'erreur est transmise au rendu d'erreur. Voir le flux de demande ci-dessous pour des explications visuelles.
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; Vous pouvez définir le gestionnaire d'erreurs en obtenant le RenderService du conteneur 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 ) ;
} ) ;
...
} L'image est liée à une version plus grande
Les projets entièrement de configuration peuvent être consultés dans le dossier Exemples
Rendu les pages du répertoire des pages. Le code source Nest peut rester dans le dossier par défaut /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
Suivant rend les pages du répertoire des pages dans le sous-projet "UI". Le projet Nest est dans le dossier "Server". Afin de rendre le type de propriétés sécurisé entre les projets "UI" et "Server", il existe un dossier appelé "DTO" en dehors des deux projets. Les modifications pendant "Dev" exécutent la recompilation du déclenchement des deux projets.
/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
Pour exécuter ce projet, le projet "UI" et "Server" doit être construit, dans n'importe quelle commande. Le projet "DTO" sera implicitement construit par le projet "Server". Après ces deux builds, le projet "Server" peut être démarré en mode Dev ou de production.
Il est important que les références "UI" à "DTO" se référent aux fichiers TypeScript (fichiers .ts dans le dossier "SRC"), et non aux fichiers de déclaration (fichiers .d.ts dans le dossier "DIST"), en raison de la façon dont le prochain n'est pas compilé de la même manière que le serveur.
Actuellement, les pages "Catch All Routes" ne fonctionnent pas correctement. Voir le numéro 101 pour plus de détails.
Pour contribuer, assurez-vous que vos modifications passent la suite de tests. Pour exécuter docker Suite Test, docker-compose est nécessaire. Exécutez npm run test pour exécuter les tests. Le dramaturge sera installé avec les packages requis. Pour exécuter des tests dans le mode de développement suivant, exécutez npm run test-dev . Vous pouvez également spécifier les variables NODE_VERSION et principales NEXT_VERSION pour exécuter des tests dans des environnements spécifiques.
Licence MIT
Copyright (C) Kyle McCarthy 2018
L'autorisation est accordée gratuitement à toute personne qui obtient une copie de ce logiciel et des fichiers de documentation associés (le "logiciel"), pour traiter le logiciel sans restriction, y compris sans limiter les droits d'utilisation, de copie, de modification, de fusion, de publication, de distribution, de sublince et / ou de vendre des copies des conditions suivantes.
L'avis de droit d'auteur ci-dessus et le présent avis d'autorisation sont inclus dans toutes les copies ou des parties substantielles du logiciel.
Le logiciel est fourni "tel quel", sans garantie d'aucune sorte, express ou implicite, y compris, mais sans s'y limiter, les garanties de qualité marchande, d'adéquation à un usage particulier et de non-contrefaçon. En aucun cas, les auteurs ou les détenteurs de droits d'auteur ne seront pas responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action de contrat, de délit ou autre, découlant de, hors du logiciel ou de l'utilisation ou d'autres relations dans le logiciel.
