100 سوال مصاحبه Next.js ! جامع ترین لیست سوالات مصاحبه Next.js !

2 آذر 1403
ارسال شده توسط
نکست جی اس
سوالات مصاحبه Next.js - سوال مصاحبه Next.js - سوالات مصاحبه نکست جی اس - سوال مصاحبه نکست جی اس

تصور کن یه روز میری سر مصاحبه فنی Next.js 🙂 همه‌ چی اوکیه و ناگهان ازت می‌پرسن: «فرق بین Server-Side Rendering و Static Site Generation چیه؟» یا میگن: «چطوری یه مسیر داینامیک رو با ISR هندل می‌کنی؟» اگه نتونی جواب بدی، خیلی راحت موقعیت شغلی رو از دست میدی!
اینجاست که داشتن یه لیست جامع از سوالات مصاحبه Next.js و مرور اون قبل از جلسه فنی کمک میکنه هم مباحثی که بلدی رو مرور کنی و هم به مباحثی که بلد نیستی مسلط بشی.
این سوالات، فقط به درد مصاحبه‌ ها نمی‌خوره؛ بلکه برای اجرای پروژه‌ های واقعی هم نیاز داری که بهشون مسلط باشی.

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

این لیست سوالات مصاحبه Next.js برای این طراحی شده که نه تنها جواب این سوالات رو بهت بده، بلکه کمکت کنه هر وقت به مشکلی برخوردی، سریع‌ ترین و درست‌ ترین راه‌ حل رو پیدا کنی.
پس اگه آماده‌ ای نسبت به دیروز خودت یه Level Up داشته باشی حتما یه دور این سوالات رو مرور کن 🙂

بخش اول سوالات مصاحبه Next.js

Next.js یه فریمورک بر پایه React هست که ابزار های آماده‌ ای برای ساخت اپلیکیشن های وب ارائه میده.
تفاوت اصلی اینه که React صرفاً یه کتابخونه برای ساخت UI هست، ولی Next.js قابلیت هایی مثل رندرینگ سمت سرور (SSR)، Static Site Generation (SSG) و مدیریت مسیرها (Routing) رو بهت میده.
خلاصه، اگه React یه موتور ماشین باشه، Next.js کل ماشینه!

وقتی میخوای یه API ساده و کوچیک بسازی که مستقیم توی پروژه استفاده بشه. مثلاً برای گرفتن داده از دیتابیس یا ساختن یه فرم تماس.
اینطوری لازم نیست یه سرور جدا داشته باشی.

SSR (Server-Side Rendering) یعنی هر بار که کاربر یک درخواست میفرسته، سرور محتوای صفحه رو میسازه و برای مرورگر ارسال میکنه. این روش باعث میشه همیشه آخرین و بروزترین داده‌ ها نمایش داده بشه، چون هر بار صفحه از نو تولید میشه.

SSG (Static Site Generation) کاملاً برعکس عمل میکنه. در این روش، صفحه‌ ها در زمان بیلد (Build) تولید میشن و به صورت استاتیک در اختیار کاربران قرار میگیرن.
این یعنی وقتی یک کاربر صفحه‌ ای رو باز میکنه، دیگه نیاز به ساخت دوباره صفحه توسط سرور نیست، چون همون نسخه استاتیک نمایش داده میشه.
به زبان ساده‌تر:

  • SSR: صفحات داینامیک و لحظه‌ ای، مثل داشبورد ها. ( که دیتاشون زیاد تغییر میکنه )
  • SSG: صفحات استاتیک، مثل وبلاگ‌ ها یا مستندات. ( که تغییرات زیادی ندارن )

ISR (Incremental Static Regeneration) ترکیبی از SSG و SSR هست.
توی این روش، صفحه‌ ها در زمان بیلد به صورت استاتیک ساخته میشن، اما میتونن بعد از مدتی دوباره بروزرسانی بشن.
فرض کن یک سایت خبری داری که بعضی از مقاله‌ هاش هر چند ساعت یک بار بروزرسانی میشن.
با ISR میتونی زمان مشخصی (مثلاً هر 5 دقیقه) تعیین کنی که صفحه‌ ها بعد از اون زمان، وقتی کاربر بعدی بهشون سر میزنه، دوباره ساخته بشن.
اینطوری هم سرعت بالا میره (چون استاتیک هستن) و هم داده‌ ها داینامیک و تازه میمونن 🙂

