Next.js در مقابل React: یک آموزش مقایسه ای

Next.js یک چارچوب رعد و برق سریع React است که توسط سایت های استریم سنگین داده مانند Hulu و Netflix قابل اعتماد است. اگر قبلاً با React آشنا هستید، قطعاً باید با این فناوری محبوب آشنا شوید.

اگرچه هم React و هم Next.js به ایجاد رابط های کاربری وب موثر کمک می کنند، اما تفاوت های کلیدی با هم دارند: Next.js از React دارای ویژگی های غنی تر و صاحب نظرتر است. این به ویژه برای وب سایت هایی که بر روی بهینه سازی موتور جستجو (SEO) یا پیش رندر متمرکز هستند، مناسب است.

Next.js در مقابل React

React که در سال 2013 عرضه شد، بسیار قوی تر از Next.js است. اما فریم ورک جوان تر که در سال 2016 منتشر شد، با محبوبیت بیشتری رو به افزایش است 100 هزار ستاره GitHub از مارس 2023 و میلیون ها بار در هفته دانلودهای npm. بیایید ببینیم که چگونه این دو در چهار زمینه اصلی با هم مقایسه می شوند:

• سرعت توسعه: Next.js ویژگی های خارج از جعبه را ارائه می دهد که روند توسعه را برای ساخت یک برنامه پیشرفته React آسان می کند. با معرفی کامپایلر خود در Next.js 12، این فریم ورک سرعت ساخت را نیز افزایش داد. در مقایسه با React، Next.js مدت زمانی را که مهندس برای به روزرسانی کد نیاز دارد، کاهش می دهد و ناامیدی و کاهش سرعت توسعه دهنده را به حداقل می رساند.
• زمان واکشی داده و بارگذاری: Next.js می تواند درخت React را طی کند و داده های موجود در سرور را جستجو کند و به داده های صفحه از پیش بارگذاری شده اجازه دهد. این اغلب باعث کاهش زمان بارگذاری برنامه برای صفحات ارائه شده توسط Next.js در مقایسه با صفحات نوشته شده در vanilla React می شود.
• رندر و سئو: Next.js پیش رندر را ارائه می دهد، در حالی که React از رندر سمت مشتری استفاده می کند. صفحات از پیش رندر شده، استراتژی های موثر سئو را فعال می کنند که دستیابی به آنها در یک برنامه ساده React چالش برانگیز است.
• مسیریابی: Next.js یک سیستم فایل ساختار یافته و از پیش تعریف شده برای مسیریابی فراهم می کند. سیستم آن در مقایسه با گزینه های مختلف کتابخانه React (مثلاً React Router) انعطاف پذیری کمتری ارائه می دهد، اما راه اندازی و مسیریابی صفحه را ساده تر می کند.

React انواع مختلفی از پروژه ها را به خوبی ارائه می دهد، از جمله داشبورد کاربر، سیستم های پشتیبان، ابزارهای سازمان داخلی و سیستم های تجسم داده ها. Next.js ابزار ایده آلی است که با آن می توان برنامه های React را که از قدرت پیش رندرینگ بهره می برند، از جمله فروشگاه های تجارت الکترونیک، برنامه های رسانه های اجتماعی، سیستم های رزرو بلیط و پلت فرم های آموزشی، ارتقا داد. بیایید برخی از موارد استفاده آن را با جزئیات بیشتر بررسی کنیم.

رندر در Next.js

رندر فرآیندی است که کد React را به HTML تبدیل می کند که مرورگر سپس به عنوان رابط کاربری صفحه نمایش می دهد. Next.js سه روش رندر ارائه می دهد - رندر سمت مشتری (CSR)، رندر سمت سرور (SSR) و تولید سایت استاتیک (SSG) - و امتیاز اضافه شده بازسازی استاتیکی افزایشی (ISR). ISR رندر سمت سرور را با مکانیزم کش نیمه استاتیک ترکیب می کند که بار سرور را کاهش می دهد و سرعت هایی مشابه با سرعتی که توسط یک سایت استاتیک به دست می آید ارائه می دهد.

