nest next
1.0.0
NEXTJS에 대한 NEXTJS 지원을 추가하도록 모듈 렌더링 모듈.
Nest-Next는 NestJS 모듈을 Next.js를 Nest.js 응용 프로그램에 통합 할 수있는 NestJS 컨트롤러를 통해 Next.js 페이지를 렌더링하고 페이지에 초기 소품을 제공 할 수 있습니다.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextTypeScript와 함께 Next.js를 사용하는 경우 대부분의 경우 REACT 및 React-DOM 용 TypeScript 유형을 설치해야합니다.
응용 프로그램의 루트 모듈로 렌더 테어 모드를 가져 와서 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 이지만 pages 의 루트에서 렌더링하기 위해 변경하거나 NULL로 설정할 수 있습니다.
기본적으로 옵션을 덮어 쓰지 않으면 DEV 모드가 true 로 설정됩니다. 현재 DEV 모드는 다음으로 보내기 전에 오류를 직렬화하는 방법을 결정합니다.
다음 9 개의 내장 제로 콘피드 타입 스크립트 지원이 추가되었습니다. 이 변경 사항은 일반적으로 훌륭하지만 다음은 서버에 필요한 것과 호환되지 않는 TSConfig의 특정 설정이 필요합니다. 그러나 이러한 설정은 tsconfig.server.json 파일에서 쉽게 재정의 할 수 있습니다.
예상치 못한 토큰에 문제가있는 경우, 생산을 위해 구축 할 때 파일이 방출되지 않는 파일, 함께 사용되지 않는 allowJs 및 declaration 에 대한 경고 및 기타 TypeScript 관련 오류; 전체 구성에 대한 예제 프로젝트에서 tsconfig.server.json 파일을 참조하십시오.
Nest가 404 요청에 대한 응답을 처리하는 대신 Next의 요청 처리기로 전달할 수 있습니다.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,더 많은 맥락에 대해서는이 토론을 참조하십시오.
RenderModule 은 Express/Fastify 렌더를 무시합니다. 컨트롤러의 페이지를 렌더링하려면 @nestjs/common 에서 Render Decorator를 가져 와서 페이지를 렌더링하는 메소드에 추가하십시오. 페이지의 경로는 /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 ;다음.js 뷰 페이지로 전송 된 초기 소품은 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 ;기본적으로 사용자 정의 가능한 _error 페이지를 사용하는 Next의 오류 렌더러로 오류가 처리되고 렌더링됩니다. 또한 고유 한 오류 핸들러를 설정하여 오류를 가로 채울 수 있습니다.
사용자 정의 오류 핸들러는 기본 동작을 재정의하거나 향상 시키도록 설정할 수 있습니다. 오류를 기록하거나 다른 응답을 렌더링하는 데 사용될 수 있습니다.
사용자 정의 오류 핸들러에서 오류를 가로 채고 검사하거나 자신의 응답을 보낼 수있는 옵션이 있습니다. 오류 핸들러에서 응답이 전송되면 요청이 완료되고 오류가 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 ) ;
} ) ;
...
} 이미지는 더 큰 버전에 연결되어 있습니다
완전 설정 프로젝트는 예제 폴더에서 볼 수 있습니다.
다음으로 페이지 디렉토리에서 페이지를 렌더링합니다. Nest 소스 코드는 기본 /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 프로젝트는 "서버"폴더에 있습니다. "UI"와 "Server"프로젝트 사이에 속성 유형을 안전하게 만들려면 두 프로젝트 외부에 "DTO"라는 폴더가 있습니다. "DEV"중에 IT의 변경 사항은 두 프로젝트의 트리거 재 컴파일을 실행합니다.
/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
이 프로젝트를 실행하려면 "UI"및 "Server"프로젝트를 순서대로 구축해야합니다. "DTO"프로젝트는 "서버"프로젝트에 의해 암시 적으로 구축 될 것입니다. 이 두 빌드 후에 "서버"프로젝트는 DEV 또는 생산 모드에서 시작할 수 있습니다.
"DTO"에 대한 "UI"참조는 다음에 서버와 동일한 방식으로 컴파일되지 않는 방법으로 인해 "SRC"폴더의 .ts 파일 ( "SRC"폴더의 .ts 파일)을 참조하는 것이 중요합니다.
현재 다음으로 "모든 경로를 잡는"페이지는 올바르게 작동하지 않습니다. 자세한 내용은 문제 #101을 참조하십시오.
기여하려면 변경 사항이 테스트 스위트를 통과해야합니다. Test Suite docker 실행하려면 docker-compose 필요합니다. npm run test 실행하여 테스트를 실행하십시오. 극작가는 필수 패키지로 설치됩니다. 다음 개발 모드에서 테스트를 실행하려면 npm run test-dev 실행합니다. 특정 환경에서 테스트를 실행하기 위해 NODE_VERSION 및 Major NEXT_VERSION 변수를 지정할 수도 있습니다.
MIT 라이센스
저작권 (C) 2018- 제시된 Kyle McCarthy
이에 따라이 소프트웨어 및 관련 문서 파일 ( "소프트웨어")의 사본을 얻는 사람에게는 허가가 부여됩니다. 소프트웨어의 사용, 복사, 수정, 합병, 배포, 배포, 숭고 및/또는 소프트웨어의 사본을 판매 할 권한을 포함하여 제한없이 소프트웨어를 처리 할 수 있도록 소프트웨어를 제공 할 권한이 없습니다.
위의 저작권 통지 및이 권한 통지는 소프트웨어의 모든 사본 또는 실질적인 부분에 포함되어야합니다.
이 소프트웨어는 상업성, 특정 목적에 대한 적합성 및 비 침해에 대한 보증을 포함하여 명시 적 또는 묵시적 보증없이 "그대로"제공됩니다. 어떠한 경우에도 저자 또는 저작권 보유자는 계약, 불법 행위 또는 기타, 소프트웨어 또는 소프트웨어의 사용 또는 기타 거래에서 발생하는 계약, 불법 행위 또는 기타의 행동에 관계없이 청구, 손해 또는 기타 책임에 대해 책임을지지 않습니다.