یکی از جذاب‌ ترین قابلیت‌ های Next.js اینه که نیازی به تعریف مسیرها (Routes) به صورت دستی نداری.
هر فایلی که توی پوشه pages/ بسازی، به صورت خودکار به یک مسیر تبدیل میشه.
این یعنی فایل about.js توی پوشه pages/ به مسیر /about تبدیل میشه.
این روش نه تنها سرعت توسعه رو بالا میبره، بلکه کدها رو هم ساده‌ تر و خواناتر میکنه. دیگه نیازی به نصب کتابخونه‌های اضافی یا نوشتن مسیرهای پیچیده نیست.

getStaticProps یک تابع خاص در Next.js هست که وقتی میخوای از SSG استفاده کنی، بهت کمک میکنه داده‌ ها رو توی زمان بیلد جمع‌ آوری کنی.
این تابع قبل از ساخت صفحه اجرا میشه و هر داده‌ ای که لازم داشته باشی (مثل گرفتن داده از API یا دیتابیس) رو برات فراهم میکنه.
مثلاً فرض کن یک سایت بلاگ داری و میخوای لیست مقاله‌ ها رو توی صفحه اصلی نمایش بدی.
با استفاده از getStaticProps میتونی تمام مقاله‌ ها رو از API بگیری و توی زمان بیلد، صفحه رو بسازی.
این روش باعث میشه سرعت لود صفحه خیلی بالا بره.

  • getStaticProps: این تابع در زمان بیلد اجرا میشه. یعنی یک بار صفحه ساخته میشه و همون نسخه ثابت به همه کاربران نمایش داده میشه. مناسب برای صفحاتی که داده‌ هاشون به ندرت تغییر میکنه.
  • getServerSideProps: این تابع هر بار که کاربر صفحه رو باز میکنه اجرا میشه. یعنی داده‌ ها به صورت لحظه‌ای از سرور گرفته میشن و صفحه ساخته میشه. مناسب برای صفحاتی که داده‌ های لحظه‌ ای و حساس دارن، مثل داشبورد یا گزارش‌ ها.

Dynamic Routing یعنی بتونی مسیر هایی بسازی که داینامیک باشن.
مثلاً فرض کن میخوایم صفحه تک مقاله ( جزئیات یک مقاله ) رو بسازیم اما ما نمیدونیم قراره چند تا مقاله داشته باشیم! و اصلا منطقی نیست به ازای هر مقاله یه صفحه بسازیم! ( چون فرض کن 1000 تا مقاله داشته باشیم )
منطقی ترین کار ساخت Dynamic Route هست.
اینجوری با ساخت یک Route حتی اگه 1000 تا مقاله هم داشته باشیم مشکلی پیش نمیاد چون صفحه ما کاملا داینامیک هست و بر اساس دیتایی که از سرور داره میاد ساخته میشه.

توی Next.js این کار با گذاشتن اسم فایل توی کروشه‌ ها انجام میشه. مثلاً:

اگر فایلی با نام

[id].js 

توی پوشه app or /pages/ بسازی، مسیری مثل /post/:id رو برات ایجاد میکنه.
برای مثال:

مسیر /post/1 صفحه‌ای رو که به id=1 مربوطه نشون میده.

مسیر /post/2 هم برای مقاله‌ای با id=2 هست.

API Routes برای وقتی خوبه که بخوای بدون نیاز به یک سرور جدا، API بسازی. این قابلیت Next.js بهت اجازه میده که توی همون پروژه‌ ای که داری، سرور کوچیک خودت رو بسازی. مثلاً:

  • گرفتن اطلاعات از دیتابیس
  • ارسال فرم تماس
  • یا حتی احراز هویت کاربران
    API Routes توی پوشه pages/api/ ساخته میشن و به صورت خودکار به یک مسیر API تبدیل میشن.
  • پوشه public: این پوشه برای فایل‌ هایی هست که مستقیماً به مرورگر کاربر ارائه میشن.
    مثلاً تصاویر، ویدیو ها، یا فایل‌ های ثابت. هر چیزی که توی این پوشه قرار بدی، با همون مسیر مستقیم در دسترسه. مثلاً /public/images/logo.png میشه /images/logo.png.
  • پوشه static: قبلاً توی نسخه‌ های قدیمی Next.js استفاده میشد، اما الان دیگه منسوخ شده و نباید ازش استفاده کنی.

