nest next
1.0.0
عرض الوحدة النمطية لإضافة دعم NextJS لـ 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 للتفاعل والرد.
استيراد 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 ولكن يمكن تغييرها أو ضبطها على خالية لتقديمها من جذر pages .
بشكل افتراضي ، سيتم تعيين وضع DEV على true ما لم يتم الكتابة فوق الخيار. يحدد وضع DEV حاليًا كيف يجب تسلسل الأخطاء قبل إرسالها إلى التالي.
9 التالي المدمج في دعم ZERO-CONFIG TYPERSCESS. يعد هذا التغيير رائعًا بشكل عام ، ولكن بعد ذلك يتطلب إعدادات محددة في 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. لتقديم صفحة في وحدة التحكم الخاصة بك ، استيراد 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 ;يمكن الوصول إلى الدعائم الأولية المرسلة إلى صفحة عرض 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 ;افتراضيًا ، سيتم التعامل مع الأخطاء وتقديمها باستخدام مصادر الأخطاء في NEXT ، والتي تستخدم صفحة _error القابلة للتخصيص. بالإضافة إلى ذلك ، يمكن اعتراض الأخطاء عن طريق تعيين معالج الأخطاء الخاص بك.
يمكن تعيين معالج الخطأ المخصص لتجاوز أو تعزيز السلوك الافتراضي. يمكن استخدام هذا لأشياء مثل تسجيل الخطأ أو تقديم استجابة مختلفة.
في معالج الأخطاء المخصص لديك خيار فقط اعتراض وفحص الخطأ ، أو إرسال ردك الخاص. إذا تم إرسال استجابة من معالج الأخطاء ، فسيتم اعتبار الطلب يتم ولن يتم إعادة توجيه الخطأ إلى مصرفي خطأ التالي. إذا لم يتم إرسال استجابة في معالج الأخطاء ، بعد إرجاع المعالج ، يتم إعادة توجيه الخطأ إلى عارض الخطأ. انظر تدفق الطلب أدناه للحصول على شرح مرئي.
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 ) ;
} ) ;
...
} الصورة مرتبطة بإصدار أكبر
يمكن الاطلاع على مشاريع الإعداد بالكامل في مجلد الأمثلة
يقدم المقبل صفحات من دليل الصفحات. يمكن أن يبقى رمز مصدر العش في مجلد الافتراضي /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". مشروع العش موجود في مجلد "الخادم". من أجل جعل نوع الخصائص آمنة بين مشاريع "واجهة المستخدم" و "الخادم" ، يوجد مجلد يسمى "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
لتشغيل هذا المشروع ، يجب بناء مشروع "واجهة المستخدم" و "الخادم" ، بأي ترتيب. سيتم بناء مشروع "DTO" ضمنيًا من قبل مشروع "Server". بعد كل من تلك البناء ، يمكن بدء مشروع "الخادم" في وضع DEV أو الإنتاج.
من المهم أن تشير إشارات "واجهة المستخدم" إلى "DTO" إلى ملفات TypeScript (. TROMES في المجلد "SRC") ، وليس ملفات الإعلان (.D.TS Files في المجلد "DIST") ، بسبب كيفية عدم تجميع التالي بنفس الطريقة مثل الخادم.
حاليًا ، لا تعمل صفحات "Catch All Rounds" بشكل صحيح. انظر العدد رقم 101 للحصول على التفاصيل.
للمساهمة تأكد من أن التغييرات الخاصة بك تمر بجناح الاختبار. لتشغيل Docker Suite docker ، مطلوب docker-compose . تشغيل npm run test لتشغيل الاختبارات. سيتم تثبيت الكاتب المسرحي مع الحزم المطلوبة. لتشغيل الاختبارات في وضع التطوير التالي ، قم بتشغيل npm run test-dev . يمكنك أيضًا تحديد متغيرات NODE_VERSION و Major NEXT_VERSION لتشغيل الاختبارات في بيئات محددة.
رخصة معهد ماساتشوستس للتكنولوجيا
حقوق الطبع والنشر (ج) 2018-كايل مكارثي الحاضر
يتم منح الإذن بموجب هذا ، مجانًا ، لأي شخص يحصل على نسخة من هذا البرنامج وملفات الوثائق المرتبطة به ("البرنامج") ، للتعامل في البرنامج دون تقييد ، بما في ذلك على سبيل المثال لا الحصر حقوق استخدام الأشخاص ونسخها ودمجها ودمجها وتوزيعها وتوزيعها على ما يلي:
يجب إدراج إشعار حقوق الطبع والنشر أعلاه وإشعار الإذن هذا في جميع النسخ أو الأجزاء الكبيرة من البرنامج.
يتم توفير البرنامج "كما هو" ، دون أي ضمان من أي نوع ، صريح أو ضمني ، بما في ذلك على سبيل المثال لا الحصر ضمانات القابلية للتسويق واللياقة لغرض معين وعدم الانفجار. لا يجوز بأي حال من الأحوال أن يكون المؤلفون أو حاملي حقوق الطبع والنشر مسؤولاً عن أي مطالبة أو أضرار أو مسؤولية أخرى ، سواء في إجراء عقد أو ضرر أو غير ذلك ، ناشئة عن أو خارج البرنامج أو الاستخدام أو غيرها من المعاملات في البرنامج.