رندر سمت سرور و تولید سایت ایستا در زیر چتر پیش رندر قرار می گیرد که در آن صفحات HTML قبل از ارسال به سمت مشتری تولید می شوند. مزیت بزرگ استفاده از Next.js این است که پشتیبانی قدرتمندی از برنامه های React از قبل ارائه می دهد.

رندر سمت کلاینت

رندر سمت کلاینت پیش فرض برنامه های vanilla React است. این روش HTML صفحه را در سمت مشتری تولید می کند. به عبارت دیگر، تلاش های رندر در مرورگر کاربر انجام می شود و جاوا اسکریپت از دستگاه کاربر HTML را تولید می کند. رابط کاربری پس از تکمیل رندر ظاهر می شود، زمانی که صفحه وب نیز تعاملی است (یعنی، هیدراته شده).

CSR برای اجزای Next.js با استفاده از React امکان پذیر است useEffect یا useSWR.

رندر سمت سرور

Next.js همچنین تولید HTML یک صفحه را در سرور فعال می کند. در این حالت، HTML تولید شده به مشتری ارسال می شود تا UI صفحه وب قبل از هیدراتاسیون ظاهر شود. سپس، صفحه وب قابل مشاهده پس از اتمام مقداردهی اولیه جاوا اسکریپت توسط مشتری، برای تعامل آماده است.

در صفحاتی که می خواهیم Next.js رندر سمت سرور را انجام دهد، برخی ساده است توابع پیکربندی به صفحه اضافه می شوند.

تولید سایت استاتیک

Next.js همچنین تولید سایت ایستا را ارائه می دهد که در آن تمام صفحات HTML ایستا در زمان ساخت از جاوا اسکریپت رندر می شوند. ایجاد یک سایت استاتیک از یک پایگاه کد React در مقایسه با برنامه تک صفحه ای React به زمان ساخت اولیه بیشتری نیاز دارد. با این حال، سود در اینجا داشتن محتوای ایستا است که می تواند با حداکثر سرعت مجاز توسط محتوای سایت بدون سربار محاسباتی SSR ارائه و ذخیره شود.

می توانیم اجرا کنیم SSG در صفحات Next.js که می خواهیم به صورت استاتیک با آن تولید کنیم getStaticProps() و getStaticPaths()، که دومی مسیرهای صفحات استاتیک را مشخص می کند.

بهینه سازی موتور جستجو Next.js

سرعت و توانایی Next.js در پیش رندر کردن تمام صفحات یک وب سایت به موتورهای جستجو اجازه می دهد تا به سرعت و به راحتی وب سایت را خزیده و فهرست بندی کنند و سئو را بهبود بخشد. سئو برای بسیاری از مشاغل و وب سایت ها بسیار مهم است زیرا وب سایت هایی با سئو بهتر در نتایج جستجو بالاتر ظاهر می شوند. کاربران بیشتر بر روی وب سایت های با رتبه بالاتر کلیک می کنند و بالاترین نتیجه دارای میانگین نرخ کلیک است. 27.6٪، نرخی که ده برابر بیشتر از نرخ کلیک نتیجه دهم 2.4٪ است.

وب سایت های React با حجم زیاد محتوا - و کد جاوا اسکریپت حاصله که برای رندر کردن استفاده می شود - هنگام مواجهه با خزیدن و نمایه سازی گوگل با چالش های سئو مواجه می شوند.

توانایی Next.js برای انجام آسان رندر سمت سرور (SSR) نه تنها رتبه بندی SEO را بهبود می بخشد، بلکه زمان بارگذاری درک شده و واقعی وب سایت را برای تجربه کاربری بهینه بهبود می بخشد.

شروع به کار با Next.js

اکنون به موارد ضروری راه اندازی، مسیریابی، صفحات و پیمایش Next.js نگاه می کنیم تا بتوانید از مزایای پیش رندرینگ و سئو بهره ببرید. قبل از شروع آموزش Next.js، مطمئن شوید که آخرین نسخه را دارید Node.js دانلود شد روی سیستم شما می توانید نسخه Node.js را در دستگاه خود تأیید کنید node --version.

