nest next
1.0.0
Rendern Modul, um die NEXTJS -Unterstützung für NestJs hinzuzufügen.
Nest-Next bietet ein NestJS-Modul, um Next.js in eine Nest.js-Anwendung zu integrieren. Es ermöglicht das Rendern von Next.js-Seiten über NestJS-Controller und die Bereitstellung von ersten Requisiten auch für die Seite.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextWenn Sie Next.js mit TypeScript verwenden, der höchstwahrscheinlich der Fall ist, müssen Sie auch die Typscript-Typen für React und React-DOM installieren.
Importieren Sie das Rendermodul in das Stammmodul Ihrer Anwendung und rufen Sie die Forrootasync -Methode auf.
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 { }Das RendreModule akzeptiert Konfigurationsoptionen als zweites Argument in der Forrootasync -Methode.
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} Standardmäßig serviert der Renderer Seiten aus dem DIR /pages/views . Aufgrund von Einschränkungen mit dem nächsten ist das Verzeichnis /pages nicht konfigurierbar, das Verzeichnis im Verzeichnis /pages ist jedoch konfigurierbar.
Die Option viewsDir bestimmt den Ordner innerhalb von pages , von denen sie rendern. Standardmäßig ist der Wert /views , dies kann jedoch geändert oder auf Null gesetzt werden, um sie von der Wurzel der pages zu rendern.
Standardmäßig wird der Entwicklermodus auf true eingestellt, es sei denn, die Option ist überschrieben. Derzeit bestimmt der Entwicklermodus, wie die Fehler serialisiert werden sollten, bevor sie als nächstes gesendet werden.
Nächste 9 wurden integrierte Null-Config-Typscript-Unterstützung hinzugefügt. Diese Änderung ist im Allgemeinen großartig, erfordert jedoch als nächstes spezifische Einstellungen in der Tsconfig, die mit dem, was für den Server benötigt wird, unvereinbar sind. Diese Einstellungen können jedoch in der Datei tsconfig.server.json problemlos überschrieben werden.
Wenn Sie Probleme mit unerwarteten Token haben, Dateien beim Erstellen von Produktion, Warnungen über allowJs und declaration die nicht zusammen verwendet werden, und anderen Typenbezogenen Fehlern nicht ausstrahlen. Siehe die Datei tsconfig.server.json im Beispielprojekt für die vollständige Konfiguration.
Anstatt Nest mit der Antwort für Anfragen zu verarbeiten, die 404 sind, können sie an den Anfragehandler von Next weitergeleitet werden.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,Weitere Kontext finden Sie in dieser Diskussion.
Das RenderModule überschreibt das Express/Fastify -Render. Um eine Seite in Ihrem Controller zu rendern, importieren Sie den Render -Dekorator von @nestjs/common und fügen Sie sie der Methode hinzu, die die Seite rendert. Der Pfad für die Seite ist relativ zum Verzeichnis /pages .
import { Controller , Get , Render } from '@nestjs/common' ;
@ Controller ( )
export class AppController {
@ Get ( )
@ Render ( 'Index' )
public index ( ) {
// initial props
return {
title : 'Next with Nest' ,
} ;
}
}Darüber hinaus wird die Renderfunktion im RES -Objekt verfügbar gemacht.
@ Controller ( )
export class AppController {
@ Get ( )
public index ( @ Res ( ) res : RenderableResponse ) {
res . render ( 'Index' , {
title : 'Next with Nest' ,
} ) ;
}
}Die Renderfunktion nimmt die Ansicht sowie die an die Seite übergebenen anfänglichen Requisiten auf.
render = ( view : string , initialProps ?: any ) => any ;Auf die anfänglichen Requisiten, die an die nächste Seite der Ansicht gesendet wurden, können Sie in der GetInitialProps -Methode aus der Abfragemethode des Kontextes zugegriffen werden.
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 ;Standardmäßig werden Fehler behandelt und mit dem Fehler -Renderer von Next verwandt, der die anpassbare Seite _Error verwendet. Zusätzlich können Fehler durch Einstellen Ihres eigenen Fehlerhandlers abgefangen werden.
Ein benutzerdefinierter Fehlerhandler kann so eingestellt werden, dass das Standardverhalten überschrieben oder verbessert wird. Dies kann für Dinge wie die Protokollierung des Fehlers oder die Rendern einer anderen Antwort verwendet werden.
In Ihrem benutzerdefinierten Fehlerhandler haben Sie die Möglichkeit, den Fehler nur abzufangen und zu inspizieren oder Ihre eigene Antwort zu senden. Wenn eine Antwort aus dem Fehlerhandler gesendet wird, wird die Anfrage erhoben und der Fehler wird nicht an den Fehlerrenderer von Next weitergeleitet. Wenn eine Antwort nicht im Fehlerhandler gesendet wird, wird der Fehler nach dem Rücksenden des Handlers an den Fehlerrenderer weitergeleitet. In dem folgenden Anforderungsfluss finden Sie eine visuelle Erklärung.
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; Sie können den Fehlerhandler festlegen, indem Sie den Renderservice aus dem Nestbehälter erhalten.
// 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 ) ;
} ) ;
...
} Das Bild ist mit einer größeren Version verknüpft
Vollständige Projekte können im Beispiel -Ordner angezeigt werden
Als nächstes rendert die Seiten aus dem Seitenverzeichnis. Der Nest -Quellcode kann im Standard- /src -Ordner bleiben
/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
Als nächstes rendert die Seiten aus dem Seitenverzeichnis im Subprojekt "UI". Das Nest -Projekt befindet sich im Ordner "Server". Um den Eigenschaften Typ zwischen den "UI "- und" Server "-Projekten sicher zu machen, gibt es einen Ordner namens" DTO "außerhalb beider Projekte. Änderungen in der IT während "Dev" führen aus, um die Neukompilierung beider Projekte auszulösen.
/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
Um dieses Projekt auszuführen, müssen das Projekt "UI" und "Server" in jeder Reihenfolge erstellt werden. Das "DTO" -Projekt wird implizit vom "Server" -Projekt erstellt. Nach diesen beiden Builds kann das "Server" -Projekt entweder im Dev- oder im Produktionsmodus gestartet werden.
Es ist wichtig, dass "UI" -Reerenzen auf "DTO" auf die TypeScript -Dateien (.ts -Dateien im Ordner "SRC") und nicht auf die Deklarationsdateien (.d.ts -Dateien im "Dist" -Fordner) beziehen, da das nächste Mal nicht auf die gleiche Weise wie der Server kompiliert wird.
Derzeit funktionieren die Seiten "Fangen Sie alle Routen" nicht richtig. Weitere Informationen finden Sie in Ausgabe 101.
Um einen Beitrag zu leisten, stellen Sie sicher, dass Ihre Änderungen die Testsuite bestehen. Um die Testsuite docker auszuführen, sind docker-compose erforderlich. Führen Sie npm run test aus, um Tests auszuführen. Dramatiker werden mit den erforderlichen Paketen installiert. Durch Ausführen von Tests im nächsten Entwicklungsmodus führen Sie npm run test-dev aus. Sie können auch NODE_VERSION und DAU -Variablen NEXT_VERSION angeben, um Tests in bestimmten Umgebungen auszuführen.
MIT -Lizenz
Copyright (c) 2018-Präsentieren Kyle McCarthy
Die Erlaubnis wird hiermit einer Person, die eine Kopie dieser Software und zugehörigen Dokumentationsdateien (der "Software") erhält, kostenlos erteilt, um die Software ohne Einschränkung zu behandeln, einschließlich ohne Einschränkung der Rechte, zu verwenden, zu kopieren, zu modifizieren, zusammenzufassen, zu veröffentlichen, zu veröffentlichen, zu verteilen, zu verteilt, und/oder Kopien der Software zu ermöglichen, um Personen zu beanstanden, an denen die Software zugänglich ist, um die folgenden Bedingungen zu beantragen.
Die oben genannte Copyright -Mitteilung und diese Erlaubnisbekanntmachung müssen in alle Kopien oder wesentlichen Teile der Software enthalten sein.
Die Software wird "wie es ist" ohne Garantie jeglicher Art, ausdrücklich oder stillschweigend bereitgestellt, einschließlich, aber nicht beschränkt auf die Gewährleistung der Handelsfähigkeit, die Eignung für einen bestimmten Zweck und die Nichtverletzung. In keinem Fall sind die Autoren oder Urheberrechtsinhaber für Ansprüche, Schäden oder andere Haftungen haftbar, sei es in einer Vertragsklage, unerbittlich oder auf andere Weise, die sich aus oder im Zusammenhang mit der Software oder anderen Geschäften in der Software ergeben.
