مقایسه فنی ری‌اکت [Reactjs] و نکست [Nextjs]

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

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

دو تکنولوژی محبوب ریکت و نکست را از لحاظ موارد زیر بررسی و مقایسه می کنیم:

• نحوه ایجاد پروژه
• نحوه build صفحات
• نحوه دریافت داده از سرور
• استفاده از داکیومنت ها
• و مباحث تکنیکال دیگر

تفاوت کلی لایبرری ری اکت با فریمورک نکست:

پیش از اینکه به سراغ مسائل فنی برویم ابتدا نگاهی اجمالی به تفاوت کلی این دو تکنولوژی محبوب می اندازیم.

معرفی اجمالی کتابخانه ری اکت:

ری اکت در ابتدا توسط شرکت فیسبوک معرفی و ارائه شد و به سرعت به یکی از پرطرفدارترین تکنولوژی های توسعه فرانت اند تبدیل شد. با استفاده از کتابخانه ریکت می توان وب اپلیکیشن و موبایل اپلیکیشن های دلخواه خود را به سرعت توسعه دهیم و شامل ویژگی های زیادی مانند Routing و مدیریت state مثلا توسط ریداکس می باشد. می توان گفت ری اکت یک لایبرری مینیمال برای توسعه فرانت اند می باشد و تقریبا می توان از آن برای توسعه هر نوع اپلیکیشنی استفاده کرد. برای مطالعه اطلاعات بیشتر درباره کتابخانه ری اکت می توانید به مقاله “آموزش مقدماتی کتابخانه React.js” مراجعه فرمایید.

معرفی اجمالی فریم ورک نکست:

همانطور که در تصویر فوق مشاهده می کنید، Next.js یک فریم ورک است برای Production. از نکست می توان در کنار ری اکت استفاده کرد و یک اپلیکیشن SSR یا Server-Side-Rendering تولید کرد. نکست جی اس ویژگی های زیادی دارد مانند pre-rendering و routing و code-splitting و پشتیبانی از webpack و…

برای مطالعه بیشتر در مورد فریم ورک Nextjs به پست “آموزش مقدماتی Next.js برای پیاده سازی SSR در ری اکت” مراجعه نمایید.

تفاوت پروژه های ریکت و نکست از لحاظ ساختار:

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

ساختار اولیه پروژه React.js:

می توان یک اپلیکیشن ری اکتی را بسادگی راه اندازی کرد. فقط کافیست ابتدا Node.js را روی سیستم خود نصب کنید و سپس با اجرای دستور زیر یک اپلیکیشن React ایجاد کنید:

npx create-react-app my-app
#or
yarn create react-app my-app

توسط یکی از ابزارهای npm یا yarn می توان براحتی یک اپلیکیشن ری اکت راه اندازی کرد. بدون نیاز به کانفیگ خاصی. پس از اجرای دستور فوق، یک پروژه دموی اولیه در فولدر مشخص شده تعریف می شود و فایل src/App.js بعنوان فایل ورودی و اجرایی پروژه شناخته می شود.

یک فولدر دیگر در پروژه ری اکت، public می باشد که شامل فایل های استاتیک مانند تصاویر، فونت ها و آیکون ها و … می باشد. همچنین شامل فایل manifest برای PWA است.

ساختار کلی فایل ها و فولدرهای یک پروژه اولیه ری اکت به شکل زیر است:

.
├── README.md
├── package.json
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock (or package-lock.json)

ساختار اولیه پروژه Next.js:

با اجرای دستور زیر می توان یک اپلیکیشن نکست جی اس را ایجاد کرد:

npx create-next-app my-app
#or
yarn create next-app my-app

مجددا می توان یکی از ابزارهای yarn یا npx را برای راه اندازی پروژه نکست انتخاب کرد. پس از اجرای دستور بالا، در پروژه ایجاد شده، چندین فایل و پوشه قرار دارند که ساختار آنها به شکل زیر می باشد:

.
├── README.md
├── package.json
├── node_modules
├── pages
│   ├── _app.js
│   ├── api
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock (package-lock.json)

یکی از فولدرهای اصلی پروژه ری اکت، pages می باشد که شامل مسیرها یا route های برنامه است. در اینجا هم مانند ری اکت، فولدر public را داریم که می تواند شامل asset های برنامه باشد.