دو راه برای راه اندازی پروژه Next.js وجود دارد:

• راه اندازی خودکار، با تنظیمات از پیش تعریف شده
• راه اندازی دستی و تنظیمات

ما راه اندازی خودکار را دنبال می کنیم تا پروژه خود را آسان تر شروع کنیم. این create-next-app ابزار CLI تنظیمات خودکار را مدیریت می کند و امکان ساخت سریع برنامه ها را فراهم می کند. بیایید پروژه خود را با پشتیبانی داخلی Next.js برای TypeScript، یک ابر مجموعه نحوی دقیق جاوا اسکریپت، ایجاد کنیم تا از ساختار نوع مناسب اطمینان حاصل کنیم:

npx create-next-app@latest --typescript

create-next-app نام درخواست شما را می پرسد. نام پروژه شما باید از حروف کوچک تشکیل شده باشد و به جای فاصله از خط فاصله استفاده شود. به عنوان مثال، من درخواست خود را نامگذاری کرده ام next-js-tutorial. پس از تکمیل راه اندازی، یک یادداشت موفقیت آمیز در ترمینال خود خواهید دید.

در پروژه جدید ما، می توانیم ببینیم که Next.js یک سیستم ساختار فایل سفت و سخت را الزامی می کند:

• مال وب سایت pages و styles در پوشه های خود سازماندهی می شوند.
• API ها در pages/api پوشه
• دارایی های در دسترس عموم در public پوشه

مسیریابی و صفحات Next.js

Next.js از ساختار فایل خود در داخل استفاده می کند pages دایرکتوری برای تعریف مسیرهای برنامه.

ما تمام مسیرها را در pages پوشه به طور پیش فرض pages/index.tsx فایل نقطه ورود برنامه است که در آن فونت های سفارشی، کدهای ردیابی برنامه و سایر مواردی که نیاز به دسترسی جهانی دارند را تعریف می کنیم.

دو روش برای اضافه کردن مسیرهای جدید وجود دارد:

• یک فایل با ختم اضافه کنید .tsx مستقیما در pages.
• یک را اضافه کنید index.tsx فایل در زیر پوشه جدیدی از pages (index فایل ها به طور خودکار به ریشه دایرکتوری هدایت می شوند).

بیایید چند مثال عینی Next.js را برای مسیریابی بررسی کنیم. ما یک مسیر صفحه ساده را برای آموزش خود پیاده سازی می کنیم، سپس مفاهیم مسیریابی تودرتو و پویا را لمس می کنیم.

مسیرهای صفحه

ما می توانیم یک مسیر صفحه اصلی، مانند about-us، با یک about-us.tsx فایل:

|— pages|    |— _app.tsx|    |— about-us.tsx|    |— api|    |— index.tsx

یا می توانیم از an استفاده کنیم index.tsx فایل تحت الف pages/about-us پوشه:

|— pages|    |— _app.tsx|    |— about-us|    |    |— index.tsx|    |— api|    |— index.tsx

برو جلو و اضافه کن about-us.tsx مسیر صفحه به پروژه شما

import styles from \'../styles/Home.module.css\'const AboutUs: NextPage = () => {  return (     <div className={styles.container}>      <main className={styles.main}>        <h1 className={styles.title}>About Us Example Page        </h1>      </main>    </div>  )}export default AboutUs

وقتی از آن در ترکیب با ناوبری Next.js استفاده کنیم، مسیریابی صفحه را در عمل خواهیم دید. در حال حاضر، ما یک مکان نگهدارنده را برمی گردانیم NextPage با یک رشته عنوان، بنابراین ناوبری به درستی کار می کند.

مسیرهای تو در تو

مسیرهای تو در تو امکان استفاده مجدد از چندین طرح بندی و به روزرسانی انتخابی در یک صفحه (به عنوان مثال، وقتی کاربر روی یک URL کلیک می کند، ممکن است بخواهید محتوای بدنه را به روزرسانی کنید اما طرح بندی سرصفحه و پاورقی را حفظ کنید).