بخش دوم سوالات مصاحبه Next.js

Middleware توی Next.js بهت این امکان رو میده که قبل از رسیدن درخواست کاربر به یک صفحه خاص، اون درخواست رو بررسی یا تغییر بدی. مثلاً:

  • میتونی کاربرها رو احراز هویت کنی.
  • اون‌ ها رو به مسیر دیگری ریدایرکت کنی.
  • یا حتی زبان صفحه رو بر اساس لوکیشن کاربر تغییر بدی.

Middleware‌ ها معمولاً توی فایل middleware.js نوشته میشن و میتونی با استفاده از Regex یا پارامترهایی خاص مشخص کنی که برای کدوم مسیر ها اجرا بشن. مثلاً:

export function middleware(request) {
if (!request.cookies.auth) {
return Response.redirect(‘/login’);
}
}

اینجا اگر کاربر لاگین نکرده باشه، به صفحه ورود هدایت میشه.

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

  • بهینه‌ سازی خودکار: سایز تصاویر رو متناسب با دستگاه کاربر تغییر میده.
  • Lazy Loading: تصاویر فقط وقتی لود میشن که کاربر به اون بخش از صفحه برسه.
  • پشتیبانی از فرمت‌های مدرن: مثل WebP که حجم فایل‌ ها رو کم میکنه.

مثال استفاده:

import Image from ‘next/image’;

export default function Example() {
return (
<Image
src=”/images/example.jpg”
alt=”FrontEndi.com”
width={500}
height={300}
/>
);
}

توی نسخه 13 به بعد، با استفاده از next/font میتونی فونت‌ ها رو خیلی راحت و بهینه استفاده کنی. این روش باعث میشه:

  • دیگه نیازی به ایمپورت فونت‌ ها از Google Fonts نباشه.
  • سرعت لود صفحه بهتر بشه.
  • فقط کاراکتر های مورد نیاز لود بشن.

import { Roboto } from ‘next/font/google’;

const roboto = Roboto({
subsets: [‘latin’],
weight: [‘400’, ‘700’],
});

export default function Example() {
return <p className={roboto.className}>این یه مثال از فونت روبوتو هست.</p>;
}

Next.js به طور پیشفرض از تکنیک‌ هایی استفاده میکنه که باعث میشه صفحاتش برای موتورهای جستجو مناسب باشن:

  1. رندرینگ سمت سرور (SSR): محتوای صفحه قبل از اینکه به کاربر نمایش داده بشه، توسط سرور تولید میشه. این باعث میشه موتورهای جستجو راحت تر محتوای سایت رو بخونن.
  2. Static Generation: صفحات استاتیک با سرعت بالا بارگذاری میشن و این تأثیر مثبتی روی تجربه کاربر و امتیاز SEO داره.
  3. متاتگ‌ها: به راحتی میتونی متاتگ‌ های خاصی مثل title، description و keywords رو تنظیم کنی.
    مثال:

import Head from ‘next/head’;

export default function Example() {
return (
<>
<Head>
<title>عنوان صفحه</title>
<meta name=”description” content=”توضیحات صفحه” />
</Head>
<h1>سلام دنیا!</h1>
</>
);
}

 

App Directory یک سیستم جدید توی نسخه 13 به بعد Next.js هست که برای ساخت اپلیکیشن‌ های ماژولار و پیشرفته طراحی شده.
تفاوت‌ها:

  1. ساختار ماژولار: توی App Directory هر صفحه به صورت یک پوشه مستقل تعریف میشه که شامل تمام کامپوننت‌ ها، استایل‌ ها و داده‌ های مربوط به اون صفحه است.

  2. Server Components: از اینجا به بعد، میتونی از Server Components استفاده کنی که باعث میشه کدهای کمتری به مرورگر ارسال بشه.

  3. پوشه Layout: به طور پیشفرض میتونی یک لایه (Layout) برای تمام صفحات تعریف کنی و نیازی به کپی کردن کدهای مشابه نداری.

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

  1. CSS Modules: توی فایل‌های module.css میتونی استایل بنویسی که فقط روی همون کامپوننت اعمال میشه.

  2. Styled Components: اگر میخوای کدهای استایل‌ هات داخل جاوااسکریپت باشه، میتونی از این کتابخونه استفاده کنی.

  3. Tailwind CSS: اگر دنبال یک سیستم آماده و پرسرعت برای استایل‌ دهی هستی، Tailwind CSS یک گزینه عالیه.

  4. Sass/SCSS: اگر به سینتکس Sass علاقه داری، Next.js به طور پیشفرض ازش پشتیبانی میکنه.

