next.js چیست و چگونه می‌توان آن را دیباگ کرد

آفلاین
user-avatar
عرفان حشمتی
08 دی 1399, خواندن در 4 دقیقه

next.js چیست ؟ next.js به توسعه دهندگان اجازه می‌دهد تا وبسایت‌های سمت سرور، سمت کلاینت یا استاتیک (ایستا) ایجاد کنند. برخلاف سایر فریمورک‌ها، رندرینگ در Next JS در هر صفحه انجام می‌شود. این بدان معناست که صفحه "درباره ما" می‌تواند ایستا باشد، در حالی که صفحه "خانه" می‌تواند در سمت سرور پردازش شود.

این یک فریمورک شگفت انگیز React می‌باشد که توسط Vercel ایجاد شده است. next.js در حال بهبود است که مورد علاقه اکثر توسعه دهندگان قرار گرفته است.

محیط توسعه

این مقاله روند دیباگ کردن با استفاده از Visual Studio Code را پوشش می‌دهد. شما می‌توانید از دستورات مشابه در IDE های دیگر استفاده کنید، اما باید آنها را در قالب خاصی بنویسید.

برای سادگی ما از این repo برای نشان دادن روند دیباگینگ استفاده خواهیم کرد. بنابراین، پیش بروید و آن را بر روی سیستم خود انجام دهید، از طریق دستور yarn آن را نصب کرده و در Visual Studio Code باز کنید.

دیباگ کردن next.js

یک صفحه next.js دارای دو قسمت است: یک قسمت سمت سرور و قسمت دیگر سمت کلاینت. برای رفع اشکال در هر دو قسمت به دو فرایند راه‌اندازی VSCode نیاز دارید. بیایید آن‌ها را بررسی کنیم.

دیباگ کردن سمت سرور

کد سمت سرور با متد getServerSideProps کار می‌کند و هر زمان درخواستی وجود داشته باشد، اجرا می‌شود. برای رفع اشکال کد سمت سرور، باید یک فرایند راه‌اندازی VSCode جدید اضافه کنیم. ابتدا یک پوشه vscode. در روت پروژه ایجاد کنید و سپس در داخل آن پوشه یک فایل launch.json بسازید. ما کدهای اجرای خود را در اینجا اضافه خواهیم کرد.

در داخل فایل launch.json پیکربندی جدید "Node: Launch Program" را قرار دهید. سپس باید تغییرات زیر را اضافه کنید:

  • ویژگی skipFiles را حذف کنید
  • ویژگی program را حذف کنید
  • با استفاده از مقدار {workspaceFolder}/node_modules/.bin/next$ ویژگی دیگری از زمان اجرا را اضافه کنید

فایل launch.json شما باید به این شکل باشد:

{
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next"
        }
    ]
}

اکنون فایل pages/[owner]/[repo].tsx/ را باز کنید. یک breakpoint در خط 32 بگذارید و کلید F5 را فشار دهید. هنگامی که سرور next.js شروع به رفتن به http://localhost:3000 می‌کند، بر روی یکی از repo های لیست کلیک کنید. پس از کلیک کردن روی آن، باید breakpoint بگذارید. اکنون شما توانایی بررسی آرگومان ctx و داده‌های دریافت شده ازAPI گیت هاب را دارید.

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

برای رفع اشکال از طرف کلاینت ابتدا باید برنامه Debugger for Chrome را نصب کنید. لینک را باز کرده و روی دکمه Install کلیک کنید. از شما می‌خواهد لینک را در Visual Studio Code باز کنید، بنابراین روی دکمه "Open Visual Studio Code" کلیک کنید.

همانطور که در بالا ذکر شد، شما به دو فرایند راه‌اندازی نیاز خواهید داشت، بنابراین بیایید یک task در سمت کلاینت ایجاد کنیم. به start.json بروید و یک تسک جدید "Chrome: Launch" اضافه کنید. سپس فقط باید تغییر زیر را ایجاد کنید:

  • مقدار url را به http://localhost:3000 تغییر دهید.

فایل کامل launch.json شما باید به این شکل باشد:

{
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next"
        }
    ]
}

اکنون فایل pages/index.tsx/ را باز کرده و یک breakpoint در خط 9 بگذارید. حال می‌توانید تسک Launch Chrome را از صفحه دیباگ راه‌اندازی کنید. تسک Launch Chrome باید یک پنجره جدید Chrome در صفحه اصلی باز کند. شروع به تایپ کردن در ورودی صفحه کنید و breakpoint را در فایل index.tsx قرار خواهید داد. اکنون شما توانایی بازرسی ویژگی‌های سمت کلاینت را دارید، مانند متغیر repo.

continue را بزنید و حرف دیگری را تایپ کنید. هر بار که چیزی را در ورودی تایپ کنید، breakpoint را خواهید زد. برای دیدن تغییر مقدار، روی متغیر repo بروید. اکنون در حال رفع اشکال کد سمت کلاینت هستید!

جمع بندی

حالا می‌دانید که چگونه هر دو طرف را در یک برنامه next.js دیباگ کنید. کد سمت سرور node است، بنابراین شما برای آن نیاز به یک تسک رفع اشکال Node دارید. سمت کلاینت Chrome است، بنابراین برای آن به یک تسک رفع اشکال Chrome نیاز دارید.

در نظر داشته باشید که دیباگینگ یک فرایند حیاتی در مهندسی نرم‌افزار است، بنابراین از آن در هر کجا که می‌توانید استفاده کنید. دقت داشته باشید که برای رفع اشکال فقط از console.log استفاده نکنید. ما در این مطلب به بررسی اینکه next.js چیست پرداختیم و پس از  توضیح اینکه next.js چیست به نحوه دیباگ آن پرداختیم.

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
عرفان حشمتی @heshmati74
مهندس معماری سیستم های کامپیوتری، طراح و توسعه دهنده وب سایت
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو