nest next

巣ネクスト

NESTJSのNextJSサポートを追加するモジュールをレンダリングします。

Nest-NextはNESTJSモジュールを提供して、NEXT.JSをNEST.JSアプリケーションに統合し、NESTJSコントローラーを介してnext.jsページのレンダリングを可能にし、ページにも初期の小道具を提供できます。

目次

• 目次
• インストール
• ピア依存関係
• 使用法
• 構成
  • ビュー/ページフォルダー
  • 開発モード
  • tsconfig.json
  • パススルー404
• レンダリングページ
• 最初の小道具をレンダリングします
• 取り扱いエラー
  • カスタムエラーハンドラー
    • ErrorHandler Typedef
    • エラーハンドラーの設定
    • エラーフロー（図）
• 例フォルダー構造
  • 基本セットアップ
  • モノレポ
• 既知の問題
• 貢献
• ライセンス

インストール

yarn add nest-next

# or

npm install nest-next

ピア依存関係

• react
• react-dom
• next

おそらくそうである可能性が高いTypeScriptを使用してnext.jsを使用している場合、ReactおよびReact-DomのTypeScriptタイプをインストールする必要があります。

使用法

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は、forrootasyncメソッドの2番目の引数として構成オプションを受け入れます。

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

ビュー/ページフォルダー

デフォルトでは、レンダラーは/pages/views監督のページを提供します。次の制限により、 /pagesディレクトリは構成できませんが、 /pagesディレクトリ内のディレクトリは設定可能です。

viewsDirオプションは、 pages内のフォルダーを決定してレンダリングします。デフォルトでは値は/viewsですが、これはpagesのルートからレンダリングするために変更またはnullに設定できます。

開発モード

デフォルトでは、オプションが上書きされない限り、DEVモードはtrueに設定されます。現在、開発モードは、次に送信される前にエラーをシリアル化する方法を決定します。

tsconfig.json

次の9は、組み込みZero-Config TypeScriptサポートを追加しました。この変更は一般的に優れていますが、次に、サーバーに必要なものと互換性のないTSCONFIGの特定の設定が必要です。ただし、これらの設定は、 tsconfig.server.jsonファイルで簡単にオーバーライドできます。

予期しないトークン、生産のために構築するときに放出されないファイル、 allowJsとdeclaration一緒に使用されていないことに関する警告、およびその他のタイプスクリプト関連エラーの問題が発生している場合。完全な構成については、Exampleプロジェクトのtsconfig.server.jsonファイルを参照してください。

パススルー404

Nestが404のリクエストの応答を処理させる代わりに、次のリクエストハンドラーに転送することができます。

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

より多くのコンテキストについては、この議論を参照してください。

レンダリングページ

RenderModule 、Express/Fustifyレンダリングをオーバーライドします。コントローラー内のページをレンダリングするには@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 ;

最初の小道具をレンダリングします

next.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のエラーレンダラーでエラーが処理され、レンダリングされます。さらに、独自のエラーハンドラーを設定することにより、エラーを傍受できます。

カスタムエラーハンドラー

カスタムエラーハンドラーは、デフォルトの動作をオーバーライドまたは強化するように設定できます。これは、エラーのログや異なる応答のレンダリングなどに使用できます。

カスタムエラーハンドラーには、エラーを傍受して検査するか、独自の応答を送信するオプションがあります。エラーハンドラーから応答が送信された場合、リクエストは完了し、エラーは次のエラーレンダラーに転送されません。エラーハンドラーに応答が送信されない場合、ハンドラーが返された後、エラーはエラーレンダラーに転送されます。視覚的な説明については、以下のリクエストフローを参照してください。

ErrorHandler Typedef

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

エラーハンドラーの設定

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

モノレポ

次に、「UI」サブプロジェクトのページディレクトリからページをレンダリングします。 Nestプロジェクトは「サーバー」フォルダーにあります。 「UI」プロジェクトと「サーバー」プロジェクトの間でプロパティのタイプを安全にするために、両方のプロジェクトの外に「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」および「サーバー」プロジェクトを任意の順序で構築する必要があります。 「DTO」プロジェクトは、「サーバー」プロジェクトによって暗黙的に構築されます。これらの両方のビルドの後、「サーバー」プロジェクトは開発モードまたは生産モードのいずれかで開始できます。

「dto」への「ui」参照は、宣言ファイル（「dist」フォルダー内の.d.tsファイル）ではなく、タイプスクリプトファイル（「src」フォルダーの.tsファイル）を参照することが重要です。

既知の問題

現在、次の「すべてのルートをキャッチ」ページが正しく機能しません。詳細については、問題＃101を参照してください。

貢献

貢献するために、変更がテストスイートに合格していることを確認してください。テストスイートdocker実行するには、 docker-compose必要です。 npm run testを実行してテストを実行します。 Playwrightは、必要なパッケージでインストールされます。次の開発モードでテストを実行するにはnpm run test-devを実行します。また、特定の環境でテストを実行するために、 NODE_VERSIONとmajor NEXT_VERSION変数を指定することもできます。

ライセンス

MITライセンス

Copyright（c）2018-Present Kyle McCarthy

このソフトウェアと関連するドキュメントファイル（「ソフトウェア」）のコピーを入手して、制限なしにソフトウェアを扱うために、このソフトウェアを制限する権利を含め、ソフトウェアのコピーをコピー、変更、公開、配布、販売する、ソフトウェアのコピーを許可する人を許可する人を許可することを含めて、許可が無料で許可されます。

上記の著作権通知とこの許可通知は、ソフトウェアのすべてのコピーまたはかなりの部分に含まれるものとします。

このソフトウェアは、商品性、特定の目的への適合性、および非侵害の保証を含むがこれらに限定されない、明示的または黙示的なものを保証することなく、「現状のまま」提供されます。いかなる場合でも、著者または著作権所有者は、契約、不法行為、またはその他の訴訟、ソフトウェアまたはソフトウェアの使用またはその他の取引に関連する、またはその他の契約、またはその他の請求、またはその他の責任について責任を負いません。