غول بزرگ وارد مرحله دوازدهم شد (بررسی Next.js 12)

درود، این اولین مطلب من در سایت ویرگول هست که مینویسم و به دلیل مشغله کاری خیلی کم با مقوله وبلاگ نویسی آشنا هستم پس امیدوارم همه خوششون بیاد!

امروز از شدت هیجان و کنجکاوی زیاد رفتم next.js conf رو بررسی کردم، آخه شب معرفی فقط تونستم قسمتهایی از معرفی next12 ببینم . از امکانات جدید next.js هیجان زده شدم، فکر نمیکردم تغییرات خیلی مهمی رو بتونم ببینم با اینکه منتظر بودم و دائم به این فکر میکردم که یعنی چه تغییراتی میتونه داشته باشه؟ و مثل دفعات قبل vercel غافلگیرم کرد.

خوب بهتره برم سر اصل مطلب، بخش های مهم معرفی next.js 12 شامل بخش های زیر میشه که می خوام هر کدوم رو بررسی کنم (البته در حد قابل فهم بودن مطالب)

1. افزایش سرعت Build و Hot Relode با استفاده از کامایلر Rust
2. اضافه شدن middleware ها
3. پشتیبانی از React 18
4. افزودن قابلیت React Server Component (خیلی باهاش حال می کنم)
5. پشتیبانی از فرمت عکس AVIF
6. اومدن Fallback به صفحات ISR
7. پشتیبانی از ES MODULES و URL Import
   

افزایش سرعت Build و Hot Relode با استفاده از کامایلر Rust

خوب همون طور که شنیده بودیم و شایعه ای ایجاد شده بود vercel برای کامپایل صفحات بالاخره ترجیح داد که SWC رو جایگزین Babel کنه و طبق گفته خودشون تمرکز کردند روی سرعت باندل

حالا چه مزیتی داره این swc ؟ خوب اولین مشکلی که داشتیم برای Hot Relode این بود که باید منتظر می نشستیم که صفحه کامپایل بشه چه بسا گاهی رفرش لازم هم می شدیم خوب swc سرعت کامپایل شدن صفحات رو در هنگام Hot Relode و هنگام Build گرفتن افزایش داده است.

طبق این آمار سرعت Hot Relode صفحه 3 برابر و سرعت Build به 5 برابر افزایش پیدا کرده است. که این افزایش سرعت با استفاده از کد بیس های بزرگ ، بهبود Performance ،تغییرات اساسی در Webpack انجام شده است.

ولی یک مشکلی! خوب حالا که Babel نیست من که از Emotion و Styled-component استفاده می کنم چکار کنم؟ خوب فعلا قابلیت پاسخگویی نداره (بد شد!) ولی اونقدر تغییرات زیاده و خوبه که میتونم فعلا از این قسمت چشم پوشی کنم! راه حل جایگزین برای این مورد استفاده از styled-jsx معرفی شده خود next.js هست که میتونه براحتی کامپایل بشه (من باهاش رابطه خوشایندی ندارم) ولی میتونی اینجا در مورد بخونید. هر چند اعلام کردند این مشکل بزودی برطرف میشه و گفته اند کانفیگ های babelrc رو برامون به اشتراک بزارید تا یک ساختار مناسب برای preset ها و plugin های Babel ارائه بدیم. اینجا میتونید کانفیگ های خودتون را به اشتراک بزارید.

یک امکان جالب دیگه که برای این بخش ارائه شده کوچک سازی (minify) کردن باندل با استفاده از SwcMinify هست که میتونید با قطعه کد زیر فعالش کنید.

این امکان بزودی جایگزین ساختار کلی فریمورک میشه.

// next.config.js
  module.exports = {
   swcMinify: true
}

معرفی Middleware ها

نیاز به این فیوچر زمانی مشخص شد که پیش خودم گفتم خوب چرا زمانی که سرور و کلاینت رو تعبیه کردن میان افزار براش نزاشتن ? که خب بالاخره این نیاز هم برطرف شد .

مثلا چه کارهایی میشه باهاش انجام داد؟

• می تونیم ip های کشور های مختلف رو هندل کنیم یا بلاک کنیم: فرض کنیم فروشگاهی داریم که هم قیمت ها به ریال هست هم به دلار تصمیم می گیریم اونایی که ip خارج از ایران دارند قیمت ها به صورت دلار بهشون نشون داده بشه
• یکی دیگه از middleware های اشاره شده در این قسمت A/B Testing هست: که با استفاده از اون می تونیم چند حالت مختلف رو برای هر صفحه بزاریم (مثالی پیدا نکردم اگه چیزی مدنظر دارید توی نظرات بگید)
• مورد بعدی از Middlewareها Custom Headers هست به نظرتون به چه دردی میخوره؟ خب من یه مشکلی که با بچه های بکند Python داشتم وقتی ارور سمت من میفرستادن Status کد رو مثلا 401 ,402 میفرستادن خب حالا با این قابلیت من میتونم response Header دریافتی رو به کد مورد نظر خودم تغییر بدم و پیام مربوط به اون کد رو شخصی سازی کنم.
• یکی دیگه Api Rate Limit (خوشم اومد ?) :کاربردش اینجوری هست که وقتی کلاینت درخواست میزنه اگه بیشتر از حد مجاز باشه در مدت زمان محدود اون ip رو بلاک میکنه و جلوگیری میکنه از درخواست بی مورد سمت سرور
• مورد بعدی Basic Auth Password Protection : دیدید گاهی وقتا یک لینکی رو بهمون میدن که Alert باز میشه و میگه Username , password رو بزنید ؟ این کارش دقیقا مثل اونه
• مورد بعدی Bot Protection with Botd هست: جلوگیری از robot ها برای خواندن اطلاعات و رسپانس ها (دقیق ازش اطلاعات ندارم ولی با CDN این کار را انجام میده)
• امکان جالب دیگه مدیریت CORS هست که این دفعه می تونیم سمت فرانت هم هندل کنیم.
• امکان بعدی Crypto هست : کارش ایجاد اعداد تصادفی بر اساس الگوریتم subtle هست به چه دردی میخوره میتونی باهاش پسورد تصادفی برای کاربر بسازی و بهش نشون بدی یا ازش برای encrypt,decrypt استفاده کنی
• یک امکان باحال به نام Apple Store : چطوری کار میکنه و اصلا چی هست را میتونم اینطوری شرح بدم که مثلا یک سایت فروشگاه داریم که طی ساعت خاصی فعالیت میکنه میتونیم متصل کنیم به یک Serverless Storage که صرفا vercel اشاره کرده به upstash که میتونیم یک Redis Storage داشته باشیم که با اون مدیریت باز یا بسته بودن فروشگاه را اداره کنیم.
• یکی دیگه از Middleware ها Geolocation Country Block هست که میتونیم بر اساس کشور کلاینت رو بلاک کنیم (من خوشم نمیاد چون نمونه بارزش ما ایرانی ها هستیم که باهاش میتونن راحت بلاکمون کنن ?)
• امکان خیلی خوب دیگه Hostname Rewrites Example هست: قبلا به مشکل خورده بودیم که بخواهیم برای هر کاربر یک ساب دامین اختصاصی داشته باشیم ولی حالا با این Middleware این مشکل سمت فرانت حل شد بدون نیاز به Backend .
• این امکان خوب هم برای سایت های Multi Language به نام i18n : میتونیم بر اساس لوکیشن کلاینت Locale اون منطقه رو انتخاب کنیم.
• تبدیل تصاویر png به blob با Image Response Example: اینو مثالش رو میزارم به عهده خوانندگان عزیز این مطلب تو نظرت بگید چون من اطلاعات خاصی در موردش ندارم
• ایجاد لیست شخصی ip black برای مدیریت آی پی ها با DataDome: کاربرد این فیوچر برای زمانی هست که ما تعدادی داده برای بلک لیست یا مدریت دسترسی ها داریم و می خواهیم عملیاتی را براشون انجام بدیم
• این امکان هم که از اسمش JSON Response Example هست : مشخص هست که json رو براتون parse میکنه
• بخش جالب ماجرا JWT Authentication هست که میتونید سمت فرانت هندل کنید یعنی احراز هویت بدون سمت بکند. (البته بنظرم برای احراز هویت راه بهتری هم هست ولی در کل میشه از jwt برای موارد غیر از لاگین رجیستر استفاده کرد)
• اتصال پروژه به builder.io : کارش چیه و چکار میکنه چیزی که متوجه شدم اینه که می تونید یک Landing Page درست کنید و به پروژه خودتون متصل کنید.
• توازن قیمتی با Power parity pricing strategies example : این به درد ما ایرانی ها میخوره نمونه اش اینه که شده برید یک سایت مثلا بگه چون ایرانی هستی یا چون دانشجو هستی روی محصولاتمون یک تخفیف بهت میدیم؟ اینو قضیه رو می تونیم باهاش هندل کنیم.
• این هم یک امکان دوست داشتنی دیگه هست به نام Filtering Query Parameters : میتونیم مشخص کنیم Query Parameter ها مجاز برای url چیه ؟ مثلا این کوئری hello=test؟ مجاز هست و این کوئری bye=test؟ مجاز نیست.

اگه امکانات دیگه هم بود توی نظرات بگید تا اینجا اضافه کنم.

حالا بعد از اینا چطوری Middleware ها پیاده سازی میشن؟

برای پیاده سازی یک Middleware حتما باید داخل دایرکتوری pages باشند و با کد زیر توی هر دایرکتوری می تونیم پیاده سازی کنید.

// pages/_middleware.js

export function middleware(req, ev) {
  return new Response('Hello, world!')
}

به اینکه توجه کنید که فایل middleware.js_ در داخل Route اصلی برای تمام Route ها اعمال میشه و همچنین توصیه شده از fetch api استفاده کنید.

