آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین

قطعا کسانی که در بحث فرانت اند مشغول به کار هستند ، برای گرفتن دمو و نمونه از پروژه های Next  و React  خودشان با مشکلاتی روبرو هستند، زیرا متاسفانه در حال حاظر نمیتوان از گیت هاب دمو آنلاین برای پروژه های Next  و React دریافت کرد.

Vercel یک پلتفرم ابری است که به شما امکان می دهد تا برنامه های وب خود را به سرعت و به آسانی استقرار دهید. Vercel بر روی Next.js، یک چارچوب محبوب React، بنا شده است، اما می توانید از آن برای استقرار هر نوع برنامه وب استاتیک یا پویای دیگری نیز استفاده کنید.

دراین مقاله قصد داریم که نحوه گرفتن دمو آنلاین از پروژه های Next  و React  را آموزش دهیم.

ورسل (vercel) چیست؟

ورسل یک کمپانی امریکایی است که در سال 2015 تاسیس شده و خدمات فضای ابری را ارائه میدهد.

این سایت خدمات رایگان و اشتراکی را ارائه میدهد که ما از خدمات رایگان آن برای گرفتن دمو از پروژه هایمان استفاده میکنیم.

مزایای استفاده از Vercel:

• استقرار سریع و آسان: می توانید برنامه خود را با چند کلیک ساده در Vercel مستقر کنید.
• عملکرد بالا: Vercel برای ارائه عملکرد بالا طراحی شده است.
• مقیاس بندی: Vercel به راحتی می تواند با برنامه های بزرگ و پیچیده مقیاس بندی شود.
• امنیت: Vercel از زیرساخت های امن و قابل اعتماد AWS استفاده می کند.
• ویژگی های قدرتمند: Vercel شامل ویژگی های قدرتمندی مانند پیش نمایش، محیط های استقرار، و تجزیه و تحلیل است.

موارد استفاده از Vercel:

• استقرار وب سایت های استاتیک: Vercel برای استقرار وب سایت های استاتیک مانند وب سایت های شخصی، وب سایت های شرکتی و وبلاگ ها ایده آل است.
• استقرار برنامه های وب پویا: Vercel می تواند برای استقرار برنامه های وب پویا مانند برنامه های React، برنامه های Vue.js و برنامه های Svelte استفاده شود.
• استقرار API ها: Vercel می تواند برای استقرار API ها استفاده شود.
• استقرار صفحات وب: Vercel می تواند برای استقرار صفحات وب مانند صفحات فرود و صفحات محصول استفاده شود.

دلیل انتخاب این سایت اتصال راحت به GitHub  برای Manage کردن پروژه ها و رابط کاربری راحت و آسان آن میباشد.

نحوه ساخت اکانت در سایت vercel

• درمرحله اول وارد سایت Vercel.com  میشویم
• بر روی SingUp کلیک میکنید

در مرحله بعد بر روی hobby  کلیک میکنیم و اسم خود را وارد میکنیم:

در مرحله بعد بر رویwith GitHub  Continue کلیک میکنیم:

در این مرحله بعد از اتصال اکانت گیت هاب خود با استفاده از رمز و یا تایید دو مرحله ای وارد محیط زیر میشویم:

نحوه آپلود پروژه ریکت بر روی گیت هاب

• برای آپلود پروژه  reactبر روی گیت هاب که با استفاده ازvite  نصب شده است در ابتدا لازم است که با استفاده از دستور yarn dev  درCMD وارد محیطDevelop   شوید.

با اجرای دستور yarn run build و موفیقت امیز بودن کار (مانند عکس زیر) یک پوشه به نام dist ساخته شده خروجی پروژه ما میباشد.

حالا فایل های پروژه که در پوشه dist   وجود دارد را  به صورت معمول در گیت هاب اپلود میکنیم ( برای دیدن آموزش نحوه اپلود پروژه ها بروی گیت هاب از لینک آموزش کامل گیت و گیت هاب اقدام کنید)

نحوه گرفتن دمو از پروژه در سایت vercel

• وارد پنل کاربری خود در سایت vercel  شوید
• بر روی گزینه  (Add a repo from your Github) Import Project کلیک کنید.

بر روی ریپازیتوری اپلود شده کلیک کنید ( من برای مثال پروژه ی اسنپ خود را انتخاب میکنم)

دراین مرحله بر روی Name  کلیک کرده  و اسم پروژه خود را وارد میکنیم و در مرحله بعد بدون انجام تغییری در تنظیمات بر روی deploy  کلیک میکنید.

در این مرحله بر روی عکس پروژه خود کلیک میکنید:

• در صفحه باز شده شما پروژه خود را بر روی فضای ابری vercel  مشاهده میکنید
• برای استفاده از این فضای ابری بر روی قسمت url  سایت کلیک کرده و آن را کپی کرده و برای دمو های گیت هاب خود استفاده کنید.

