برنامه‌های Next.js

ساخت، استقرار و اجرای یک برنامه Next

در این راهنما نحوه‌ی اجرای یک برنامه Next را در فینگ یاد خواهیم گرفت.

برنامه hello-next

می‌توانیم با استفاده از دستور create-next-app یک برنامه‌ی Next.js ایجاد کنیم تا به‌طور خودکار همه چیز را برای ما تنظیم کند.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

• اگر می‌خواهیم پروژه‌ی ما تایپ اسکریپت باشد پرچم --typescript را به آخر دستور خود اضافه می‌کنیم.

• با اجرای دستور بالا، به طور پیش فرض کتابخانه‌های react، next و react-dom در پروژه‌ی ما نصب خواهد شد.

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
}

• همچنین با اجرای دستور بالا، یک پروژه‌ی next با تنظیمات پیش فرض ایجاد شده که دارای پوشه و فایل pages/index.js می‌باشد:

// index.js
function HomePage() {
  return <div>Welcome to Next.js!</div>;
}

export default HomePage;

اجرای برنامه

برای اجرای برنامه، با توجه به هر یک از دستورهایی که به وسیله‌ی آن پروژه نکست خود را ایجاد کرده باشیم، برنامه را با دستور npm run dev یا yarn dev و یا با دستور pnpm dev اجرا می‌کنیم.

$ yarn dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

اکنون http://localhost:3000 را در مرورگر خود باز کرده تا مطمئن شویم برنامه next ما کار می‌کند.

• بعداز اجرای موفقیت آمیز برنامه، اکنون می‌توانیم آن را جهت استقرار بر روی سرویس ابری فینگ آماده کنیم.

استقرار برنامه next در فینگ

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

ایجاد فایل fing.yaml

در ریشه اصلی پروژه خود، فایلی را با نام fing.yaml ایجاد می‌کنیم و اطلاعات پایه‌ای برنامه‌ی خود را در آن قرار می‌دهیم. که می‌توان نام برنامه، پلتفرمی که از آن استفاده می‌کنیم و همچنین پورتی که برنامه‌ی ما بر روی آن listen می‌کند را مشخص کنیم.

# fing.yaml
app: "hello-next"
platform: "next"
port: 3000

نصب فینگ cli و ورود به آن

برنامه‌ی next ما آماده‌ی استقرار بر روی سکوی ابری فینگ می‌باشد و این بدین معناست که ما برای مدیریت برنامه‌های خود به فینگ cli نیاز داریم. اگر هنوز آن را نصب نکرده‌اید به راهنمای نصب ما بروید و بعد از نصب، وارد حساب خود شوید.

دستور استقرار

بعد از ورود به حساب خود در فینگ CLI، در مسیر اصلی پروژه‌ی خود دستور زیر را وارد می‌کنیم تا اولین استقرار انجام شود:

$ fing up

مشاهده خروجی

بعد از انجام مراحل قبلی و اولین استقرار، فینگ برای برنامه‌ی ما زیر دامنه‌ای اختصاص می‌دهد که می‌توانیم از طریق آن از صحت استقرار برنامه خود در سرویس ابری فینگ مطمئن شویم.

زیر دامنه‌ی ما به این صورت خواهد بود: https://hello-next.onfing.ir