NEXT.js Pages در مقابل App Router: کدام یک برای شما مناسب است؟

بر اساس وبسایت رسمی نکست جی اس، Next.js یک فریمورک React برای ساخت برنامه های وب فول استک است.انتخاب بین Pages و App Router می تواند برای توسعه دهندگان چالش برانگیز باشد. هر دو رویکرد مزایا و معایب خاص خود را دارند و انتخاب نهایی به نیازها و ترجیحات خاص پروژه شما بستگی دارد. Next.js 14 با معرفی App Router یک تغییر پارادایم در مسیریابی را معرفی می کند و جایگزینی قوی برای روتر صفحه آشنا ارائه می دهد. درک تفاوت های ظریف بین این دو گزینه مسیریابی برای توسعه دهندگانی که به دنبال انتخاب آگاهانه در هنگام معماری برنامه های Next.js خود هستند، بسیار مهم است.

در این مقاله، ما به بررسی تفاوت های کلیدی بین NEXT.js Pages و App Router می پردازیم تا به شما کمک کنیم تصمیم بگیرید کدام یک برای شما مناسب تر است.

Next.js چیست؟

در فضای شلوغ چارچوب جاوا اسکریپت، Next.js از دیگر فریمورک ها متمایز است. این ابزار ساده به توسعه دهندگان اجازه می دهد تا برنامه های کاربردی وب مدرن را به سرعت و کارآمد ایجاد کنند.

تصور کنید که قدرت React را با امتیاز اضافی رندر سمت سرور و تولید سایت استاتیک ترکیب کنید. زیبایی Next.js در سادگی آن نهفته است، که به توسعه دهندگان این امکان را می دهد تا روی آنچه واقعاً مهم است تمرکز کنند، ایجاد تجربیات کاربری استثنایی. چه در حال ساخت یک وبلاگ شخصی یا یک برنامه سازمانی پویا باشید، Next.js سفر کدنویسی شما را از یک نبرد سخت به یک ماجراجویی پر از سرگرمی تبدیل می‌کند!

بیایید به تاریخچه مختصری از Next.js بپردازیم، یک برنامه جدید از ابتدا بسازیم، و تصمیم بگیریم که کدام گزینه مسیریابی برای پروژه بعدی شما بهتر عمل می کند.

App روتر در مقابل Page روتر

Next.js که ریشه در نیاز به عملکرد، مقیاس پذیری و کارایی بهتر دارد، در اکتبر 2016 توسط Vercel (که قبلا Zeit نامیده می شد) معرفی شد. این چارچوب سبک وزن با تاکید بر قرارداد بیش از پیکربندی طراحی شده است. رندر، مسیریابی و ابزارسازی خارج از جعبه نکست پاسخی مستقیم به چالش‌های پیش روی برنامه‌های تک صفحه‌ای (SPA) است، مانند بهینه‌سازی SEO، زمان بارگذاری و تقسیم کد.

با پرداختن به این مسائل، Next.js همچنان به محبوبیت خود در جامعه React ادامه می‌دهد و در عین حال به سازگاری با چشم‌انداز دائماً در حال تغییر توسعه وب ادامه می‌دهد.

شروع

این راهنما فرض می کند که شما با استفاده از ابزارهای خط فرمان به همراه داشتن درک اولیه از Node.js، React و vanilla JavaScript آشنا هستید.

نصب و راه اندازی

Next.js را می توان از طریق یک فرآیند نصب خودکار به نام «create-next-app» به طور کامل بوت استرپ کرد.

برای ایجاد یک پروژه جدید، این دستور را در ترمینال خود اجرا کنید:

npx create-next-app@latest

اعلان های زیر را خواهید دید:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

اعلان‌هایی را انتخاب کنید که برای شما بهتر کار می‌کنند و به خاطر بسپارید، همیشه می‌توانید وابستگی‌های بیشتری را بعداً اضافه کنید. Next.js با TypeScript، ESLint، و Tailwind CSS به‌طور پیش‌فرض علاوه بر یک دایرکتوری اختیاری «src» برای جدا کردن کد برنامه از فایل‌های پیکربندی ارسال می‌شود.

دقا کنید ما در اینجا از TypeScript استفاده می کند، اما جایگزینی tsx. با js. نتایج یکسانی را به همراه خواهد داشت.

Create-next-app پوشه ای با نام پروژه شما ایجاد می کند و وابستگی های مورد نیاز را نصب می کند.

