تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

    Next.js چیست؟


    ۱۴ مرداد ۱۳۹۹
    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 آن را اجرا کنید. نتیجه باید مشابه تصویر زیر باشد:

    خروجی برنامه nextjs در لوکال

    بسیار عالی! حالا زمان استقرار این برنامه بر روی لیارا فرا رسیده است. می‌توانید همین مثال، یا کد خودتان را بر روی لیارا مستقر کنید. برای این کار (اگر در لیارا ثبت‌نام نکرده‌اید به این لینک مراجعه کنید) ابتدا از قسمت برنامه‌ها در داشبورد لیارا، اقدام به ایجاد یک برنامه NodeJS، با شناسه دلخواه‌تان و منابع مورد نیازتان کنید:

    ایجاد یک برنامه برای پروژه nextjs در لیارا

    در ادامه، همانطور که در صفحه راهنما‌ی برنامه مشاهده خواهید کرد، ابتدا باید ابزار CLI لیارا را بر روی سیستم‌تان نصب کنید. برای این کار از دستور زیر استفاده کنید:

    npm install -g @liara/cli

    در مرحله بعد باید توسط CLI لیارا، به حساب کاربری خود وارد شوید:

    liara login

    بعد از ورود ایمیل و رمز عبور، همه چیز برای استقرار برنامه‌تان بر روی لیارا آماده خواهد بود. برای این کار هم به ریشه برنامه NextJS بروید (در این مثال ریشه برنامه داخل پوشه‌ای است که از ریپازیتوری NextJS دانلود کردیم) و دستور liara deploy را وارد کنید:

    اسقرار برنامه nextjs توسط دستور liara deploy

    بعد از انتخاب برنامه‌تان و تنظیم پورت، استقرار برنامه آغاز می‌شود. در نهایت باید با خروجی‌ای مانند تصویر زیر، در خط فرمان خود مواجه شوید:

    نتیجه دستور liara deploy

    اگر با عملیات استقرار با موفقیت خاتمه نیافت و یا در طول استقرار با هر گونه خطایی مواجه شدید، می‌توانید در قسمت تیکت‌ها، در داشبورد لیارا، مشکل‌تان را با پشتیبانی لیارا در میان بگذارید.

    همانطور که در خروجی خط فرمان مشاهده می‌کنید، باید با وارد کردن آدرس برنامه‌تان، که شامل شناسه برنامه‌تان + .liara.run است، خروجی برنامه را مشاهده کنید. در این مقاله شناسه برنامه ما my-nextjs است که در واقع آدرس برنامه https://my-nextjs.liara.run خواهد بود و خروجی در مرورگر مانند تصویر زیر خواهد بود:

    نتیجه استقرار برنامه nextjs در لیارا

    بسیار عالی! در صورت نیاز به اطلاعات بیشتر در رابطه با سرویس ابری لیارا و یا مستندات برنامه‌های NodeJS، می‌توانید به صفحه مستندات لیارا مراجعه کنید.

    برچسب‌ها:

    خدمات رایگان لیارا

    ۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

    ۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

    هاست رایگان برای دیتابیس‌

    دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

    سرویس DNS رایگان

    به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

    ۱۰۰ هزار تومان اعتبار اولیه

    بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

    ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

    در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

    هاست رایگان برای انواع وبسایت

    تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

    توسعه‌دهندگان درباره‌ی ما چه می‌گویند

    تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
    ...

    MohammadReza
    liara testimonial
    keikaavousi

    بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

    jadi
    liara testimonial
    jadi

    یه خسته نباشید باید به تصمیمliara_cloud@بگم،
    بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
    دمتون گرم.

    Arch
    liara testimonial
    EbadiDev

    واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
    ...

    Ali Najafi
    liara testimonial
    me_ali_najafi

    یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

    Navid
    liara testimonial
    1navid

    عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

    Amir H Shekari
    liara testimonial
    vanenshi

    همراه شما هستیم

    در خصوص سفارش یا استفاده از سرویس‌ها سوالی دارید؟
    تلفن واحد فروش:
    ۰۲۵-۳۳۵۵۷۶۱۹ (روزهای کاری ۹ الی ۱۷)
    تلفن واحد فروش: ۳۳۵۵۷۶۱۹-۰۲۵ (روزهای کاری ۹ الی ۱۷)