فهرست مندرجات[پنهان شدن][نمایش]
هنگام انتخاب یک کتابخانه یا چارچوب نرم افزار، معمولاً تجربه توسعه دهنده در نظر گرفته می شود.
وقتی به «تجربه توسعهدهنده» اشاره میکنم، به این موضوع اشاره میکنم که توسعهدهندگان واقعاً چگونه کار را انجام میدهند. توسعه دهندگان کتابخانه ها یا چارچوب هایی را انتخاب می کنند که استفاده از آنها لذت بخش است.
این یکی از دلایل اصلی است که چرا ما اکنون محبوب ترین کتابخانه ها و چارچوب ها را داریم. بهعنوان توسعهدهنده، وقتی ابزارهای موجود برای کمک به ما در انجام وظایفمان ایجاد شدهاند، مجبور نیستیم از ابتدا شروع کنیم.
فریمورکها قطعات نرمافزاری هستند که توسط توسعهدهندگان برای ساخت اپلیکیشنها ساخته و استفاده میشوند و NextJS یکی از آنهاست.
در این پست، به Nextjs، ویژگیهای کلیدی آن و نحوه استفاده از آن برای ساخت یک برنامه خواهیم پرداخت. بیایید درست بپریم داخل
Next.js چیست؟
Next.js یک چارچوب جاوا اسکریپت برای ساخت سریع و آسان صفحات وب استاتیک و برنامه های آنلاین مبتنی بر React است. این به شما اجازه می دهد تا برنامه های وب عالی برای پلتفرم های مختلف از جمله ویندوز، لینوکس و مک طراحی کنید.
اگر آشنایی حداقلی با react دارید و می خواهید در مورد اکوسیستم react بیشتر بدانید، باید با چارچوب Next.js آشنا باشید.
حتی اگر Next.js همه چیزهایی را که برای شروع نیاز دارید ارائه میکند، میتوانید بین NPM و Yarn، جاوا اسکریپت و TypeScript، CSS و SCSS، صادرات استاتیک و استقرار بدون سرور انتخاب کنید.
امکانات
- مسیریابی به صورت خودکار انجام می شود - نیازی به پیکربندی چیزی ندارید زیرا هر URL به سیستم فایل، به فایل های موجود در پوشه pages نگاشت می شود (البته شما گزینه های سفارشی سازی دارید).
- اجزای یک فایل منفرد – اضافه کردن سبک های محدوده بندی شده به کامپوننت با استفاده از styled-jsx که کاملاً یکپارچه و توسط همان تیم تولید شده است، ساده است.
- بارگیری مجدد یک کد داغ – زمانی که Next.js تغییری را که در دیسک ذخیره شده است شناسایی می کند، صفحه را دوباره بارگیری می کند.
- اجزای پویا - می توانید ماژول های جاوا اسکریپت و کامپوننت های React را به صورت پویا بارگیری کنید.
- صادرات استاتیک – Next.js به شما امکان می دهد با دستور صادرات بعدی، یک سایت کاملاً ثابت را از برنامه خود صادر کنید.
- سازگاری با محیط زیست - Next.js به طور یکپارچه با اکوسیستم های جاوا اسکریپت، نود و React ادغام می شود.
- تقسیم کدها به صورت خودکار - فقط کتابخانه ها و جاوا اسکریپت مورد نیاز برای ارائه صفحات استفاده می شود. Next.js به جای ایجاد یک فایل جاوا اسکریپت حاوی تمام کدهای برنامه، به طور هوشمند برنامه را به منابع زیادی تقسیم می کند.
چگونه یک برنامه next.js ایجاد کنیم؟
نصب و راه اندازی
می توانید از دستور node npx برای نصب و ساخت پروژه Next.js استفاده کنید.
این یک پوشه و تمام فایلها، پیکربندیها و سایر موارد مورد نیاز برای اجرای پروژه Next.js را ایجاد میکند.
پس از تولید می توانید برنامه را راه اندازی کنید.
صفحات و مسیریابی
برای مدیریت مسیرها با Next.js، نیازی به استفاده از چارچوب مسیریابی نداریم. راهاندازی با Next.js بسیار آسان است. هنگامی که از دستور create-next-app برای ساختن یک برنامه Next.js جدید استفاده می کنید، برنامه به طور پیش فرض پوشه ای به نام "pages" ایجاد می کند.
این پوشه 'pages' جایی است که مسیرهای خود را حفظ می کنید. در نتیجه، هر فایل Reacts Components در زیر شاخه به عنوان یک مسیر جداگانه مدیریت می شود.
برای مثال، اگر پوشه حاوی آن فایلها باشد:
- index.js
- about.js
- aricles.js
این فایل به سه روش به طور خودکار تبدیل می شود:
- صفحه فهرست localhost/index
- صفحه درباره localhost/about
- صفحه وبلاگ لوکال هاست/مقالات
نمونه ای از صفحه about.js در زیر نشان داده شده است. همانطور که می بینید چیزی در مورد صفحه ارائه نشده است. این به سادگی یک جزء عملکردی استاندارد React است.
مسیرهای
برای ایجاد مسیرهای تودرتو، ابتدا باید یک پوشه فرعی ایجاد کنید. به عنوان مثال: صفحات/مقالات. کامپوننت واکنش 'contact.js' خود را در آن پوشه ایجاد کنید و صفحه localhost/articles/contact را ایجاد می کند.
اگر یک فایل را در pages/articles.js و دیگری را در pages/articles/index.js قرار دهید. هر دو منعکس کننده یک مسیر لوکال هاست/وبلاگ هستند. در این شرایط، Next.js فقط فایل article.js را رندر می کند. در مورد مسیرهای پویا که در آن هر پست وبلاگ مسیر خاص خود را دارد چطور:
- لوکال هاست/بلاگ/مقاله اول
- localhost/blog/-second- article
با استفاده از نماد براکت ها، می توانید یک مسیر پویا در Next.js تعریف کنید. به عنوان مثال: pages/article/[slug].js
پیوند مسیرها
شما اکنون اولین مسیر خود را تکمیل کرده اید. حدس میزنم که میپرسید چگونه صفحات را به آن مسیرها متصل کنید. برای انجام این کار به "پیوند/بعدی" نیاز دارید.
در اینجا نمونه ای از یک صفحه اصلی است که شامل پیوندی به صفحه درباره است:
اگر می خواهید به پیوند استایل بدهید، از نحو زیر استفاده کنید:
تغییر مسیر مسیرها
اگر نیاز به تغییر مسیر به یک صفحه خاص داشته باشید، چه؟ به عنوان مثال، هنگامی که یک دکمه فشار داده می شود؟ شما می توانید این کار را با استفاده از 'router.push' انجام دهید:
SEO
صفحات در برنامه های کاربردی وب علاوه بر داده های درون بدنه HTML به عناصر متا (سر) نیز نیاز دارند. این امر مستلزم نصب یک نیاز اضافی به نام React Helmet در یک React Application است.
ما می توانیم از مولفه Head از next/head در Next استفاده کنیم تا به راحتی ابرداده را به صفحات وب خود اضافه کنیم که در نتایج جستجو و جاسازی ها نمایش داده می شوند:
اجزاء
شما اغلب نیاز به توسعه کامپوننت ها یا یک فایل طرح بندی دارید. به عنوان مثال، مؤلفه ای که نوار ناوبری را رندر می کند. ما فقط از پوشه pages تا کنون استفاده کرده ایم. اگر قرار نیست کامپوننت شما یک صفحه مسیر باشد چه؟
شما نمی خواهید کاربر به صفحه ای مانند localhost/navbar بروید. اگر کامپوننت Navbar.js را در پوشه pages قرار دهید، این اتفاق خواهد افتاد. در این شرایط چه باید کرد؟
به سادگی تمام اجزای "نه یک صفحه" خود را در یک پوشه جداگانه ذخیره کنید. اکثر پروژههای Next.js از نام «کامپوننتها» استفاده میکنند و این پوشه در پوشه اصلی پروژه شما ایجاد میشود.
جزء سر
بارگذاری اولیه صفحه توسط Next.js در سمت سرور ارائه می شود. این کار را با تغییر HTML صفحه شما انجام می دهد. بخش هدر گنجانده شده است.
کامپوننت Next.js Head برای دادن تگ های بخش هدر مانند عنوان و متا استفاده می شود. جزء Head در این مثال از کامپوننت Layout استفاده شده است.
ایجاد صفحه 404 یافت نشد
این امکان پذیر است که صفحه خطای 404 خود را ایجاد کنید. ممکن است بخواهید پیام را سفارشی کنید یا طراحی صفحه خود را اضافه کنید. در پوشه pages، فایل 404.js را ایجاد کنید.
هنگامی که یک خطای 404 رخ می دهد، Next.js به طور خودکار به این صفحه هدایت می شود. در اینجا نمونه ای از صفحه شخصی سازی شده 404 آمده است:
واکشی داده ها از سمت سرور
بهجای دانلود دادهها در سمت کلاینت، Next.js به شما امکان میدهد یک جمعیت داده اولیه را انجام دهید، که به معنای ارسال صفحه با دادههایی است که قبلاً از سرور پر شده است.
شما دو انتخاب برای اجرای واکشی داده های سمت سرور دارید:
- داده ها باید در هر درخواست واکشی شوند.
- در طول فرآیند ساخت و ساز فقط یک بار داده دریافت کنید (سایت استاتیک)
در هر درخواست داده ها را واکشی کنید
متد getServerSideProps برای ارائه هر درخواست از سمت سرور استفاده می شود. این تابع می تواند در انتهای فایل کامپوننت شما گنجانده شود. Next.js به طور خودکار اجزای سازنده شما را با شی getServerSideProps پر می کند اگر آن تابع در فایل کامپوننت شما وجود داشته باشد.
واکشی داده ها در زمان ساخت
متد getStaticProps برای رندر سمت سرور در زمان ساخت استفاده می شود. این تابع می تواند در انتهای فایل کامپوننت شما گنجانده شود. این روش کد سرور را اجرا می کند و درخواست GET را به سرور ارسال می کند، اما فقط یک بار زمانی که پروژه ما به پایان رسید.
چرا باید Next.js را یاد بگیرید؟
یکی از دلایل این امر این است که Next.js بر روی React ساخته شده است، یک جعبه ابزار توسعه front-end برای ایجاد رابط های کاربری که انتخاب مورد علاقه من برای طراحی برنامه های وب هستند.
اما اگر Next.js در کاری که انجام میداد خوب نبود کافی نبود... درست است؟
بنابراین، دقیقا چه کاری انجام می دهد؟
ابتدا باید چند مفهوم را برای درک آن تعریف کنیم. Next.js محبوبیت پیدا کرد زیرا مشکلی را که بسیاری از توسعه دهندگان وب با برنامه های وب سمت مشتری (در مرورگر) داشتند را حل کرد. این برنامه های تک صفحه ای (SPA) تجربه بهتری داشتند زیرا نیازی به بارگذاری مجدد صفحه توسط کاربر نداشتند و امکان تعامل بیشتر را فراهم می کردند.
با این حال، از آنجایی که بخش عمده ای از مطالب در برنامه ای مانند این تنها زمانی قابل مشاهده می شود که در مرورگر اجرا شود، خزنده های وب برای درک محتوای متن چنین برنامه ای مشکل دارند.
در نتیجه، با وجود محبوبیت، بسیاری از SPAها تا حد زیادی برای موتورهای جستجوی بزرگ مانند گوگل ناشناس ماندند. Next.js اکنون دارای مکانیزم داخلی قوی تری برای رندر سمت سرور (SSR) اجزای React است.
Next.js به توسعه دهندگان این امکان را می دهد تا کد جاوا اسکریپت را در طول فرآیند ساخت روی سرور بسازند و HTML اولیه و قابل نمایه سازی را برای کاربر ارائه دهند.
مزایا
- برای تجربه کاربری عالی است
- برای سئو عالی است
- یک وب سایت استاتیک فوق سریع بسازید که مانند یک وب سایت پویا عمل می کند
- انعطاف پذیری در ساخت UI و UX.
- بسیاری از مزایای توسعه
- پشتیبانی عالی جامعه
منفی
- وب سایت ها یا برنامه ها زمان مشخصی برای ساخت یا توسعه دارند.
- برای برخی وظایف، Next.js کافی نیست. توسعه دهندگان باید بتوانند مسیرهای پویا را با استفاده از ابزار Node.js بسازند.
نتیجه
همانطور که می بینید، Next.js توسعه برنامه React را ساده می کند و به شما امکان می دهد بر روی آنچه که بیشترین اهمیت را دارد تمرکز کنید - منطق برنامه و رابط کاربری خود. این شامل همه چیزهایی است که برای ایجاد برنامههای معاصر، غنی از ظاهر و مبتنی بر API لازم است.
همچنین برای پروژه های فقط محتوا، مانند وبلاگ ها و وب سایت های تجاری، به دلیل توانایی آن در ساخت صفحات HTML ایستا مناسب است.
با نسخههای فعلی، Next.js نه تنها سطح بالایی از تجربه توسعهدهنده را حفظ میکند، بلکه ابزارهایی برای افزایش عملکرد بصری و تجربه کاربر ارائه میدهد و آینده روشنی را برای این چارچوب تضمین میکند.
پاسخ دهید