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.js

• Hot Code Reloading: به صورت خودکار و در صورتی که تغییرهای جدید ذخیره شوند، برنامه را مجددا بارگذاری می‌کند.
• Automatic Code Splitting: با استفاده از این قابلیت، هر import در کد به باندلی تبدیل می‌شود و توسط هر صفحه، ارائه می‌شود. این بدان معنی است که کد‌های غیر ضروری هیچ‌گاه در صفحه لود نخواهند شد.
• Ecosystem Compatibility: با جاوااسکریپت، NodeJS و React سازگار است.
• Server Rendering: به سادگی و قبل از ارسال HTML به سمت کلاینت، می‌توان کامپوننت‌های React را در سمت سرور، رندر کرد.
• Styled-JSX: این اجازه را به شما می‌دهد تا مستقیما کد‌های CSS را در کد جاوااسکریپت بنویسید.

مثال:

function Home() { 
    return ( 
        <div className="container"> 
        <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، می‌توانید به صفحه مستندات لیارا مراجعه کنید.