Next.js چیست و چگونه آن را روی سرور اجرا کنیم؟

Next.js یک فریم‌ورک بر اساس React است که قابلیت‌های زیادی به جهت توسعه برنامه‌های گوناگون برای پلتفرم‌های مختلف، نظیر ویندوز، لینوکس و mac دارد. اگر تا حدودی با React آشنا و به دنبال این هستید که بیشتر و بیشتر با React و نحوه کار آن آشنا شوید، پس حتما باید با فریم‌ورک Next.js کار کنید. در این مقاله به صورت خلاصه با Next.js آشنا می‌شوید.مقدمهNext.js بر اساس React، webpack و babel ساخته شده است. ابزاری فوق‌العاده برای ساخت برنامه‌های وب است، همچنین در دسته server-side rendering نیز بسیار محبوب است. Next.js توسط Zeit ساخته شده است. توسعه‌دهندگان با دانشی از HTML، CSS، جاوااسکریپت و React به سادگی می‌توانند Next.js را فرا بگیرند و به آن مهاجرت کنند.قابلیت‌های Next.jsHot Code Reloading: به صورت خودکار و در صورتی که تغییرات جدید ذخیره شوند، برنامه را مجددا بارگذاری می‌کند.Automatic Code Splitting: با استفاده از این قابلیت، هر import در کد به باندلی تبدیل می‌شود و توسط هر صفحه، ارائه می‌شود. این بدان معنی است که کد‌های غیر ضروری هیچ‌گاه در صفحه لود نخواهند شد.Ecosystem Compatibility: با جاوااسکریپت، NodeJS و React سازگار است.Server Rendering: به سادگی و قبل از ارسال HTML به سمت کلاینت، می‌توان کامپوننت‌های React را در سمت سرور، رندر کرد.Styled-JSX: این اجازه را به شما می‌دهد تا مستقیما کد‌های CSS را در کد جاوااسکریپت بنویسید.مثال:function Home() { return ( <div className=&quotcontainer&quot> <p>Hello Geeks</p> <style jsx>{` .container { margin: 50px; } p { color: blue; } `}</style> </div> ) } export default Homeنصب و اجرا Next.jsبرای نصب Next.js، به npm ،node و create-next-app نیاز داریم، می‌توانید برای نصب node، به وبسایت NodeJS مراجعه و آن را دانلود و نصب کنید و توسط دستورات زیر از صحت نصب، اطلاع پیدا کنید:node -v npm -vهمچنین برای نصب create-next-app و اطمینان از صحت نصب آن، از دستورات زیر استفاده کنید (با create-next-app می‌توانید یک برنامه Next.js را توسط یک دستور ایجاد کنید):npm install --global @create-next-app/core npx create-next-app -Vدر این مقاله قصد داریم از مثال‌های موجود در ریپازیتوری Next.js استفاده کنیم و بعد از اجرای یکی آن‌ها به صورت لوکال، آن را بر روی لیارا مستقر کنیم. همچنین می‌توانید از این مثال استفاده نکنید و کد خودتان را بنویسید و در نهایت آن را بر روی یک سرویس ابری، نظیر لیارا، مستقر کنید. مثال مورد استفاده ما، blog-starter است که با دستور زیر آن را دانلود می‌کنیم:npx create-next-app --example blog-starter blog-starter-appبعد از این مرحله، نیاز است تا وابستگی‌های این مثال را دانلود و نصب کنیم. وارد پوشه دانلود شده شوید و دستور زیر را وارد کنید:npm installاکنون تمام وابستگی‌ها نصب شده‌اند و می‌توانید توسط دستور npm run dev آن را اجرا کنید. نتیجه باید مشابه تصویر زیر باشد:بسیار عالی! حالا زمان استقرار این برنامه بر روی سرور فرا رسیده است. می‌توانید همین مثال، یا کد خودتان را بر روی سرور‌های لیارا مستقر کنید. برای این کار (اگر در لیارا ثبت‌نام نکرده‌اید به این لینک مراجعه کنید) ابتدا از قسمت برنامه‌ها در داشبورد لیارا، اقدام به ایجاد یک برنامه NodeJS، با شناسه دلخواه‌تان و منابع مورد نیازتان کنید:در ادامه، همانطور که در صفحه راهنما‌ی برنامه مشاهده خواهید کرد، ابتدا باید ابزار CLI لیارا را بر روی سیستم‌تان نصب کنید. برای این کار از دستور زیر استفاده کنید:npm install -g @liara/cliدر مرحله بعد باید توسط CLI لیارا، به حساب کاربری خود وارد شوید:liara loginبعد از ورود ایمیل و رمز عبور، همه چیز برای استقرار برنامه‌تان بر روی لیارا آماده خواهد بود. برای این کار هم به ریشه برنامه NextJS بروید (در این مثال ریشه برنامه داخل پوشه‌ای است که از ریپازیتوری NextJS دانلود کردیم) و دستور liara deploy را وارد کنید:بعد از انتخاب برنامه‌تان و تنظیم پورت، استقرار برنامه آغاز می‌شود. در نهایت باید با خروجی‌ای مانند تصویر زیر، در خط فرمان خود مواجه شوید:اگر با عملیات استقرار با موفقیت خاتمه نیافت و یا در طول استقرار با هر گونه خطایی مواجه شدید، می‌توانید در قسمت تیکت‌ها، در داشبورد لیارا، مشکل‌تان را با پشتیبانی لیارا در میان بگذارید.همانطور که در خروجی خط فرمان مشاهده می‌کنید، باید با وارد کردن آدرس برنامه‌تان، که شامل شناسه برنامه‌تان + .liara.run است، خروجی برنامه را مشاهده کنید. در این مقاله شناسه برنامه ما my-nextjs است که در واقع آدرس برنامه https://my-nextjs.liara.run خواهد بود و خروجی در مرورگر مانند تصویر زیر خواهد بود:سیار عالی! در صورت نیاز به اطلاعات بیشتر در رابطه با سرویس ابری لیارا و یا مستندات برنامه‌های NodeJS، می‌توانید به صفحه مستندات لیارا مراجعه کنید.بازنشر شده مقاله Next.js چیست؟ از وبلاگ سرویس ابری لیارا