پشتیبانی از React 18

بالاخره React 18 توسط next.js پشتیبانی شد و از این اتفاق خیلی خوشحالم حالا میتونید React.lazy و suspense هم در next.js داشته باشیم و بهمراه آن http streaming هم داشته باشیم .

قابلیت React Server Component

کلا این قسمت روحم رو جلا میده ! حالا مگه چیه هست این ؟ از وقتی با React-query کار میکنم دنیای کدنویسی برام عوض شده از بس اینکه React-query خوبه ولی یک سری مشکلات هم داره البته با قسمت server-side در next.js مثلا نمیتونی از هوک در قسمت سرور استفاده که همین باعث میشه هر دفعه در قسمت سرور از queryclient یک شی جدید بسازی و استفاده کنی و کلا این قضیه اش رو مخم بود ولی الان با این مشکلات خدافظی میکنم ? چرا ؟ چون تو ورژن 12 دیگه serverSideProps و getStaticProps فانکشن نیستن و میتونیم توی useEffect مدیریت کنیم مثل Create-React-App مزیتش چیه ؟ مزیتش اینه کامپوننت ها را هم میتونیم سمت سرور رندر کنیم. با استفاده از کد زیر این کار امکان پذیره

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
}

برای اینکه سمت سرور را پیاده سازی کنیم فقط باید هر فایلی که می خواهیم قابلیت سرور داشته باشه رو پسوند .server.js بزاریم مثلا index.server.js .
یک قابلیت فوق العاده دیگه هم به next.js 12 اضافه شده اونم Cache Data هست ، دقیقا کاری که React-query انجام میده البته اتوماتیک (در مورد این قسمت بعدا مطلبی می نویسم)

پشتیبانی از فرمت عکس AVIF

حجم عکس ها از اینی که هست هم کمتر میشه حتی کمتر از webp البته یک نکته هست که اطلاع داشته باشید لود عکس ها و فرمت اونا بر اساس ساپورت مرورگر هست. چرا پیاده سازی میشه؟

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

اومدن Fallback به صفحات ISR

یک امکانی برای بهینه لود شدن صفحات با استفاده از SSG هست به نام Incremental Static Regeneration که بر اساس درخواست کلاینت صفحات Build می شوند حالا این قابلیت به صفحات ISR هم اضافه شده (یکی از مطالب آینده من در مورد این قابلیت است)

پشتیبانی از ES MODULES و URL Import

این قابلیت به نوبه خود بی نظیره حالا از چه لحاظ ؟ اگه با typescript کار کرده باشید برای auto import ماژول ها قطعا به مشکل خورده اید، این مشکل از کجا آب میخورد ؟ از اونجایی که زیر ساخت next به صورت CommonJs استفاده میشد و نمیتونست ES Modules را پشتیبانی که به مشکلات مختلفی برخورد می کرد البته صرفا مخاطبان عزیز می دونن که ES Modules فقط برای این کار نیست، با این امکان next.js سریعتر و Minify تر میشه.

قابلیت مهم بعدی Url Import هست که در اصل به نظرم خط و نشانی برای Deno.js هست حالا با این قابلیت چکار میتونیم انجام بدیم؟ میتونیم به صورت Remote از CDN فایلها و کتابخانه دیگه استفاده کنیم

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

البته قبل از استفاده باید Register بشه به شکل زیر

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}

قابلیت های دیگر اضافه شده
Output File Tracking : این قابلیت بهتون اجازه میده فایل ها موقع Build شدن مستقل باشند که در زمان Deploy کردن مثلا داکر خیلی کمک میکنه

بهبود Fast Refresh: برای بهینه شدن برای Fast Refresh از این به بعد از Websocket استفاده میشه

تغییرات بدون نیاز به اجرای سرور: قبلا تغییرات در فایل های app.js_ , _documents.js باید یک بار سرور را Restart میکردیم که دیگر نیاز نیست.

لینتر : Eslint اکنون برای فایل های مجزا هم با --fliles قابل اجرا هست

نتیجه گیری:

تغییرات و فیوچرها های جدید به کلی خوب بودن و طبیعتا همراهشون باگ ها و مسائل جدیدی را ایجاد میکنند دنیای فرانت با next.js به نظرم خیلی زیباتر شده و همیشه هم قدم با React جلورفته و حتی در مباحثی مانند SSR به نظرم جلوتر از React پیشتاز بوده یادمون نره تیم قوی پشت next.js هست و قطعا در آینده حرف های بیشتر برای گفتن داره اگه از تغییرات جدید و تکنولوژی جدید استقبال نکنیم و پیشتاز نباشیم قطعا در آینده شکست می خوریم امیدوارم با این مطلب به کسایی که در این حوزه فعالیت می کنند کمک شایانی کرده باشم.

منبع : next.js

من را می تونید در لینکدین دنبال کنید و باعث انگیزه گرفتن من برای ادامه باشید...