next on netlify

next on netlify

كود الذكاء الاصطناعي

v3.0.1

تنزيل

إهمال نترفيت

نحن next-on-netlify بتهديد مكونات NEXT.JS Build Build الأساسية. يرجى زيارة هذه المشكلة لمعرفة المزيد حول إهمال next-on-netlify وطرح أي أسئلة. يمكنك أيضًا زيارة Doc Simple Migration Doc للمساعدة في الترحيل إلى المكون الإضافي.

بناء البرنامج المساعد @netlify/البرنامج المساعد
Plugin NPM Package

next-on-netlify هي أداة لتمكين تقديم جانب الخادم في Next.js على NetLify. يلف تطبيقك في طبقة توافق صغيرة ، بحيث يمكن للصفحات استخدام وظائف NetLify لتكون من جانب الخادم تقديمها.

جدول المحتويات

تثبيت
يثبت
- 1. تعيين الهدف التالي. js إلى الخادم
- 2. أضف خطاف ما بعد البناء
- 3. تكوين NetLify
  - (اختياري) تكوين عروض فرعية من GIT الخاصة
العرض التوضيحي
إضافات اختيارية
- معاينة محليا
- إعادة توجيه netlify مخصصة
- وظائف NetLify مخصصة
- وظائف الخلفية
- باستخدام هوية NetLify
تحذيرات
- عوائق مع الصفحات مع getStaticPaths
- التالي/الصورة
الاعتمادات
عرض

تثبيت

 npm install --save next-on-netlify

يثبت

1. تعيين الهدف التالي. js إلى الخادم

يجب أن نبني تطبيق Next.js الخاص بنا كتطبيق بدون خادم. يمكنك قراءة المزيد عن serverless next.js هنا.

إنه بسيط للغاية. ما عليك سوى إنشاء ملف next.config.js في جذر مشروعك واكتب ما يلي:

 // next.config.js

module . exports = {
  // Target must be serverless
  target : "serverless" ,
} ;

إذا كانت هناك حاجة إلى ثنائيات في النشر ، فستكون هناك حاجة إلى التكوين التالي (Prisma مثال):

 // next.config.js

module . exports = {
  // Target must be experimental-serverless-trace
  // Your build time will be longer with this option
  target : "experimental-serverless-trace" ,
} ;

2. أضف خطاف ما بعد البناء

تضيف حزمة Next-on next-on-netlify . عندما نقوم بتشغيل هذا الأمر ، يحدث بعض السحر لإعداد تطبيق Next.js الخاص بنا للاستضافة على NetLify*.

نريد تشغيل الأمر التالي على Netlify بعد أن نبني تطبيق Next.js. لذلك دعونا نضيف خطافًا بعد البناء إلى ملف package.json الخاص بنا. يجب عليك إضافة "postbuild": "next-on-netlify" إلى البرامج النصية الموجودة ، مثل ذلك:

 {
  "name": "my-nextjs-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "postbuild": "next-on-netlify"
  },
  ...
}

*إذا كنت مهتمًا بملف "Magic" ، تحقق من ملف next-on-netlify.js جيدًا.

3. تكوين NetLify

لقد انتهينا تقريبًا! علينا فقط أن نخبر NetLify كيفية إنشاء تطبيق Next.js الخاص بنا ، حيث يوجد مجلد الوظائف ، والمجلد الذي يجب تحميله على CDN. نفعل ذلك مع ملف netlify.toml في جذر مشروعك والتعليمات التالية:

[ build ]
  command   = " npm run build "
  functions = " out_functions "
  publish   = " out_publish "

ملاحظة: يتم ترميز out_functions و out_publish إلى قسوة. هذه ليست قابلة للتكوين في الوقت الحالي.

(اختياري) تكوين عروض فرعية من GIT الخاصة

إذا كان مشروعك يحتوي على عروض فرعية خاصة ، من أجل نشره ، فستحتاج إلى:

قم بإنشاء مفتاح نشر في NetLify وأضفه إلى العلامات الفرعية ذات الصلة بحيث يمكن استنساخها أثناء عملية النشر.
تأكد من تعيين أجهزة التحكم عن بعد الفرعية على تنسيق SSH (أي [email protected]:owner/project.git ، وليس https://... ). داخل دليل الجهاز الفرعي ، يمكن تحديث جهاز التحكم عن بُعد GIT بـ:
```
 # git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.git
```

لقد انتهينا. دعنا ننشر

إذا لم تكن معتادًا على NetLify ، فاتبع تعليمات النشر هنا:

العرض التوضيحي

الموقع: https://next-on.netlify.com/
الكود: https://github.com/netlify-labs/next-on-netlify-demo

إضافات اختيارية

معاينة محليا

أوصي بأن لا تزال تستخدم next dev لإنشاء تطبيقك ومعاينته محليًا.

ولكن إذا كنت ترغب في محاكاة نشر NetLify على جهاز الكمبيوتر الخاص بك ، فيمكنك أيضًا تشغيل next-on-netlify محليًا ثم استخدام netlify-cli لمعاينة النتيجة.

أولاً ، قم بتثبيت أحدث إصدار من netlify-cli (يمكنك أيضًا الاطلاع على package.json لمشاهدة الإصدار الذي تم اختباره مقابل Netlify):

npm install -g netlify-cli

ثم ، أضف كتلة [dev] التالية إلى netlify.toml :

 # netlify.toml

# [build]
#   ...

[ dev ]
  functions = " out_functions "
  publish   = " out_publish "
  # We manually set the framework to static, otherwise Netlify automatically
  # detects Next.js and redirects do not work.
  # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
  framework = " #static "

أخيرًا ، أضف الأسطر التالية إلى .gitignore :

 # .gitignore

# Files generated by next-on-netlify command
/out_publish/
/out_functions/

الآن أنت كل مجموعة.

من الآن فصاعدًا ، كلما أردت معاينة طلبك محليًا ، ما عليك سوى تشغيل:

npx next-on-netlify watch : سيتم تشغيل هذا next build لإنشاء تطبيق Next.js الخاص بك و next-on-netlify لإعداد تطبيق Next.js الخاص بك للتوافق مع NetLify. أي تغييرات رمز المصدر ستؤدي إلى بناء آخر.
netlify dev : سيحاكي هذا netlify على جهاز الكمبيوتر الخاص بك ويتيح لك معاينة تطبيقك على http://localhost:8888 .

ملحوظة:

وضع المعاينة غير متوفر محليًا بعد ، حيث يتم تشغيل netlify dev ، للحصول على صفحات ثابتة دون إعادة تقييم أو احتياطي. سيتم دعم هذا قريبًا.

في الوقت الحالي ، يتم دعم وضع المعاينة في الإنتاج لجميع أنواع صفحات Next.js.

إعادة توجيه netlify مخصصة

يمكنك تحديد عمليات إعادة التوجيه المخصصة في _redirects و/أو في ملف netlify.toml الخاص بك. أسبقية هذه القواعد هي:

_redirects
إعادة توجيه next-on-netlify

حاليًا ، لا يوجد دعم لإعادة التوجيه في ملف netlify.toml .

اقرأ المزيد عن إعادة توجيه NetLify هنا.

وظائف NetLify مخصصة

تنشئ next-on-netlify وظيفة NetLify واحدة لكل صفحة من صفحات SSR ونقاط نهاية API. حاليًا ، يمكنك فقط إنشاء وظائف NetLify مخصصة باستخدام @netlify/plugin-nextjs.

وظائف الخلفية

إذا انتهت صفحة/مسار API الخاصة بـ next.js في -background ، فسيتم التعامل معها كدالة خلفية netlify. ملاحظة: وظائف الخلفية متوفرة فقط على خطط معينة.

باستخدام هوية NetLify

يمكنك استخدام NetLify Identity مع next-on-netlify . بالنسبة لجميع الصفحات ذات عرض جانب الخادم (GetInitialProps*، GetServersIdeProps ، و API Routes) ، يمكنك الوصول إلى كائن ClientContext عبر معلمة req .

على سبيل المثال:

 const Page = ( ) => < p > Hello World! </ p > ;

export const getServerSideProps = async ( { req } ) => {
  // Get event and context from Netlify Function
  const {
    netlifyFunctionParams : { event , context } ,
  } = req ;

  // Access Netlify identity
  const { identity , user } = context . clientContext ;

  return {
    props : { } ,
  } ;
} ;

export default Page ;

للوصول إلى NetLify Identity من صفحات دون عرض من جانب الخادم ، يمكنك إنشاء مسار API التالي الذي يؤدي المنطق المتعلق بالهوية:

 export default async function getUser ( req , res ) {
  // Get event and context from Netlify Function
  const {
    netlifyFunctionParams : { event , context } ,
  } = req ;

  // Access Netlify identity
  const { user } = context . clientContext ;

  // Respond with user object
  res . json ( { user } ) ;
}

* لاحظ أن الصفحات التي تستخدم getInitialProps هي فقط من جانب الخادم يتم تقديمها على تحميل الصفحة الأولية وليس عندما ينقل المستخدم جانب العميل بين الصفحات.

تحذيرات

عوائق مع الصفحات مع `getStaticPaths`

تتصرف صفحات العودة بشكل مختلف مع next-on-netlify مما كانت عليه مع Next.js. على next.js ، عند التنقل إلى مسار لم يتم تعريفه في getStaticPaths ، فإنه يعرض أولاً صفحة الاحتياط. بعد ذلك ، يقوم js.js بإنشاء HTML في الخلفية ويختتمها للطلبات المستقبلية.

باستخدام next-on-netlify ، عند التنقل إلى مسار لم يتم تعريفه في getStaticPaths ، فإنه يجعل الصفحة من جانب الخادم ويرسلها مباشرة إلى المستخدم. لا يرى المستخدم صفحة الاحتياط. لا يتم تخزين الصفحة مؤقتًا للطلبات المستقبلية.

لمعرفة المزيد عن هذا ، انظر: العدد رقم 7