مثال CSS Modules:

 

import styles from ‘./example.module.css’;

export default function Example() {
return <h1 className={styles.title}>سلام دنیا!</h1>;
}

getInitialProps یک روش قدیمی برای گرفتن داده‌ ها توی Next.js بود، ولی الان توصیه نمیشه ازش استفاده کنی، چون باعث میشه تمام صفحات به صورت SSR عمل کنن.
به جای اون، میتونی از getStaticProps، getServerSideProps یا API Routes استفاده کنی که کارایی بهتری دارن.

بخش سوم سوالات مصاحبه Next.js

برای ساخت صفحه 404 اختصاصی توی Next.js، کافیه یه فایل به نام 404.js توی پوشه pages/ بسازی. این فایل به صورت خودکار وقتی کاربر به مسیری که وجود نداره بره، نمایش داده میشه.

مثال:

export default function Custom404() {
return (
<div>
<h1>صفحه مورد نظر پیدا نشد!</h1>
<p>متأسفیم، این صفحه وجود نداره.</p>
</div>
);
}

این روش بهت اجازه میده یک تجربه کاربری بهتر برای صفحات خطا ارائه بدی.

کامپوننت Head توی Next.js بهت اجازه میده متاتگ‌های HTML مثل title یا description رو برای هر صفحه به صورت جداگانه تعریف کنی. این کار برای SEO و تجربه کاربری خیلی مهمه.

import Head from ‘next/head’;

export default function Example() {
return (
<>
<Head>
<title>عنوان صفحه</title>
<meta name=”description” content=”توضیحات این صفحه” />
<link rel=”icon” href=”/favicon.ico” />
</Head>
<h1>سلام دنیا!</h1>
</>
);
}

Server Components یکی از قابلیت‌های جدید Next.js هست که توی نسخه 13 معرفی شده. این کامپوننت‌ ها فقط روی سرور اجرا میشن و به مرورگر کاربر ارسال نمیشن.
مزایا:

  • کاهش حجم جاوااسکریپتی که به مرورگر ارسال میشه.
  • سرعت بیشتر چون پردازش توی سرور انجام میشه.
  • مدیریت بهتر داده‌ ها، چون میتونی مستقیماً به دیتابیس متصل بشی.

برای محافظت از مسیرها، معمولاً باید قبل از نمایش صفحه بررسی کنی که کاربر احراز هویت شده یا نه. این کار میتونه توی Middleware یا توابعی مثل getServerSideProps انجام بشه.

export async function getServerSideProps(context) {
const { req } = context;

if (!req.cookies.auth) {
return {
redirect: {
destination: ‘/login’,
permanent: false,
},
};
}

return { props: {} };
}

export default function ProtectedPage() {
return <h1>این صفحه محافظت شده است!</h1>;
}

Client-Side Rendering (CSR) وقتی کاربرد داره که بیشتر تعاملات و داده‌ ها بعد از لود صفحه و سمت مرورگر مدیریت بشن.
موارد استفاده:

  • صفحات کاملاً داینامیک که نیاز به تعامل زیادی دارن، مثل فرم‌ ها یا داشبورد ها.
  • وقتی که SEO اهمیت زیادی نداره.

مثال:
فرض کن یک فرم داری که داده‌ هاش باید بعد از کلیک روی دکمه ارسال، پردازش بشن و کاربر نتیجه رو فوراً ببینه. توی این حالت میتونی تمام پردازش‌ ها رو سمت مرورگر انجام بدی.

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

این کارها توی فایل next.config.js انجام میشه:

 

module.exports = {
async redirects() {
return [
{
source: ‘/old’,
destination: ‘/new’,
permanent: true, // یا false برای موقت
},
];
},
};

بخش چهارم سوالات مصاحبه Next.js

