آموزش Next.js — مجموعه مقالات مجله فرادرس
Next.js یک فریمورک React است که بهینهسازیهای مختلفی روی اپلیکیشنهای ریاکت اعمال میکند. ایده اصلی خلق چنین فریمورکی این بوده است که اطمینان یابیم اپلیکیشن ما با بالاترین عملکرد ممکن آغاز شده و باقی میماند. بهینهسازیهای زیادی وجود دارند که میتوان به اپلیکیشنهای ریاکت اضافه کرد و اغلب آنها از سوی Next.js ارائه میشوند. در این مقاله به جمعبندی مقالات آموزش Next.js مجله فرادرس پرداختهایم.
تفاوت Next.js و React چیست؟
ریاکت یک کتابخانه است که ساخت اینترفیسها با استفاده از رویکردی مبتنی بر کامپوننت را تسهیل میکند. با این که ریاکت قدرتمند است، اما صرفاً یک کتابخانه UI محسوب میشود. بسیاری از توسعهدهندگان ابزارهای دیگری مانند module bundler (برای مثال وب پک) و یا یک transpiler (برای مثال Babel) را برای اعمال این بهینهسازیها استفاده میکنند.
اغلب برنامه نویسان از اسکریپت Create React App برای ایجاد اپلیکیشنها استفاده میکنند که موجب افزایش سرعت توسعه کد میشود. با این که بهینهسازیهای مختلفی در این اسکریپت اعمال شده است، اما هدف اصلی آن ارائه یک راهاندازی ساده و سرراست و نه کدنویسی بهینه است.
میتوان از Next.js برای ساخت اپلیکیشنهای ریاکت استفاده کرد و بدین ترتیب بیدرنگ بهینهسازیهای مختلفی در اختیار ما قرار میگیرد که اجرای تکتک آنها کار دشواری محسوب میشود. از جمله این موارد شامل فهرست زیر است:
- رندرینگ سمت سرور
- افراز خودکار کد
- پیشواکشی مسیر
- مسیریابی فایل سیستم
- استایلبندی CSS-in-JS
ما در مجله فرادرس همه این موارد را تا حد امکان در یک سری مقالات آموزشی ارائه کردهایم که فهرست و خلاصهای از هر مقاله را میتوانید در ادامه مشاهده کنید.
در اولین بخش از سری مقالات آموزش Next.js ابتدا معرفی مختصری از این فریمورک ارائه کردهایم. سپس قابلیتهای اصلی آن فهرست شدهاند. همچنین آن را با Gatsby و create-react-app مقایسه کرده و مزیتهایش را برشمردهایم. در ادامه یک مثال عملی مطرح شده و قابلیت رندرینگ سمت سرور عملاً مورد بررسی قرار گرفته است.
در بخش دوم سری مقالات آموزش Next.js ابتدا مفهوم Bundle-های اپلیکیشن بررسی شده است. سپس یک اکستنشن به نام ابزارهای توسعهدهنده ریاکت برای دو مرورگر کروم و فایرفاکس معرفی شده است که کمک زیادی به توسعه اپلیکیشنهای نکست میکند. همچنین برخی تکنیکهای دیگر دیباگ مورد بررسی قرار گرفته است و روش افزودن صفحههای دیگر به وبسایت و لینک کردن دو صفحه به هم معرفی شده است.
در این بخش از سری مقالات آموزش Next.js با مفاهیم محتوای دینامیک و پیشواکشی در Next.js آشنا خواهیم شد. بدین ترتیب با پیگیری نمونه اپلیکیشنی که در بخشهای قبل ساختیم، شیوه لینک کردن صفحه اصلی به صفحه بلاگ را فرامیگیریم. بلاگ یکی از کاربردهای عمده Next.js است که با بررسی شیوه افزودن نوشتههای بلاگ در ادامه این سری مقالات آموزشی در مورد آن بیشتر صحبت شده است.
برای استایلدهی به کامپوننتهای Next.js آزادی عمل زیادی داریم، زیرا میتوانیم از هر کتابخانهای که دوست داریم استفاده کنیم، اما Next.js یک کتابخانه داخلی به نام styled-jsx دارد که از سوی همان تیم توسعه فریمورک Next طراحی شده است. در این بخش از سری مقالات آموزش Next.js به بررسی شیوه استایلدهی به کامپوننتهای Next صحبت شده است. در این مسیر با شیوه استفاده از CSS و مسیرهای API در Next.js نیز آشنا میشویم.
انتشار یک اپلیکیشن Next.js کار بسیار آسانی است. آخرین بخش هر راهنمای نرمافزاری به انتشار اپلیکیشن اختصاص دارد و از این رو در این بخش پایانی سری مقالات آموزش نکست در مورد انتشار نسخه پروداکشن اپلیکیشن در Next.js صحبت میکنیم. همچنین با روش تحلیل باندلهای اپلیکیشن و بهینهسازی حجم آنها آشنا خواهیم شد.
سخن پایانی
همچنان که اشاره کردیم Next.js یک فریمورک React است، یعنی فریمورکی است که بر پایه فریمورک دیگری بنا شده است. دلیل علاقهمندی توسعهدهندگان وب به Next.js این است که یک محیط بوتاسترپ شده ریاکت در اختیار آنها قرار میدهد و از این رو مشابه create-react-app است. Next.js ساده است، و برای کدنویسی بکاند از مسیریابی مبتنی بر فایل استفاده میکند. همچنین هنگام استفاده از Next.js در مقایسه با سایتهای کاملاً استاتیک، محدودیتهای کمتری در پیادهسازی اپلیکیشن یا سایت وجود دارد.
اگر این مطلب برای شما مناسب بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای برنامهنویسی
- آموزش JavaScript ES6 (جاوا اسکریپت)
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- راهنمای جامع React (بخش اول) — از صفر تا صد
- آموزش Node.js: مفاهیم مقدماتی — بخش اول
==