تمام فایل ها و فولدرهایی که در پوشه pages قرار دارند معادل یک route در برنامه می باشند. در فولدر public هم می توان تصاویر و سایر آیتم های استاتیک پروژه را قرار داد. بطور مستقیم می توان به تصاویر موجود در این فولدر دسترسی داشت و نیازی به require یا import برای دسترسی به تصاویر نمی باشد.

در پوشه pages یک فایل بنام index.js وجود دارد که فایل ورودی یا entry point اپلیکیشن می باشد.

در اپلیکیشن Nextjs می توان با از کامپوننت Link برای هدایت به مسیرهای دلخواه استفاده کرد. مانند کد زیر:

<div className="header__links">
    <Link href="/">
        <a className="header__anchor">Home</a>
    </Link>
    <Link href="/about">
        <a className="header__anchor">About</a>
    </Link>
</div>

تا اینجا، ساختار پروژه های Next و React را بررسی کردیم. یکی از تفاوت های اساسی ری اکت با نکست جی اس در اینست که بعنوان مثال در ریکت برای روتینگ نیاز به نصب کتابخانه react-router داریم اما در نکست جی اس بطور پیش فرض این قضیه وجود دارد و می توان از Link یا سایر کامپوننت های مسیریابی استفاده کرد.

تفاوت Nextjs با Reactjs از لحاظ ایجاد صفحات:

از اینجا به بعد وارد مباحث فنی تر خواهیم شد.

ایجاد صفحات در Reactjs:

در یک اپلیکیشن روتین ریکت، برای ایجاد صفحات و مسیرها، باید یک کامپوننت معمولی تعریف کنیم و سپس توسط پکیج React Router یک مسیر دلخواه برای آن در نظر بگیریم. بعنوان مثال:

export default function App() {
    return (
        <Router>
            <section>
                <Header />
                <Switch>
                    <Route path="/episodes">
                        <EpisodesPage />
                    </Route>
                    <Route path="/season2">
                        <Season2Page />
                    </Route>
                    <Route path="/quotes">
                        <QuotesPage />
                    </Route>
                    <Route path="/">
                        <HomePage />
                    </Route>
                </Switch>
            </section>
        </Router>
    );
}

در کد بالا، quotes و season2page و homepage و… بصورت صفحاتی مجزا تعریف شده اند که هر یک از آنها در مسیر تعریف شده رندر خواهند شد.

ایجاد صفحات در Nextjs:

اما در فریمورک Next قضیه فرق دارد و تمام Route ها در فولدر pages قرار می گیرند. بعبارتی دیگر، هر فایل و فولدری که در پوشه pages تعریف می شود بصورت یک مسیر مجزا تعریف خواهد شد.

بعنوان مثال:

import Link from "next/link";
const Header = () => {
    return (
        <nav className="header">
            <span>
                <Link href="/">Home</Link>
            </span>
            <span>
                <Link href="/episodes">Episodes</Link>
            </span>
            <span>
                <Link href="/season2">Season 2</Link>
            </span>
            <span>
                <Link href="/quotes">Quotes</Link>
            </span>
        </nav>
    );
};
export default Header;

در این قطعه کد، از کامپوننت Link برای مسیردهی صفحات مختلف استفاده شده است.

با یک نگاه از بالا به پایین به یک اپلیکیشن Next.JS می توان ساختار زیر را مشاهده کرد:

.
├── README.md
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── components
│   │   └── Header.js
│   ├── episodes.js
│   ├── index.js
│   ├── quotes.js
│   ├── season2.js
│   └── styles
│       ├── _contact.scss
│       ├── _episodes.scss
│       ├── _header.scss
│       ├── _home.scss
│       ├── _quotes.scss
│       ├── _season2.scss
│       └── styles.scss
├── public
│   ├── HomePage.jpg
│   └── favicon.ico
└── yarn.lock

بنابراین برای تعریف صفحات (یا Routes) در ری اکت، باید ابتدا کامپوننت آن را در فولدر components ایجاد کرده و سپس توسط کتابخانه react router یک مسیر برای رندر شدن این کامپوننت تعریف کنیم. اما در نکست کار بسیار راحت تر و تمیزتر است و فقط کافیست صفحه موردنظر را در پوشه pages تعریف کرد. به همین راحتی!