کامپوننت next/link یکی از ابزارهای کلیدی Next.js برای لینک‌ دهی بین صفحات هست. این کامپوننت از قابلیت رندرینگ سمت کلاینت (Client-side Navigation) استفاده میکنه، یعنی وقتی کاربر روی لینک کلیک میکنه، نیازی به بارگذاری مجدد کل صفحه نیست.

مثال:
فرض کن میخوای از صفحه اصلی به صفحه “درباره ما” لینک بدی:

import Link from ‘next/link’;

export default function Home() {
return (
<div>
<h1>صفحه اصلی</h1>
<Link href=”/about”>
<a>برو به صفحه درباره ما</a>
</Link>
</div>
);
}

وقتی کاربر روی لینک کلیک کنه، انتقال به صورت سریع و بدون رفرش صفحه انجام میشه.

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

راه ساده استفاده:

  1. یک کامپوننت Layout بساز:
export default function Layout({ children }) {
return (
<div>
<header>هدر</header>
<main>{children}</main>
<footer>فوتر</footer>
</div>
);
}
 
  1. از Layout توی صفحه‌ها استفاده کن:

import Layout from ‘../components/Layout’;

export default function About() {
return (
<Layout>
<h1>صفحه درباره ما</h1>
</Layout>
);
}

 

هوک useRouter بهت این امکان رو میده که به اطلاعات مربوط به مسیر فعلی دسترسی داشته باشی یا مسیرها رو برنامه‌ ریزی شده تغییر بدی.

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

  • بررسی پارامتر های URL
  • هدایت کاربر به مسیر دیگری
  • گرفتن اطلاعات مسیر فعلی

مثال:

 

import { useRouter } from ‘next/router’;

export default function Post() {
const router = useRouter();
const { id } = router.query;

return <h1>نمایش پست با شناسه {id}</h1>;
}

برای صفحات SSG که مسیر های داینامیک دارن، باید از تابع getStaticPaths استفاده کنی. این تابع مشخص میکنه که چه مسیر هایی در زمان بیلد ساخته بشن.

مثال:
فرض کن یه بلاگ داری و میخوای برای هر مقاله یه صفحه داشته باشی:

  1. فایل [id].js توی pages/posts/ بساز.
  2. توابع زیر رو اضافه کن:

export async function getStaticPaths() {
const paths = [{ params: { id: ‘1’ } }, { params: { id: ‘2’ } }];
return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
const post = { id: params.id, title: `پست شماره ${params.id}` };
return { props: { post } };
}

export default function Post({ post }) {
return <h1>{post.title}</h1>;
}

Next.js از فایل‌ های .env برای مدیریت متغیر های محیطی استفاده میکنه.

  1. فایل .env.local رو بساز و متغیرها رو توش تعریف کن:

NEXT_PUBLIC_API_URL=https://api.example.com

  1. متغیرها رو توی کد استفاده کن:

export default function Page() {
return <h1>API URL: {process.env.NEXT_PUBLIC_API_URL}</h1>;
}

توجه: متغیرهایی که با NEXT_PUBLIC_ شروع میشن، به کلاینت ارسال میشن.

 

برای فعال‌ سازی Lazy Loading توی Next.js، میتونی از dynamic استفاده کنی.
مثال:

import dynamic from ‘next/dynamic’;

const LazyComponent = dynamic(() => import(‘./components/LazyComponent’));

export default function Page() {
return (
<div>
<h1>صفحه اصلی</h1>
<LazyComponent />
</div>
);
}

بخش پنجم سوالات مصاحبه Next.js

برای ISR باید از revalidate در getStaticProps استفاده کنی. این ویژگی مشخص میکنه که هر چند ثانیه یک‌ بار صفحه دوباره ساخته بشه.
( تو ورژن های جدید نکست البته با fetch هندل میشه )

مثال:
فرض کن میخوای هر 10 ثانیه داده‌ های جدید رو برای یک صفحه داینامیک بگیری:

export async function getStaticPaths() {
return {
paths: [{ params: { id: ‘1’ } }, { params: { id: ‘2’ } }],
fallback: ‘blocking’,
};
}

export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();

return {
props: { post },
revalidate: 10, // صفحه هر 10 ثانیه بروزرسانی میشود
};
}

export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}