شما همچنین می توانید به صورت دستی نیز نصب را انجام دهید.

برای نصب به صورت دستی، این پکیج ها را اضافه کنید:

npm install next@latest react@latest react-dom@latest

فایل «package.json» خود را باز کنید و اسکریپت های زیر را اضافه کنید:

{
 “scripts”: {
 “dev”: “next dev”,
 “build”: “next build”,
 “start”: “next start”,
 “lint”: “next lint”
 }
}

این اسکریپت ها به مراحل مختلف چرخه توسعه شما اشاره دارند:

"dev" : برای شروع Next.js در حالت توسعه اجرا می کند.
"build": "بیلد نکست" را برای ساخت برنامه برای استفاده تولید اجرا می کند.
"start": "شروع نکست" را برای راه اندازی سرور تولید Next.js اجرا می کند.
«lint»: «نکست lint» را برای تنظیم پیکربندی داخلی ESLint Next.js اجرا می‌کند.
 

ساختار پروژه

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

بیایید نگاهی دقیق‌تر به مزایا و معایب هر کدام بیاندازیم، و این به چه معناست برای برنامه شما:

App Router

App Router پاسخ Next.js به نیازهای مسیریابی پیشرفته است که امکان الگوها و تنظیمات پیچیده تری را فراهم می کند.

ساختار:

روتر برنامه با تغییر ساختارهای سنتی، یک رویکرد دایرکتوری مدولارتر و سازماندهی شده را اتخاذ می کند:

└── app
    ├── about
    │   └── page.tax
    ├── globals.css
    ├── layout.tsx
    ├── login
    │   └── page.tsx
    ├── page.js 
    └── team
        └── route.tsx

امکانات:

Client and Server Components:تمایز بین کامپوننت هایی که روی سرور اجرا می شوند در مقابل کلاینت اجازه می دهد. این بهینه سازی بیشتری را ارائه می دهد، به خصوص در هنگام برخورد با عملیات سمت سرور در مقابل تعامل سمت کلاینت.
طرح‌بندی آسان: با «layout.js»، مدیریت طرح‌بندی‌ها آسان‌تر و شهودی‌تر می‌شود. طرح‌بندی‌های تودرتو ساختارهای صفحه سلسله مراتبی را ساده‌تر می‌کنند.
Server Actions: این ویژگی به شما امکان می دهد کد سمت سرور را بر اساس رویدادهای سمت سرویس کلاینت اجرا کنید.
Intercepting Routes: مکانیزمی را برای ارائه کامپوننت های مختلف بر اساس شرایط ارائه می دهد، حتی اگر URL ثابت باقی بماند.
مسیریابی موازی: به شما امکان می دهد چندین صفحه را در یک URL ارائه دهید و انعطاف پذیری را افزایش دهید.
سئوی داخلی: روتر برنامه یک رویکرد داخلی برای مدیریت ابرداده ارائه می‌کند که «next/head» را اضافی می‌کند.

ویژگی های مثبت
انعطاف پذیری: با طیف وسیعی از سناریوهای مسیریابی سازگار شوید.
مدیریت دینامیک داده ها: به طور یکپارچه با منابع داده های مختلف ادغام می شود.

ویژگی های منفی

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

Page Router

سیستم مسیریابی صفحات هم بصری و هم موثر است. با افزودن کامپوننت های React به دایرکتوری «pages»، مسیرها به‌طور خودکار ایجاد می‌شوند.

ساختار:

از لحاظ تاریخی، Next.js از دایرکتوری «pages» برای تولید خودکار مسیرها بر اساس نام فایل‌ها استفاده می‌کرد:

└── pages
    ├── about.tsx
    ├── index.tsx
    └── team.tsx

امکانات:

مسیرهای خودکار: افزودن یک فایل «js.» یا «tsx.» به دایرکتوری «pages» به طور خودکار یک مسیر ایجاد می کند.
بهینه سازی سئو: با کامپوننت «next/head»، بهینه سازی سئو ساده بود.
متد های واکشی داده: شامل «getStaticProps»، «getServerSideProps» و «getStaticPaths» برای واکشی داده‌ها.
داکیومنت سفارشی و کامپوننت برنامه: برای سفارشی‌سازی ساختار کلی داکیومنت و طرح‌بندی مجاز است.

