Magdy Atef Zahran

Incremental Adoption in next.js

لو شغال على مشروع React وعايز تضيف مميزات زي الـ SSR (Server-Side Rendering) وغيرها، ومن غير ما تضطر تعيد كتابة المشروع من الأول يبقى مش قدامك غير Incremental Adoption.

في البدايه يعني إيه Incremental Adoption اصلا؟

ببساطة هوا إنك تضيف مميزات أو تقنيات جديدة على مشروعك الحالي بدل ما تعيد كتابة المشروع كله من الصفر.

يعني لو عندك مشروع React وعايز تضيف حاجة زي SSR (Server-Side Rendering) أو أي حاجة تقيلة كده، مش لازم تغير الشغل اللي عملته لا عادي تقدر تبدأ تطبق الحاجة الجديدة دي على جزء صغير من المشروع وتختبرها وتشوف شغالة معاك كويس ولا لأ.

طيب تعالي نبدا سوا واحده واحده يا صديقي…

– افتح التيرمينال ونفذ الأمر ده عشان تضيف نيكست للمشروع:

npm install next react react-dom

– إعداد الفولدرات:

هتعمل فولدر باسم pages/ في المشروع.. دا اي ملف جواه هيبقى صفحة تلقائي في Next. مثلا :

pages/index.js: الصفحة الرئيسية. pages/about.js: صفحة من نحن

– هتدمج نيكست مع React Router (لو شغال بيه):

أول حاجة لو في صفحات محتاجة SSR أو SSG لازم تحطها في فولدر pages/. ده لأن Next.js بيشتغل بشكل تلقائي على الصفحات اللي جوا الفولدر ده وبيوفر ليها الـ SSR أو الـ SSG حسب ما تحدد لكن باقي الصفحات اللي مش محتاجة الـ SSR أو الـ SSG ممكن تفضل شغالة زي ما هي ب React Router ومش هيتأثر بأي حاجة.

هتبدا تستخدام المميزات اللي في Next.js بشكل تدريجي:

SSR (Server-Side Rendering):

هتستخدم SSR لو عندك صفحات بياناتها بتتغير مع كل طلب :

xport async function getServerSideProps() { const res = await fetch(‘https://api.example.com/data’); const data = await res.json(); return { props: { data } }; } export default function Page({ data }) { return <div>{JSON.stringify(data)}</div>; }

SSG (Static-Site Generation):

هتستخدمها لو عندك صفحات بياناتها ثابتة أو بتتحدث كل فترة:

export async function getStaticProps() { const res = await fetch(‘https://api.example.com/data’); const data = await res.json(); return { props: { data } }; } export default function Page({ data }) { return <div>{JSON.stringify(data)}</div>; }

تحسين الـ SEO بال Head Tags

هستخدم <Head> عشان تضيف الـ meta tags الضرورية فقط:

import Head from ‘next/head’; export default function Page() { return ( <> <Head> <title>صفحة معلومات</title> <meta name=”description” content=”دي صفحة معلومات عن مشروعنا” /> </Head> <h1>مرحبًا بك في الصفحة</h1> </> ); }

كدا نكون عرفنا ازاي ندمج Next.js مع مشروع React خطوه بخطوه