حالا میتوانید با استفاده از روش بالا برای پروژه های خود دمو ساخته و آن را استفاده کنید.

خروجی گرفتن از پروژه های next.js

عموما پروژه های ما در نکست در دو حالت csr و ssg خروجی گرفته میشود.

خروجی گرفتن csr

ابتدا در فایل next.config.js کد زیر:

// next.config.js
module.exports = {
  output: 'export',
}

این کار باعث می‌شود که هنگام ساخت پروژه، به جای ساخت صفحات داینامیک، صفحات به صورت استاتیک (static) تولید شوند.

سپس در package.json کد زیر:

  "scripts": {
    "build": "next build",
    "export": "next export",
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint"
  },

سپس دستور npm run build را زده و پوشه out را در دایرکتوری خود مشاهده کنید.

خروجی گرفتن پروژه ssg

در SSG، صفحات در زمان build ساخته می‌شوند و در خروجی به صورت فایل‌های استاتیک (HTML, CSS, JS) ذخیره می‌شوند. Next.js به‌صورت پیش‌فرض، خروجی استاتیک نمی‌سازد. باید تنظیمات زیر را در فایل next.config.js اعمال کنید:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // این گزینه باعث تولید خروجی استاتیک می‌شود
};

module.exports = nextConfig;

بعد از اعمال تغییرات، باید پروژه را build و سپس export کنید:

npm run build
npm run export

پوشه‌ای به نام out/ ایجاد می‌شود. تمام صفحات به صورت HTML استاتیک ساخته می‌شوند و می‌توانید این پوشه را روی هاست‌های استاتیک مانند GitHub Pages, Vercel, Netlify آپلود کنید.

نکته مهم:

generateStaticParams در Next.js 15 برای تولید خروجی استاتیک از صفحات داینامیک استفاده می‌شود. اگر از output: ‘export’ استفاده کنید و یک صفحه داینامیک (مثل [slug]) داشته باشید، باید generateStaticParams را تعریف کنید.

مثلا فرض کنید در صفحه اصلی یک لیست از لینک داریم که با کلیک بروی هر کدام، میخواهیم وارد صفحه همان پست شویم و اینکار را با slug انجام داده ایم.(قبلا هم این مثال را در پست آموزش فریم ورک نکست آورده بودیم)

کد صفحه ابتدایی که لیست ما هست:

import Link from "next/link"

async function getData(){
  const x = await fetch('https://jsonplaceholder.typicode.com/users')
  const data = await x.json()
  return data
}


export default async function Main(){
  const temp = await getData()
  return(
    <>
      <h1>list users:</h1>
      <ul>
        {temp && temp.map((val,i)=>{
          let myUrl = val.id+'-'+val.username
          return <li key={i}><Link href={myUrl}>{val.name}</Link></li>
        })}
      </ul>
    </>
  )
}

بعد از کلیک بروی هر لینک باید به صفحه خود لینک منتقل شویم=> slug/page.jsx

نحوه استفاده از generateStaticParams در خروجی گرفتن ssg را ببینید.( وظیفه آن مشخص کردن مقدارهای `slug` برای خروجی استاتیک است)

import Link from "next/link";

async function getData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
  }
  
  export async function generateStaticParams() {
    const users = await getData();
    return users.map(user => ({
      slug: `${user.id}-${user.username}`,
    }));
  }
  
  export default async function Page({ params }) {
    const mySlug = await params; 
    let num = mySlug.slug
    console.log(num);
    
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${parseInt(num)}`);
    const user = await res.json();
  
    return (
      <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
        <p>{user.phone}</p>
        <p>{user.website}</p>
        <Link href='./'>back</Link>
      </div>
    );
  }
    

generateStaticParams ، قبل از build اجرا می‌شود و لیستی از مسیرهای ممکن را تولید می‌کند. Next.js از این مقدارها برای ساخت فایل‌های HTML استاتیک استفاده می‌کند.
اگر generateStaticParams تعریف نشود، Next.js نمی‌تواند مسیرهای داینامیک را به HTML تبدیل کند و npm run export ارور می‌دهد!

اما توضیح مهمترین قسمت این کد:

    return users.map(user => ({
      slug: `${user.id}-${user.username}`,
    }));

این کد یک آرایه‌ای از اشیا برمی‌گرداند که هر شیء یک مقدار slug دارد. فرض کنیم که users به این شکل باشد:

[
  { id: 1, username: "Ali" },
  { id: 2, username: "Reza" },
  { id: 3, username: "Sara" }
]

خروجی این کد خواهد بود:

[
  { slug: "1-Ali" },
  { slug: "2-Reza" },
  { slug: "3-Sara" }
]

در نهایت هم که خودتون بهتر از من میدونید:

npm run build

ویدیوی زیر هم توضیح مختصر و مفیدی از روش آپلود در گیت هاب است:

امیدواریم از این مقاله ساخت آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.