ویژگی های مثبت
کارایی: Next.js فرآیند توسعه را ساده می کند و در زمان صرفه جویی می کند.
سئو آماده: با رندر سمت سرور، محتوا هم برای کاربران و هم برای موتورهای جستجو آماده است.

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

تصمیم گیری

بنابراین، چگونه تصمیم می گیرید که کدام مسیر را طی کنید و چه چیزی برای پروژه شما مناسب است؟

طبق داکیومنت رسمی نکست : "برای برنامه های جدید، توصیه می کنیم از App Router استفاده کنید."

تیم Next.js به وضوح روی App روتر همه کاره شده است. اما قبل از تصمیم گیری موارد زیر را در نظر بگیرید:

• محدوده پروژه: آیا این یک وبلاگ حداقلی است یا یک پلت فرم تجارت الکترونیک چند وجهی؟

• مقیاس پذیری: عاملی در رشد آینده و نیازهای مقیاس بندی.

بر اساس داکیومنت رسمی نکست : «روتر Pages روتر اصلی Next.js است، […] و همچنان برای برنامه های قدیمی Next.js پشتیبانی می شود».

انتخاب روتر امروز شما می‌تواند بر تکامل پروژه شما تأثیر بگذارد و خواهد بود، بنابراین عاقلانه انتخاب کنید!

مثال App Router

در اینجا نحوه شروع استفاده از «app router» آورده شده است.

یک پوشه «app/» ایجاد کنید، سپس یک فایل «layout.tsx» و «page.tsx» اضافه کنید:

// app/layout.tsx

export default function RootLayout({
 children,
}: {
 children: React.ReactNode
}) {
 return (
 <html lang="en">
 <body>{children}</body>
 </html>
 );
}

// app/page.tsx
export default function Page() {
 return <h1>Hello, Next.js!</h1>;
}

اگر فراموش کردید «layout.tsx» ایجاد کنید، Next.js به طور خودکار این فایل را هنگام اجرای سرور توسعه با «next dev» اضافه می کند.

مثال Page Router

اگر ترجیح می دهید از روتر صفحات استفاده کنید، باید یک دایرکتوری «pages/» در ریشه پروژه خود ایجاد کنید.

// pages/index.tsx

export default function Page() {
 return <h1>Hello, Next.js!</h1>;
}

// pages/_app.tsx
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
 return <Component {…pageProps} />;
}

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
 return (
 <Html>
 <Head />
 <body>
 <Main />
 <NextScript />
 </body>
 </Html>
 );
}

نکته حرفه ای:
می‌توانید از هر دو روتر در یک پروژه با اولویت‌بندی مسیرهای «App» بر «Page» استفاده کنید، اما توصیه می‌شود برای جلوگیری از سردرگمی، فقط از یکی استفاده کنید.

مراحل پایانی

یک پوشه «public» برای ذخیره دارایی های ثابت مانند تصاویر، فونت ها، و غیره ایجاد کنید. سپس فایل های داخل دایرکتوری «public» را می توان با شروع از URL اصلی با کد شما ارجاع داد.

مسیرهای پویا و فایل های پیکربندی پوشه های اضافی را می توان با ارجاع به این لیست به ساختار پروژه اضافه کرد: 

ساختار پروژه

سرور توسعه را اجرا کنید
برای اینکه ببینید همه کارهایتان به صورت زنده،دستور زیر را اجرا کنید:

npm run dev

برای مشاهده درخواست خود به [http://localhost:3000](http://localhost:3000) مراجعه کنید.

«app/layout.tsx» (یا «pages/index.tsx») را ویرایش کنید تا تغییرات خود را در مرورگر خود جمع‌آوری کنید.

نتیجه

App Router تحول قابل توجهی را در چارچوب Next.js معرفی می کند که ویژگی های پیشرفته و انعطاف پذیری پیشرفته را ارائه می دهد. در حالی که مسیریاب صفحات برای بسیاری از برنامه‌ها کافی باقی می‌ماند، قابلیت‌های App Router توصیه‌شده کنترل و عملکرد بیشتری را ارائه می‌دهد.

به خاطر داشته باشید، انتخاب بین دو روتر مربوط به «درست» یا «نادرست» نیست، بلکه به این بستگی دارد که چه چیزی با نیازهای پروژه شما مطابقت دارد. چه در Next.js تازه کار باشید یا یک کاربر باتجربه که به دنبال تطبیق آخرین ویژگی‌ها است، این راهنما قصد دارد شما را در مسیر درست برای پروژه بعدی خود راهنمایی کند!