اگر نیاز داری کنترل بیشتری روی سرور داشته باشی، میتونی یک سرور سفارشی راه‌ اندازی کنی. برای این کار باید از فایل server.js استفاده کنی و Next.js رو داخل اون اجرا کنی:

const express = require(‘express’);
const next = require(‘next’);

const app = next({ dev: process.env.NODE_ENV !== ‘production’ });
const handle = app.getRequestHandler();

app.prepare().then(() => {
const server = express();

server.all(‘*’, (req, res) => {
return handle(req, res);
});

server.listen(3000, () => {
console.log(‘سرور در حال اجراست روی http://localhost:3000’);
});
});

برای پیاده‌ سازی Load Balancing، میتونی از Nginx استفاده کنی. فرض کن دو سرور داری که Next.js روی اون‌ ها اجرا میشه:

  1. فایل کانفیگ Nginx رو تغییر بده:

upstream next_backend {
server 192.168.1.100:3000;
server 192.168.1.101:3000;
}

server {
listen 80;

location / {
proxy_pass http://next_backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

سرورها حالا درخواست‌ ها رو بین دو  ماشین تقسیم میکنن.

برای استفاده از WebAssembly در Next.js، میتونی فایل‌ های .wasm رو داخل پوشه public قرار بدی و از اون‌ ها با استفاده از API WebAssembly استفاده کنی :

export default function WASMExample() {
async function loadWASM() {
const wasmModule = await fetch(‘/module.wasm’);
const buffer = await wasmModule.arrayBuffer();
const module = await WebAssembly.instantiate(buffer);
console.log(module.instance.exports.add(1, 2));
}

return <button onClick={loadWASM}>بارگذاری WebAssembly</button>;
}

حالا چه کنیم ؟!

حالا که تا اینجای لیست سوالات مصاحبه نکست جی اس رو خوندی، یه چیز برات روشن شده: دنیای Next.js یه مسیر هیجان‌ انگیزه که هرچی جلوتر میری، جذاب‌ تر و عمیق‌ تر میشه. سوالاتی که اینجا دیدی فقط یه نمونه کوچیک از چالش‌ هایی هستن که ممکنه تو مسیرت باهاشون مواجه بشی.
اما فرق یه توسعه‌ دهنده حرفه‌ ای با بقیه اینه که به این سوالات فقط به چشم مشکل نگاه نمی‌کنه؛ بلکه اونا رو به عنوان یه فرصت برای رشد و یادگیری میبینه.

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

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

درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام احمد جان
    خسته نباشی
    ممنون از زحمتایی که واسه این سوال و جواب‌ها کشیدی

    جاهایی که راجب api routes صحبت شده، یه تاکیدی رو این موضوع هست که api «ساده و کوچک» بسازیم ازشون استفاده می‌کنیم؟ چرا؟ چه محدودیتی هست که نمیشه مثلا یه سروری که با express.js یا … نوشته شده رو کاملا جایگزین کرد با api routes؟

    پاسخ

    • سلام امین جان قربااانت زنده باشی
      چه سوال مهم و کاربردی ( مرسی ازت که مطرح کردی )

      اولا که ما تو Next.js API Route محدودیت عملکردی داریم ( مثلا نمیتونیم API های طولانی مدت مثل وب سوکت داشته باشیم )
      مورد بعد اینکه ما محدودیت زمان اجرای API داریم تو محیط های serverless یعنی بهتره API Call های سریع و سبک رو داشته باشیم نه موارد سنگین و زمانبر.
      ضمن اینکه طراحی Next.js API Route بصورتی بوده که مناسب API های پیچیده نیست و نکست جی اس بنده خدا همزمان داره رندرینگ صفحات رو انجام میده و API Route رو هندل میکنه.

      پس اینو در نظر بگیر که API Route به درد این موارد نمیخوره :
      تو Next.js API Route اتصالات دائمی مثل وب سوکت نداریم.
      مدیریت State های پیچیده خیلی خیلی سخته و منطقی نیست.
      نصب و استفاده از middleware ها نسبت به Express.js خیلی سخت تره اینجا.
      ممکنه بعضی چیزا اینجا به درستی پشتیبانی نشه ( مثل مدیریت سشن، کوکی، ارتباط با پایگاه داده و پردازش داده های سنگین )

      پاسخ

دیدگاهتان را بنویسید