تفاوت نکست با ریکت از لحاظ دریافت داده از سرور:

می توان گفت در تمام اپلیکیشن ها نیاز به دریافت داده از سرور یا data fetching داریم. بنابراین عملیات fetch داده یکی از مهم ترین مباحث ریکت و نکست می باشد.

دریافت اطلاعات از سرور در ری اکت:

بعنوان مثال در کد زیر، episodes را توسط ریداکس دریافت می کنیم:

const dispatch = useDispatch();
    // first read in the values from the store through a selector here
    const episodes = useSelector((state) => state.Episodes.episodes);
    useEffect(() => {
        // if the value is empty, send a dispatch action to the store to load the episodes correctly
        if (episodes.length === 0) {
            dispatch(EpisodesActions.retrieveEpisodes());
        }
    });
    return (
        <section className="episodes">
            <h1>Episodes</h1>
            {episodes !== null &&
                episodes.map((episodesItem) => (
                    <article key={episodesItem.key}>
                        <h2>
                            <a href={episodesItem.link}>{episodesItem.key}</a>
                        </h2>
                        <p>{episodesItem.value}</p>
                    </article>
                ))}
            <div className="episodes__source">
                <p>
                    original content copied from
                    <a href="https://www.vulture.com/tv/the-mandalorian/">
                        here
                    </a>
                </p>
            </div>
        </section>
    );

و ریداکس از یک فایل لوکال اطلاعات را می خواند:

import episodes from '../../config/episodes';

// here we introduce a side effect
// best practice is to have these alongside actions rather than an "effects" folder
export function retrieveEpisodes() {
    return function (dispatch) {
        // first call get about to clear values
        dispatch(getEpisodes());
        // return a dispatch of set while pulling in the about information (this is considered a "side effect")
        return dispatch(setEpisodes(episodes));
    };
}

دریافت اطلاعات از سرور در نکست:

و اما در فریم ورک نکست جی‌اس عملیات دریافت داده از سرور توسط data fetching APIs انجام می شود. مانند getStaticProps و getServerSideProps. به کد زیر توجه کنید:

function EpisodesPage({ episodes }) {
    return (
        <>
            <section className="episodes">
                <h1>Episodes</h1>
                {episodes !== null &&
                    episodes.map((episodesItem) => (
                        <article key={episodesItem.key}>
                            <h2>
                                <a href={episodesItem.link}>{episodesItem.key}</a>
                            </h2>
                            <p>{episodesItem.value}</p>
                        </article>
                    ))}
                <div className="episodes__source">
                    <p>
                        original content copied from
                        <a href="https://www.vulture.com/tv/the-mandalorian/">here</a>
                    </p>
                </div>
            </section>
        </>
    );
}
export default EpisodesPage;
export async function getStaticProps(context) {
    const episodes= [...];
    return {
        props: { episodes }, // will be passed to the page component as props
    };
}

تفاوت React با Next از لحاظ داکیومنت:

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

داکیومنت های آموزشی در زمینه ریکت:

به منظور یادگیری و توسعه اپلیکیشن توسط کتابخانه React.js روش های بسیار زیادی وجود دارد. از ویدیوهای آموزشی در یوتیوب گرفته تا وب سایت های آموزشی مانند آکادمی راهکارینو، و البته داکیومنت سایت مرجع ریکت به نشانی reactjs.org

ارتباط با جامعه (Community) فعال در زمینه توسعه اپلیکیشن های ری اکت نیز یکی از راه های یادگیری و توسعه وب اپلیکیشن و موبایل اپلیکیشن توسط کتابخانه Reactjs می باشد.

داکیومنت های آموزشی در زمینه نکست:

فریم ورک Next.js داکیومنت مفصلی برای تولید کامپوننت و مبحث Routing دارد که می توانید به سایت اصلی Nextjs.org مراجعه کنید. علاوه بر این می توان با اعضای تیم توسعه دهنده فریم ورک نکست مستقیما از طریق شبکه های اجتماعی ارتباط داشت. مثلا از طریق اکانت توییتر می توان با آقای Tim Neutkens (یکی از اعضای تیم توسعه نکست)