nest next
1.0.0
Modul Render untuk menambahkan dukungan NextJS untuk NestJS.
Nest-Next menyediakan modul NestJS untuk mengintegrasikan Next.js ke dalam aplikasi Nest.js, memungkinkan rendering halaman Next.js melalui pengontrol NestJS dan menyediakan alat peraga awal ke halaman juga.
yarn add nest-next
# or
npm install nest-nextreactreact-domnextJika Anda menggunakan Next.js dengan TypeScript yang kemungkinan besar terjadi, Anda juga harus menginstal tipe TypeScript untuk React dan React-Dom.
Impor rendermodule ke modul root aplikasi Anda dan hubungi metode 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 menerima opsi konfigurasi sebagai argumen kedua dalam metode forrootasync.
interface RenderOptions {
viewsDir : null | string ;
dev : boolean ;
} Secara default, renderer akan melayani halaman dari /pages/views dir. Karena keterbatasan dengan berikutnya, direktori /pages tidak dapat dikonfigurasi, tetapi direktori dalam direktori /pages dapat dikonfigurasi.
Opsi viewsDir menentukan folder di dalam pages untuk diberikan dari. Secara default nilainya /views tetapi ini dapat diubah atau diatur ke nol untuk merender dari akar pages .
Secara default mode dev akan diatur ke true kecuali opsi ditimpa. Saat ini mode DEV menentukan bagaimana kesalahan harus diserialisasi sebelum dikirim ke Next.
Next 9 ditambahkan dukungan nol-konfigurasi nol-config. Perubahan ini sangat bagus secara umum, tetapi selanjutnya membutuhkan pengaturan spesifik di Tsconfig yang tidak kompatibel dengan apa yang dibutuhkan untuk server. Namun, pengaturan ini dapat dengan mudah ditimpa dalam file tsconfig.server.json .
Jika Anda mengalami masalah dengan token yang tidak terduga, file yang tidak memancarkan saat membangun untuk produksi, peringatan tentang allowJs dan declaration yang tidak digunakan bersama, dan kesalahan terkait naskah lainnya; Lihat file tsconfig.server.json dalam proyek contoh untuk konfigurasi penuh.
Alih -alih memiliki sarang menangani respons atas permintaan 404, mereka dapat diteruskan ke penangan permintaan berikutnya.
RenderModule . forRootAsync (
Next ( {
dev : process . env . NODE_ENV !== 'production' ,
dir : resolve ( __dirname , '..' ) ,
} ) ,
{ passthrough404 : true , viewsDir : null } ,
) ,Lihat diskusi ini untuk konteks lebih lanjut.
RenderModule mengesampingkan render ekspres/pengisian ulang. Untuk membuat halaman di pengontrol Anda mengimpor dekorator render dari @nestjs/common dan menambahkannya ke metode yang akan membuat halaman. Jalur untuk halaman ini relatif terhadap direktori /pages .
import { Controller , Get , Render } from '@nestjs/common' ;
@ Controller ( )
export class AppController {
@ Get ( )
@ Render ( 'Index' )
public index ( ) {
// initial props
return {
title : 'Next with Nest' ,
} ;
}
}Selain itu, fungsi render tersedia pada objek RES.
@ Controller ( )
export class AppController {
@ Get ( )
public index ( @ Res ( ) res : RenderableResponse ) {
res . render ( 'Index' , {
title : 'Next with Nest' ,
} ) ;
}
}Fungsi render mengambil tampilan, serta alat peraga awal yang diteruskan ke halaman.
render = ( view : string , initialProps ?: any ) => any ;Alat peraga awal yang dikirim ke halaman tampilan Next.js dapat diakses dari metode kueri konteks di dalam metode 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 ;Secara default, kesalahan akan ditangani dan diterjemahkan dengan renderer kesalahan berikutnya, yang menggunakan halaman _error yang dapat disesuaikan. Selain itu, kesalahan dapat dicegat dengan mengatur penangan kesalahan Anda sendiri.
Penangan kesalahan khusus dapat diatur untuk mengganti atau meningkatkan perilaku default. Ini dapat digunakan untuk hal -hal seperti mencatat kesalahan atau memberikan respons yang berbeda.
Di pawang kesalahan khusus Anda, Anda memiliki opsi untuk hanya mencegat dan memeriksa kesalahan, atau mengirim tanggapan Anda sendiri. Jika respons dikirim dari penangan kesalahan, permintaan dianggap dilakukan dan kesalahan tidak akan diteruskan ke renderer kesalahan berikutnya. Jika respons tidak dikirim dalam penangan kesalahan, setelah pawang mengembalikan kesalahan diteruskan ke renderer kesalahan. Lihat aliran permintaan di bawah ini untuk penjelasan visual.
export type ErrorHandler = (
err : any ,
req : any ,
res : any ,
pathname : any ,
query : ParsedUrlQuery ,
) => Promise < any > ; Anda dapat mengatur penangan kesalahan dengan mendapatkan RenderService dari wadah 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 ) ;
} ) ;
...
} Gambar tersebut ditautkan ke versi yang lebih besar
Proyek pengaturan sepenuhnya dapat dilihat di folder contoh
Selanjutnya membuat halaman dari direktori halaman. Kode sumber sarang dapat tetap di folder default /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
Berikutnya membuat halaman dari direktori halaman di subproyject "UI". Proyek Nest ada di folder "Server". Untuk membuat tipe properti aman antara proyek "UI" dan "Server", ada folder yang disebut "DTO" di luar kedua proyek. Perubahan di dalamnya selama "dev" menjalankan kompilasi ulang pemicu kedua proyek.
/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
Untuk menjalankan proyek ini, proyek "UI" dan "Server" harus dibangun, dalam urutan apa pun. Proyek "DTO" akan secara implisit dibangun oleh proyek "Server". Setelah kedua bangunan itu, proyek "Server" dapat dimulai dalam mode dev atau produksi.
Penting bahwa referensi "UI" ke "DTO" merujuk ke file TypeScript (.ts file di folder "SRC"), dan bukan file deklarasi (.d.ts file di folder "Dist"), karena bagaimana berikutnya tidak dikompilasi dengan cara yang sama dengan server.
Saat ini halaman "Tangkap Semua Rute" berikutnya tidak berfungsi dengan benar. Lihat masalah #101 untuk detailnya.
Untuk berkontribusi, pastikan perubahan Anda lulus test suite. Untuk menjalankan test suite docker , diperlukan docker-compose . Jalankan npm run test untuk menjalankan tes. Playwright akan diinstal dengan paket yang diperlukan. Untuk menjalankan tes dalam mode pengembangan selanjutnya, jalankan npm run test-dev . Anda juga dapat menentukan NODE_VERSION dan variabel mayor NEXT_VERSION untuk menjalankan tes di lingkungan tertentu.
Lisensi MIT
Hak Cipta (C) 2018-sekarang Kyle McCarthy
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus dimasukkan dalam semua salinan atau bagian substansial dari perangkat lunak.
Perangkat lunak ini disediakan "sebagaimana adanya", tanpa jaminan apa pun, tersurat maupun tersirat, termasuk tetapi tidak terbatas pada jaminan dapat diperjualbelikan, kebugaran untuk tujuan tertentu dan nonpringement. Dalam hal apa pun penulis atau pemegang hak cipta tidak akan bertanggung jawab atas klaim, kerusakan atau tanggung jawab lainnya, baik dalam tindakan kontrak, gugatan atau sebaliknya, timbul dari, di luar atau sehubungan dengan perangkat lunak atau penggunaan atau transaksi lain dalam perangkat lunak.
