nest next
1.0.0
แสดงโมดูลเพื่อเพิ่ม NextJS Support สำหรับ NestJS
Nest-next จัดเตรียมโมดูล NestJS เพื่อรวม Next.js เข้ากับแอปพลิเคชัน Nest.js จะช่วยให้การแสดงผลของหน้า Next.js ผ่านตัวควบคุม NestJS และให้อุปกรณ์ประกอบฉากเริ่มต้นไปยังหน้าเช่นกัน
yarn add nest-next
# or
npm install nest-nextreactreact-domnextหากคุณใช้ next.js กับ typeScript ซึ่งเป็นไปได้มากที่สุดคือกรณีคุณจะต้องติดตั้งประเภท 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 ยอมรับตัวเลือกการกำหนดค่าเป็นอาร์กิวเมนต์ที่สองในวิธี Forrootasync
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} โดยค่าเริ่มต้นตัวแสดงผลจะให้บริการหน้าจาก /pages/views DIR เนื่องจากข้อ จำกัด ของถัดไปไดเรกทอรี /pages ไม่สามารถกำหนดค่าได้ แต่ไดเรกทอรีภายในไดเรกทอรี /pages สามารถกำหนดค่าได้
ตัวเลือก viewsDir กำหนดโฟลเดอร์ภายใน pages เพื่อแสดงผลจาก โดยค่าเริ่มต้นค่าคือ /views แต่สามารถเปลี่ยนหรือตั้งค่าเป็น null เพื่อแสดงผลจากรูทของ pages
โดยค่าเริ่มต้นโหมด dev จะถูกตั้งค่าเป็น true เว้นแต่ว่าตัวเลือกจะถูกเขียนทับ ขณะนี้โหมด dev กำหนดวิธีการที่จะทำให้เกิดข้อผิดพลาดก่อนที่จะถูกส่งไปยังถัดไป
9 ถัดไปเพิ่มการสนับสนุน typescript แบบศูนย์ในตัว การเปลี่ยนแปลงนี้ยอดเยี่ยมโดยทั่วไป แต่ต่อไปต้องมีการตั้งค่าเฉพาะใน tsconfig ซึ่งไม่สอดคล้องกับสิ่งที่จำเป็นสำหรับเซิร์ฟเวอร์ อย่างไรก็ตามการตั้งค่าเหล่านี้สามารถแทนที่ได้อย่างง่ายดายในไฟล์ tsconfig.server.json
หากคุณมีปัญหาเกี่ยวกับโทเค็นที่ไม่คาดคิดไฟล์ที่ไม่ได้เปล่งออกมาเมื่อสร้างเพื่อการผลิตคำเตือนเกี่ยวกับ allowJs และ declaration ที่ไม่ได้ใช้ร่วมกันและข้อผิดพลาดที่เกี่ยวข้องกับการพิมพ์อื่น ๆ ดูไฟล์ tsconfig.server.json ในโครงการตัวอย่างสำหรับการกำหนดค่าแบบเต็ม
แทนที่จะให้ Nest จัดการกับการตอบสนองสำหรับการร้องขอที่ 404 พวกเขาสามารถส่งต่อไปยังตัวจัดการคำขอของถัดไป
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,ดูการสนทนานี้สำหรับบริบทเพิ่มเติม
RenderModule จะแทนที่การแสดงผลแบบด่วน/เร็ว ในการแสดงหน้าในคอนโทรลเลอร์ของคุณนำเข้า Decorator Render จาก @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 ;อุปกรณ์ประกอบฉากเริ่มต้นที่ส่งไปยังหน้ามุมมองถัดไป 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 ที่ปรับแต่งได้ นอกจากนี้ข้อผิดพลาดสามารถสกัดกั้นได้โดยการตั้งค่าตัวจัดการข้อผิดพลาดของคุณเอง
ตัวจัดการข้อผิดพลาดที่กำหนดเองสามารถตั้งค่าเพื่อแทนที่หรือปรับปรุงพฤติกรรมเริ่มต้น สิ่งนี้สามารถใช้สำหรับสิ่งต่าง ๆ เช่นการบันทึกข้อผิดพลาดหรือแสดงผลการตอบกลับที่แตกต่างกัน
ในตัวจัดการข้อผิดพลาดที่กำหนดเองของคุณคุณมีตัวเลือกในการสกัดกั้นและตรวจสอบข้อผิดพลาดหรือส่งคำตอบของคุณเอง หากการตอบกลับถูกส่งจากตัวจัดการข้อผิดพลาดคำขอจะถูกพิจารณาและข้อผิดพลาดจะไม่ถูกส่งต่อไปยังตัวแสดงผลข้อผิดพลาดของถัดไป หากการตอบกลับไม่ได้ส่งในตัวจัดการข้อผิดพลาดหลังจากตัวจัดการส่งคืนข้อผิดพลาดจะถูกส่งต่อไปยังตัวแสดงผลข้อผิดพลาด ดูโฟลว์คำขอด้านล่างสำหรับคำอธิบายภาพ
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; คุณสามารถตั้งค่าตัวจัดการข้อผิดพลาดได้โดยรับ RendERService จากคอนเทนเนอร์ของ 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 ) ;
} ) ;
...
} ภาพเชื่อมโยงกับเวอร์ชันที่ใหญ่กว่า
สามารถดูโครงการการตั้งค่าได้อย่างสมบูรณ์ในโฟลเดอร์ตัวอย่าง
ต่อไปแสดงหน้าจากไดเรกทอรีหน้า ซอร์สโค้ดรังสามารถอยู่ในโฟลเดอร์เริ่มต้น /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" เรียกใช้ทริกเกอร์การรวมกันของทั้งสองโครงการ
/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" จะถูกสร้างขึ้นโดยโครงการ "เซิร์ฟเวอร์" โดยปริยาย หลังจากสร้างทั้งสองอย่างนี้โครงการ "เซิร์ฟเวอร์" สามารถเริ่มต้นได้ทั้งใน DEV หรือโหมดการผลิต
มันเป็นสิ่งสำคัญที่การอ้างอิง "UI" ถึง "DTO" อ้างถึงไฟล์ typeScript (.ts ไฟล์ในโฟลเดอร์ "SRC") และไม่ใช่ไฟล์ประกาศ (ไฟล์ .D.TS ในโฟลเดอร์ "DIST") เนื่องจากไม่ได้รวบรวมในแบบเดียวกับเซิร์ฟเวอร์
ปัจจุบันหน้า "จับทุกเส้นทาง" ถัดไปทำงานไม่ถูกต้อง ดูปัญหา #101 สำหรับรายละเอียด
เพื่อมีส่วนร่วมตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงของคุณผ่านชุดทดสอบ ในการเรียกใช้ Test Suite docker จำเป็นต้อง docker-compose เรียกใช้ npm run test เพื่อเรียกใช้การทดสอบ นักเขียนบทละครจะติดตั้งพร้อมแพ็คเกจที่จำเป็น ในการเรียกใช้การทดสอบในโหมดการพัฒนาถัดไปเรียกใช้ npm run test-dev นอกจากนี้คุณยังสามารถระบุตัวแปร NODE_VERSION และ Major NEXT_VERSION เพื่อเรียกใช้การทดสอบในสภาพแวดล้อมที่เฉพาะเจาะจง
ใบอนุญาต MIT
ลิขสิทธิ์ (c) 2018- ปัจจุบัน Kyle McCarthy
ได้รับอนุญาตโดยไม่ต้องเสียค่าใช้จ่ายสำหรับบุคคลใด ๆ ที่ได้รับสำเนาซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") เพื่อจัดการในซอฟต์แวร์โดยไม่มีการ จำกัด รวมถึง แต่ไม่ จำกัด เฉพาะสิทธิ์ในการใช้สำเนาดัดแปลงผสานเผยแพร่เผยแพร่
ประกาศลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์มีให้ "ตามสภาพ" โดยไม่มีการรับประกันใด ๆ ไม่ว่าโดยชัดแจ้งหรือโดยนัยรวมถึง แต่ไม่ จำกัด เฉพาะการรับประกันความสามารถในการค้าการออกกำลังกายสำหรับวัตถุประสงค์เฉพาะและการไม่เข้าร่วม ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดชอบต่อการเรียกร้องความเสียหายหรือความรับผิดอื่น ๆ ไม่ว่าจะเป็นการกระทำของสัญญาการละเมิดหรืออื่น ๆ ที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือการติดต่ออื่น ๆ ในซอฟต์แวร์
