update paas/nextjs

liara-cloud · Jun 5, 2024 · 38be9fa · 38be9fa
1 parent b55f2b7
commit 38be9fa
Show file tree

Hide file tree

Showing 8 changed files with 303 additions and 336 deletions.
diff --git a/src/components/Sidebar/data.js b/src/components/Sidebar/data.js
@@ -507,14 +507,14 @@ export default {
         title: "راه‌اندازی برنامه Websocket",
         link: "/paas/nextjs/how-tos/use-websocket"
       },
-      {
-        title: "build برنامه با ES6",
-        link: "/paas/nextjs/how-tos/build-and-use-es6"
-      },
       {
         title: "استفاده از TypeScript",
         link: "/paas/nextjs/how-tos/use-type-script"
       },
+      {
+        title: "build برنامه با ES6",
+        link: "/paas/nextjs/how-tos/build-and-use-es6"
+      },
       {
         title: "استفاده از Hookها",
         link: "/paas/nextjs/how-tos/use-hooks"

diff --git a/src/pages/paas/nextjs/how-tos/create-app.mdx b/src/pages/paas/nextjs/how-tos/create-app.mdx
@@ -13,21 +13,21 @@ import NextPage from "@/components/Common/nextpage";
 
 
 <Layout>
-# ساخت برنامه NodeJS در لیارا
+# ساخت برنامه NextJS در لیارا
 
 <Tabs 
     tabs={["Liara CLI", "Liara Console"]} 
     content={[
     <>
     <video
-        src="https://files.liara.ir/liara/nodejs/nodejs-cli.mp4"
+        src="https://files.liara.ir/liara/nextjs/nextjs-cli.mp4"
         controls="controls"
         className="block w-full"
         width="100%"
     ></video>
-    <br />
+    <div className="h-2" />
     <p>
-        برای ساخت برنامه در لیارا باید در ابتدا با اجرای دستور زیر، ابزار Liara CLI را بر روی سیستم‌عامل خود، نصب کنید:
+        برای ساخت برنامه در لیارا باید در ابتدا با اجرای دستور زیر، ابزار <Link href="../../../../references/liara-cli/about" className="blue-link">Liara CLI</Link> را بر روی سیستم‌عامل خود، نصب کنید:
     </p>
     <div dir='ltr'>
       <Highlight className="bash">
@@ -39,6 +39,7 @@ import NextPage from "@/components/Common/nextpage";
         در نظر داشته باشید برای اینکه بتوانید این ابزار را بر روی سیستم خود نصب و از آن استفاده کنید، باید npm و NodeJS بر روی سیستم‌عامل شما نصب باشد.
         کافیست تا به <Link className="blue-link" href="https://nodejs.org">وب‌سایت رسمی NodeJS</Link> مراجعه کنید و با دانلود و نصب آخرین نسخه NodeJS LTS، ابزار npm و NodeJS برای شما نصب می‌شود.
     </p>
+    <div className="h-2" />
     <p>    
         در ادامه، بایستی با اجرای دستور زیر، وارد حساب کاربری خود در لیارا شوید:
     </p>
@@ -67,42 +68,41 @@ import NextPage from "@/components/Common/nextpage";
       </Highlight>
     </div>
     <p>
-        با اجرای دستور فوق، شما باید شناسه، شبکه خصوصی و <Link className="blue-link" href="../../details/plans/about">پلن‌های نرم‌افزاری و سخت‌افزاری</Link> برنامه خود را انتخاب کنید.
+        با اجرای دستور فوق، شما باید شناسه، نوع پلتفرم (که باید بر روی next باشد)، شبکه خصوصی و <Link className="blue-link" href="../../details/plans/about">پلن‌های نرم‌افزاری و سخت‌افزاری</Link> برنامه خود را انتخاب کنید.
     </p>
     </>,
     <>
         <video
-        src="https://files.liara.ir/liara/nodejs/nodejs-desktop.mp4"
+        src="https://files.liara.ir/liara/nextjs/nextjs-desktop.mp4"
         controls="controls"
         className="block w-full"
         width="100%"
         ></video>
-        <br />
+        <div className="h-2" />
         <p>
-            برای ساخت برنامه، کافیست تا پس از ورود به <Link className="blue-link" href="https://console.liara.ir">پنل کاربری</Link> وارد منوی <Link className="blue-link" href="https://console.liara.ir/apps">پلتفرم</Link> شوید؛ بر روی گزینه <Link className="blue-link" href="https://console.liara.ir/apps/create">ایجاد برنامه</Link> کلیک کرده و پلتفرم را بر روی <b>NodeJS</b> تنظیم کنید.
+            برای ساخت برنامه، کافیست تا پس از ورود به <Link className="blue-link" href="https://console.liara.ir">پنل کاربری</Link> وارد منوی <Link className="blue-link" href="https://console.liara.ir/apps">پلتفرم</Link> شوید؛ بر روی گزینه <Link className="blue-link" href="https://console.liara.ir/apps/create">ایجاد برنامه</Link> کلیک کرده و پلتفرم را بر روی <b>NextJS</b> تنظیم کنید.
             در ادامه باید برای برنامه‌تان یک شناسه و یک <a className="blue-link" href="../../details/private-networks">شبکه خصوصی</a> انتخاب کنید و در نهایت <a className="blue-link" href="../../details/plans/about">پلن‌های نرم‌افزاری و سخت‌افزاری</a> مدنظرتان را انتخاب کنید. 
             در آخر، کافیست تا بر روی گزینه <b>ایجاد برنامه</b> کلیک کنید تا برنامه‌تان ساخته شود:
         </p>
-        <img src="https://files.liara.ir/liara/docs/create-app-using-console.gif" alt="create app using console" />
+        <img src="https://files.liara.ir/liara/docs/how-to-create-a-nextjs-app.gif" alt="create app using console" />
         <div className="h-4" />
-        <p>شناسه‌ای که برای برنامه خود انتخاب می‌کنید باید یکتا باشد، پس از ساخت برنامه، شما می‌توانید با استفاده از شناسه و پسوند <Important>liara.run.</Important> به برنامه خود، دسترسی داشته باشید؛ به عنوان مثال، اگر شناسه برنامه‌تان را <Important>my-web-app</Important> انتخاب کنید؛ برنامه‌تان در آدرس زیر، قابل مشاهده و بررسی خواهد بود:</p>
-        <div className="h-2" />
-        <div dir='ltr'>
-            <Highlight className="bash">
-                {`https://my-web-app.liara.run`}
-            </Highlight>
-        </div>
-        <p>
-            در واقع، این همان <a className="blue-link" href="../../domains/default-subdomain.md">دامنه پیش‌فرضی</a> است که لیارا به صورت رایگان در اختیار شما قرار می‌دهد.
-        </p>
-        <p>
-            در نهایت، می‌توانید وضعیت برنامه خود را در <a className="blue-link" href="https://console.liara.ir">پنل کاربری</a> مشاهده بفرمایید که در حالت آماده به کار قرار دارد:
-        </p>
-        <img src="https://files.liara.ir/liara/docs/ready-to-use-app.png" alt="a ready to use nodejs app"/>
     </>
 ]} 
 />
 
+<p>شناسه‌ای که برای برنامه خود انتخاب می‌کنید باید یکتا باشد، پس از ساخت برنامه، شما می‌توانید با استفاده از شناسه و پسوند <Important>liara.run.</Important> به برنامه خود، دسترسی داشته باشید؛ به عنوان مثال، اگر شناسه برنامه‌تان را <Important>my-web-app</Important> انتخاب کنید؛ برنامه‌تان در آدرس زیر، قابل مشاهده و بررسی خواهد بود:</p>
+<div className="h-2" />
+<div dir='ltr'>
+    <Highlight className="bash">
+        {`https://my-web-app.liara.run`}
+    </Highlight>
+</div>
+<p>
+    در واقع، این همان <a className="blue-link" href="../../domains/default-subdomain.md">دامنه پیش‌فرضی</a> است که لیارا به صورت رایگان در اختیار شما قرار می‌دهد.
+    در نهایت، می‌توانید وضعیت برنامه خود را در <a className="blue-link" href="https://console.liara.ir">پنل کاربری</a> مشاهده بفرمایید که در حالت آماده به کار قرار دارد:
+</p>
+<img src="https://files.liara.ir/liara/docs/created-nextjs-app.png" alt="a ready to use nodejs app"/>
+<div className="h-2" />
 <Alert variant="success">همچنین بخوانید: <a className="blue-link" href="../../details/about">آشنایی با ویژگی‌های یک برنامه</a></Alert>
 <Alert variant="success">همچنین بخوانید: <a className="blue-link" href="../../domains/about">اضافه کردن دامنه به برنامه</a></Alert>