|— pages|    |— _app.tsx|    |— api|    |— index.tsx|    |— parent|    |    |— child.tsx

مسیر تودرتو را تعریف می کنیم /parent/child با یک parent پوشه و یک تو در تو child پوشه یا فایل (مثال ما یک فایل را نشان می دهد).

مسیرهای پویا

مسیرهای پویا در مواردی که مسیرهای از پیش تعریف شده کافی نیستند، به طرح بندی ها اجازه می دهد تا به تغییرات بلادرنگ پاسخ دهند. فرض کنید می خواهیم یک را ایجاد کنیم /product/[productId] مسیر (به عنوان مثال، هنگامی که یک محصول کلیک می شود، جزء آن را گسترش دهید). فرض کنید که productId متغیری است که در تعریف ما از آن قابل دسترسی است Product، می توانیم به راحتی با ایجاد a یک مسیر پویا اضافه کنیم product پوشه و بسته بندی ما productId صفحه داخل پرانتز:

|— pages|    |— _app.tsx|    |— api|    |— index.tsx|    |— product|    |    |— [productId].tsx

به این ترتیب، مسیری مانند product/testId پارامترهای پرس و جو خود را تنظیم خواهد کرد (یعنی productId تنظیم شده است testId).

در نهایت، ترکیب تکنیک های مسیریابی نیز امکان پذیر است. برای مثال، می توانیم مسیر پویا تودرتو ایجاد کنیم pages/post/[postId]/[comment].tsx.

ناوبری Next.js

Next.js از سفارشی خاص خود استفاده می کند Link اجزاء به جای <a> تگ HTML هنگام پیمایش بین صفحات سمت سرویس گیرنده به Next.js اجازه می دهد ناوبری و پیش واکشی داده ها را بهینه کند. Link مشابه عمل می کند <a> برچسب و موارد استفاده href به عنوان مسیری که باید باز شود. شما باید استفاده کنید را passHref پشتیبانی به زور Link برای انتقال مقدار مسیر خود به مؤلفه های فرزند (یعنی هنگام استفاده از مؤلفه های سبک سفارشی).

مزیت اصلی استفاده از Link به جای <a> تگ این است که وقتی کاربر روی پیوند یا نزدیک آن قرار می گیرد، داده ها را از قبل بارگذاری می کند. این باعث می شود محتوا برای پردازش آسان تر در دسترس مشتری باشد و عملکرد برنامه را بهبود بخشد. هنوز هم ممکن است از آن استفاده کنید <a> هنگام پیوند دادن به صفحات خارجی خارج از برنامه، Next.js را تگ کنید.

برای پیوند به صفحه درباره ما از طرح پروژه Next.js، آن را باز کنید pages/index.tsx فایل اصلی برنامه ما ابتدا وارد می کنیم Link جزء از next/linkو سپس یک پاراگراف مرتبط در زیر اضافه کنید <h1> جزء:

<p className={styles.description}>  Here\'s our example <Link href="/about-us">About Us</Link> page</p>

اکنون می توانیم برنامه خود را با استفاده از npm run dev فرمان پوسته، بازدید کنید http://localhost:3000و متن اضافه شده و صفحه درباره ما را که در آن کار می کند، ببینید (مسیر پس از کلیک روی درباره ما بازگشت).

برنامه های وب را با Next.js شارژ کنید

قبل از انتخاب فریمورک برای وب سایت بعدی خود باید عوامل زیادی را در نظر بگیرید. اگرچه Next.js نسبت به React خوش بین تر و انعطاف پذیرتر است، اما این فریم ورک عملکرد فوق العاده ای را برای پروژه های پیشرفته با هدف SEO یا قابلیت های پیش رندر ارائه می دهد. با پایه های Next.js در جعبه ابزار خود، می توانید سایت خود را شارژ کنید و از برنامه های vanilla React برتری پیدا کنید.

تیم تحریریه وبلاگ مهندسی تاپتال از شما تشکر می کند ریچارد پلاتکین برای بررسی نمونه کدها و سایر مطالب فنی ارائه شده در این مقاله.