nest next下載 - nest next源代碼下載

nest next

Ai源碼

1.0.0

下載

巢隔離

渲染模塊以添加對Nestjs的NextJ支持。

NEST-NENDEXT提供了一個Nestjs模塊，將Next.js集成到Nest.js應用程序中，它允許通過Nestjs Controllers渲染Next.js頁面，並向頁面提供初始道具。

目錄
安裝
同行依賴
用法
配置
- 視圖/頁面文件夾
- 開發模式
- tsconfig.json
- 通過404
渲染頁
渲染初始道具
處理錯誤
- 自定義錯誤處理程序
  - ErrorHandler Typedef
  - 設置errorhandler
  - 誤差流（圖）
示例文件夾結構
- 基本設置
- monorepo
已知問題
貢獻
執照

安裝

yarn add nest-next

# or

npm install nest-next

同行依賴

react
react-dom
next

如果您將Next.js與TypeScript一起使用，那麼很可能是這種情況，您還需要安裝React和React-Dom的打字稿類型。

用法

將RenderModule導入應用程序的根模塊，然後調用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接受配置選項作為Forrotasync方法中的第二個參數。

 interface RenderOptions {
  viewsDir : null | string ;
  dev : boolean ;
}

視圖/頁面文件夾

默認情況下，渲染器將從/pages/views dir提供頁面。由於下一步的限制， /pages目錄是不可配置的，但是/pages目錄中的目錄是可配置的。

viewsDir選項確定pages內部的文件夾要從中呈現。默認情況下，值為/views ，但可以將其更改或設置為從pages的根部渲染。

開發模式

默認情況下，除非選項被覆蓋，否則開發模式將設置為true 。當前，開發模式確定在發送到下一個之前應如何序列化錯誤。

tsconfig.json

下一個9添加了內置的零孔子打字稿支持。通常，此更改通常很棒，但是接下來需要TSCONFIG中的特定設置，這些設置與服務器所需的內容不相容。但是，可以在tsconfig.server.json文件中輕鬆覆蓋這些設置。

如果您存在意外令牌的問題，則在構建生產時不會發出文件，有關allowJs和declaration沒有一起使用的警告以及其他與打字稿相關的錯誤；請參閱完整配置的示例項目中的tsconfig.server.json文件。

通過404

可以將它們轉發到Next的請求處理程序中，而不是讓NEST處理響應。

 RenderModule . forRootAsync (
  Next ( {
    dev : process . env . NODE_ENV !== 'production' ,
    dir : resolve ( __dirname , '..' ) ,
  } ) ,
  { passthrough404 : true , viewsDir : null } ,
) ,

有關更多背景，請參見此討論。

渲染頁

RenderModule覆蓋了快速/快速渲染。要在控制器中渲染一個頁面，請從@nestjs/common導入渲染裝飾器，並將其添加到將渲染頁面的方法中。頁面的路徑相對於/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 ;

渲染初始道具

可以從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 ;

處理錯誤

默認情況下，將使用Next的錯誤渲染器來處理和渲染錯誤，該錯誤渲染器使用可自定義的_ERROR頁面。此外，可以通過設置自己的錯誤處理程序來攔截錯誤。

自定義錯誤處理程序

可以將自定義錯誤處理程序設置為覆蓋或增強默認行為。這可以用於記錄錯誤或呈現不同響應之類的內容。

在您的自定義錯誤處理程序中，您可以選擇僅攔截和檢查錯誤或發送自己的響應。如果從錯誤處理程序發送響應，則考慮完成請求，並且錯誤不會轉發到Next的錯誤渲染器。如果未在錯誤處理程序中發送響應，則處理程序返回錯誤後，將錯誤轉發到錯誤渲染器。有關視覺說明，請參見下面的請求流。

ErrorHandler Typedef

 export type ErrorHandler = (
  err : any ,
  req : any ,
  res : any ,
  pathname : any ,
  query : ParsedUrlQuery ,
) => Promise < any > ;

設置errorhandler

您可以通過從Nest的容器中獲取RenderService來設置錯誤處理程序。

 // 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

monorepo

接下來，從“ UI”子標記中的頁面目錄中渲染頁面。 NEST項目在“服務器”文件夾中。為了使“ UI”和“ Server”項目之間的屬性類型安全，在兩個項目之外都有一個稱為“ DTO”的文件夾。在“開發”期間，它的變化觸發了兩個項目的觸發重新編譯。

 /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”和“服務器”項目。 “ DTO”項目將由“服務器”項目隱式構建。這兩個構建後，“服務器”項目可以以開發或生產模式啟動。

重要的是，“ ui”引用“ dto”參考typeScript文件（“ src”文件夾中的.ts文件），而不是聲明文件（“ dist”文件夾中的.d.t.ts文件），這一點很重要，這是由於如何以與服務器相同的方式編譯的。

已知問題

目前，接下來的“捕獲所有路線”頁面無法正常工作。有關詳細信息，請參見第101期。

貢獻

為了確保您的更改通過測試套件。要運行測試套件docker ，需要進行docker-compose 。運行npm run test以運行測試。劇作家將安裝帶有必需的軟件包。要在下一個開發模式下運行測試運行npm run test-dev 。您還可以指定NODE_VERSION和Major NEXT_VERSION變量以在特定環境中運行測試。