معرفی
پس از اعلامیه اخیر سازنده میلیونjs آیدن بای درباره پشتیبانی از Millionjs برای برنامه های Nextjs در جدیدترین نسخه Millionjs (نسخه 2.3.0)، این مقاله تقریباً باید یک چیز باشد!
معرفی کردن @milliondotjs برای Next.js!
اجزای خود را با «block()» بپیچید و آن را تا 70 درصد سریعتر تبدیل کنید ⚡️!
از اینجا شروع کنید: millionjs.org (v2.3.0)
07:48 – 24 آوریل 2023
Millionjs و Nextjs چیست؟
میلیون یک DOM مجازی بسیار سریع و سبک (<4 کیلوبایت) است که اجزای React را تا 70٪ سریعتر می کند.
Next.js یک فریمورک منبع باز محبوب برای ساخت برنامه های وب با استفاده از React است. به توسعه دهندگان اجازه می دهد تا برنامه های Rendered سمت سرور (SSR) React را به راحتی ایجاد کنند، و آن را به یک انتخاب محبوب برای ساخت برنامه های وب آماده تولید تبدیل می کند.
چرا استفاده از MillionJS در برنامه بعدی می تواند مفید باشد
میلیون با React کار می کند. میلیون، ایجاد برنامه های وب را به همین سادگی (این فقط یک جزء React را بسته بندی می کند!) اما با سرعت رندر و بارگذاری سریع تر می کند. Million.js با استفاده از یک DOM مجازی بهینه و تنظیم‌شده، هزینه‌های سربار برنامه Next را کاهش می‌دهد.
در یک React Application معمولی، می‌توانیم react-dom را کاملاً حذف کنیم و آن را با Million’s DOM جایگزین کنیم، اما هنوز در Nextjs نمی‌توانیم این کار را انجام دهیم.
جدول محتویات
- راه اندازی برنامه Nextjs
- راه اندازی Millionjs در برنامه
- استفاده از میلیون در قطعات
- کلی غذای آماده
- منابع
راه اندازی برنامه Nextjs
برای این مقاله با راه اندازی برنامه بعدی خود شروع می کنیم.
برای راه اندازی برنامه بعدی به صورت محلی، به دایرکتوری بروید تا آن دایرکتوری را در هر ویرایشگر کد باز کنید و دستور زیر را تایپ کنید:
npx create-next-app@latest
اکنون دایرکتوری خود را به برنامه Next در ترمینال خود تغییر دهید و دستور زیر را تایپ کنید:
npm run dev
دستور بالا سرور را راه اندازی می کند.
راه اندازی میلیون ها
برای راه‌اندازی Millionjs در برنامه Next، شما باید کتابخانه Next را در پایگاه کد خود نصب کنید. برای انجام این کار، ادامه دهید و دستور زیر را در برنامه NEXT خود تایپ کنید:
npm install million
براوو!! ما اکنون میلیون را نصب کرده ایم.
مرحله بعدی اضافه کردن کامپایلر ساخته شده برای NEXT به برنامه است. در فهرست اصلی خود، با تغییر نام خود شروع کنید next.config.js به next.config.mjs
سپس، شما next.config.mjs باید با موارد زیر مطابقت داشته باشد:
import million from "million/compiler";
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
export default million.next(nextConfig);
استفاده از میلیون در قطعات
ما در اینجا کار خیلی پیچیده ای انجام نمی دهیم، اما، شما فقط می توانید ادامه دهید و index.tsx / index.jsx خود را برای مطابقت با موارد زیر ویرایش کنید:
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState } from "react";
import { block } from "million/next";
const Main = () => {
const [count, setCount] = useState(0);
return (
<main className={styles.main}>
<h1 className={styles.title}>Welcome to Next.js with Million!</h1>
<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>pages/index.tsx</code>
</p>
<p className={styles.description}>
Check out <a href="millionjs.org">Millionjs</a>
</p>
<button onClick={() => setCount(count + 1)}>Count is {count}</button>
</main>
);
};
const MainBlock = block(Main);
const Home = () => {
return (
<div className={styles.container}>
<Head>
<title>Nextjs With Million</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<MainBlock />
</div>
);
};
export default Home;
پیش بروید و به مرورگر خود بازگردید تا تغییراتی را که به تازگی ایجاد کرده اید مشاهده کنید!
و تقریباً این کار را انجام می دهد! موارد فوق یک مورد استفاده بسیار ساده و مینیمالیستی از Millionjs در یک برنامه Nextjs است.
صبر کن!!! یک ظاهر طراحی شده؟ برو جلو و بررسی کن styles پوشه در دایرکتوری ریشه برنامه بعدی شما
کلی غذای آماده
-
Millionjs یک DOM مجازی سبک وزن است که می تواند عملکرد برنامه های React را بهبود بخشد.
-
Millionjs را می توان در یک برنامه Nextjs برای بهبود عملکرد ادغام کرد.
-
برای راه اندازی Millionjs در یک برنامه Nextjs، باید کتابخانه Millionjs را نصب کنید و یک کامپایلر ساخته شده برای Nextjs را به برنامه اضافه کنید.
-
استفاده از Millionjs در کامپوننت‌ها به سادگی قرار دادن آنها در عملکرد بلوک ارائه شده توسط کتابخانه Millionjs است.
به طور کلی، استفاده از Millionjs در یک برنامه Nextjs می تواند به کاهش هزینه های اضافی و بهبود سرعت رندر و بارگذاری برنامه شما کمک کند.
منابع:
