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

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 چیست به نحوه دیباگ آن پرداختیم.

منبع