آموزش ساخت صفحات داینامیک در Next.js

 

همانطور که در دوره Next مجتمع فنی تهران بصورت مفصل بیان کردیم؛ ساخت صفحات داینامیک به توسعه دهندگان امکان می دهد تا محتوای متغیر و شخصی سازی شده را بر اساس آدرس های URL مختلف به کاربران نمایش دهند. این قابلیت برای وب سایت های مدرن مانند بلاگ ها، فروشگاه های آنلاین، پلتفرم های خبری و پروفایل های کاربری ضروری است و بهینه سازی موتورهای جستجو (SEO) و عملکرد را به شدت بهبود می بخشد. Next.js با ارائه یک فریم ورک قدرتمند و بهینه، توسعه این نوع صفحات را بسیار ساده تر و کارآمدتر می کند.

در دنیای پرسرعت وب امروز، انعطاف پذیری و کارایی از جمله مهم ترین ویژگی هایی هستند که یک اپلیکیشن وب باید داشته باشد. صفحات داینامیک دقیقاً همین نیاز را برآورده می کنند. آن ها به وب سایت ها اجازه می دهند تا هزاران یا حتی میلیون ها صفحه با محتوای منحصر به فرد تولید کنند، بدون اینکه نیاز به ایجاد دستی هر صفحه باشد. Next.js به عنوان یک فریم ورک React با قابلیت های رندرینگ قدرتمند، ابزارهای لازم را برای ساخت چنین صفحاتی در اختیار توسعه دهندگان قرار می دهد، از جمله قابلیت های پیش واکشی (Pre-fetching) و بهینه سازی های داخلی که تجربه کاربری و رتبه در موتورهای جستجو را بهبود می بخشند.

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

درک مبانی صفحات داینامیک در Next.js

ساخت صفحات داینامیک یکی از اساسی ترین نیازها در توسعه وب مدرن است. این صفحات، محتوایی را بر اساس پارامترهای مختلفی که در URL قرار می گیرند، نمایش می دهند. Next.js با رویکرد مسیریابی مبتنی بر فایل (File-system Routing)، این فرآیند را به شدت ساده کرده است. در این بخش، به تعریف صفحات داینامیک و نحوه عملکرد سگمنت های داینامیک در Next.js می پردازیم.

صفحات داینامیک چیست و چگونه کار می کنند؟

صفحات داینامیک، صفحاتی هستند که محتوای آن ها ثابت نیست و بر اساس یک ورودی خاص (معمولاً یک شناسه یا نام مستعار در URL) تغییر می کند. برای مثال، یک وب سایت خبری ممکن است دارای مسیر `/articles/next-js-dynamic-pages` باشد که در آن، `next-js-dynamic-pages` یک شناسه داینامیک برای مقاله است. یا یک فروشگاه آنلاین، مسیر `/products/laptop-pro` را دارد که `laptop-pro` نام مستعار (slug) یک محصول خاص است. هدف اصلی این صفحات، جلوگیری از تکرار کد و فراهم آوردن یک ساختار منظم برای مدیریت محتوای حجیم و متغیر است.

Next.js از یک سیستم مسیریابی مبتنی بر فایل استفاده می کند. این به این معنی است که ساختار پوشه ها و نام فایل ها مستقیماً بر روی مسیرهای URL اپلیکیشن شما تأثیر می گذارند. برای ایجاد یک مسیر داینامیک، شما یک فایل یا پوشه با براکت `[]` در نام آن ایجاد می کنید. به عنوان مثال، اگر پوشه ای به نام `app/blog/[slug]` داشته باشید، هر URL مانند `/blog/my-first-post` یا `/blog/another-article` توسط این مسیر مدیریت می شود. این سیستم مسیریابی، توسعه دهندگان را قادر می سازد تا با سازماندهی کد خود در یک ساختار منطقی، به راحتی مسیرهای داینامیک را تعریف کنند.

سگمنت های داینامیک: قلب مسیرهای داینامیک

سگمنت های داینامیک (Dynamic Segments) بخش هایی از URL هستند که مقدار آن ها متغیر است. در Next.js، این سگمنت ها با استفاده از براکت `[]` در نام پوشه ها یا فایل ها تعریف می شوند. برای مثال، `[id]` یک سگمنت داینامیک است که شناسه یک آیتم را دریافت می کند، در حالی که `[slug]` معمولاً برای نام های مستعار استفاده می شود. دو نوع اصلی از سگمنت های داینامیک وجود دارد:

1. سگمنت های تک: مانند `[id]` یا `[slug]` که یک بخش از URL را دریافت می کنند.
2. سگمنت های Catch-all: مانند `[…slug]` که می توانند چندین بخش از URL را دریافت کنند. این قابلیت برای ساخت وب سایت های بلاگ با ساختار `/blog/category/sub-category/post-title` بسیار مفید است.
3. سگمنت های Optional Catch-all: مانند `[[…slug]]` که مشابه Catch-all عمل می کنند اما اختیاری هستند، به این معنی که حتی اگر هیچ سگمنتی در آن موقعیت نباشد، مسیر همچنان مطابقت دارد.

مقادیر این سگمنت های داینامیک از طریق آبجکت `params` قابل دسترسی هستند. همچنین، Next.js آبجکت `searchParams` را برای دسترسی به پارامترهای کوئری (Query Parameters) در URL (مثلاً `?page=1&sort=asc`) فراهم می کند. این دو آبجکت، ابزارهای قدرتمندی برای استخراج اطلاعات از URL و نمایش محتوای مرتبط هستند. یک App Router که صفحات داینامیک را به خوبی مدیریت می کند، به شما کمک می کند تا تجربه ای روان و سریع برای کاربران خود فراهم کنید.

ساخت صفحات داینامیک با App Router (رویکرد مدرن)

App Router، رویکرد جدید و پیشرفته Next.js برای مسیریابی و رندرینگ است که بر پایه React Server Components بنا شده است. این رویکرد، نحوه ساخت صفحات داینامیک و مدیریت داده ها را به طور قابل توجهی تغییر داده و بهبود بخشیده است. استفاده از App Router یک گام مهم برای هر توسعه دهنده ای است که به دنبال بهترین کارایی و تجربه توسعه است.

ایجاد مسیرهای داینامیک در App Router

در App Router، مسیرهای داینامیک در داخل پوشه `app` ایجاد می شوند. ساختار فایل ها و پوشه ها نقش کلیدی در تعریف مسیرها دارد. برای مثال، اگر می خواهید صفحه ای داینامیک برای نمایش جزئیات یک پست بلاگ داشته باشید، ساختار پوشه بندی به شکل `app/blog/[slug]/page.js` خواهد بود. در این ساختار، `[slug]` یک پوشه است که نشان دهنده یک سگمنت داینامیک است و فایل `page.js` در داخل آن، مسئول رندر کردن محتوای صفحه است.

برای دسترسی به مقادیر داینامیک URL در Server Components، Next.js آبجکت `params` را به عنوان یک `prop` به کامپوننت صفحه شما ارسال می کند. این آبجکت شامل کلید-مقدار هایی است که نام سگمنت های داینامیک (بدون براکت) و مقادیر آن ها را در بر می گیرد. به عنوان مثال، اگر مسیر `/blog/my-first-post` باشد و پوشه داینامیک شما `[slug]` باشد، `params.slug` مقدار `my-first-post` را خواهد داشت. این شیوه، دسترسی به اطلاعات مسیر را بسیار ساده و مستقیم می کند.

// app/blog/[slug]/page.js export default async function BlogPost({ params }) { const { slug } = params; // در اینجا می توانید از slug برای واکشی داده ها استفاده کنید const post = await fetch(`https://api.example.com/posts/${slug}`).then(res => res.json()); if (!post) { // می توانید خطای 404 را مدیریت کنید } return (

); }

App Router در Next.js، با تکیه بر React Server Components، رویکردی مدرن و کارآمد برای توسعه صفحات داینامیک ارائه می دهد و بهینه سازی های خودکار را برای بهبود عملکرد و SEO به ارمغان می آورد.

استراتژی های واکشی داده (Data Fetching) برای صفحات داینامیک در App Router

یکی از مهم ترین قابلیت های App Router، انعطاف پذیری آن در واکشی داده است. با توجه به ماهیت Server Components، واکشی داده می تواند به صورت مستقیم در سرور و در زمان ساخت یا در زمان درخواست انجام شود. این موضوع به شما امکان می دهد تا بهترین استراتژی را برای هر سناریو انتخاب کنید.

۲.۲.۱. Server-Side Rendering (SSR) با fetch (پیش فرض در Server Components)

در Next.js App Router، هر `fetch` در یک Server Component به طور پیش فرض به عنوان SSR عمل می کند. این بدان معناست که داده ها در هر درخواست (Request) جدید کاربر به سرور واکشی شده و صفحه HTML کامل شده به کلاینت ارسال می شود. این رویکرد برای محتوایی که نیاز به به روزرسانی لحظه ای دارد (مانند اخبار زنده، وضعیت سهام یا اطلاعات کاربری شخصی سازی شده) بسیار مناسب است.

مزیت اصلی SSR، اطمینان از نمایش جدیدترین اطلاعات به کاربر و همچنین بهبود SEO است، زیرا موتورهای جستجو HTML کامل را دریافت می کنند. Next.js همچنین یک سیستم کشینگ قوی برای `fetch` ارائه می دهد. شما می توانید با استفاده از گزینه های `cache` و `revalidate` در `fetch`، رفتار کشینگ را کنترل کنید. `cache: ‘no-store’` برای جلوگیری از کشینگ و `next: { revalidate: 60 }` برای بازاعتبار (Revalidation) داده ها پس از 60 ثانیه استفاده می شود. این قابلیت ها، را به ابزاری قدرتمند برای SSR تبدیل می کنند. برای و این رویکرد بسیار پرکاربرد است.

// app/products/[id]/page.js export default async function ProductDetails({ params }) { const { id } = params; const product = await fetch(`https://api.example.com/products/${id}`, { next: { revalidate: 3600 } }) .then(res => res.json()); if (!product) { // مدیریت 404 } return (

); }

۲.۲.۲. Static Site Generation (SSG) با generateStaticParams

Static Site Generation (SSG) در زمان Build اپلیکیشن، صفحات را به صورت استاتیک تولید می کند. این رویکرد برای محتوایی که ثابت یا کم تغییر است (مانند پست های بلاگ قدیمی، صفحات درباره ما یا محصولات پرفروش) ایده آل است. صفحات تولیدشده بسیار سریع بارگذاری می شوند و فشار زیادی از روی سرور برداشته می شود. همچنین SEO این صفحات عالی است.

در App Router، تابع `generateStaticParams` برای تعیین مسیرهای داینامیک که باید در زمان Build به صورت استاتیک تولید شوند، استفاده می شود. این تابع، آرایه ای از آبجکت ها را باز می گرداند که هر آبجکت شامل پارامترهای لازم برای یک مسیر داینامیک است. این یک قابلیت کلیدی در App Router است که امکان می دهد وب سایت های بسیار سریع و بهینه ایجاد کنید. و با این قابلیت تجربه ای بی نظیر برای کاربران فراهم می کنند.

// app/blog/[slug]/page.js export async function generateStaticParams() { const posts = await fetch(‘https://api.example.com/posts’).then(res => res.json()); return posts.map((post) => ({ slug: post.slug, })); } export default function BlogPost({ params }) { // … (کد قبلی برای واکشی پست بر اساس slug) }

۲.۲.۳. Client-Side Rendering (CSR) در Client Components

با وجود تمام مزایای SSR و SSG، گاهی اوقات Client-Side Rendering (CSR) بهترین گزینه است. این رویکرد برای محتوای کاملاً شخصی سازی شده، داشبوردهای کاربری یا بخش هایی از اپلیکیشن که نیاز به تعاملات زیاد با کاربر دارند و داده های آن ها پس از بارگذاری اولیه صفحه به صورت لحظه ای تغییر می کنند، مناسب است. در App Router، شما می توانید با استفاده از `use client` در بالای فایل، یک کامپوننت را به Client Component تبدیل کنید و سپس از `useEffect` و کتابخانه هایی مانند SWR یا React Query برای واکشی داده در سمت کلاینت استفاده کنید.

// app/dashboard/profile/page.js use client; import { useState, useEffect } from ‘react’; export default function UserProfile() { const [userData, setUserData] = useState(null); useEffect(() => { async function fetchProfile() { const res = await fetch(‘/api/user/profile’); const data = await res.json(); setUserData(data); } fetchProfile(); }, []); if (!userData) { return

در حال بارگذاری اطلاعات کاربر…

; } return (

); }

۲.۳. مدیریت خطاهای 404 (NotFound) و صفحات Loading در App Router

یکی از جنبه های مهم تجربه کاربری، مدیریت صحیح خطاهایی مانند 404 (صفحه یافت نشد) و همچنین نمایش وضعیت بارگذاری به کاربر است. Next.js App Router ابزارهای قدرتمندی برای این منظور فراهم می کند. در Server Components، شما می توانید با فراخوانی تابع `notFound()` از `next/navigation`، یک صفحه 404 را فعال کنید. این تابع باید زمانی فراخوانی شود که داده مورد نظر برای یک مسیر داینامیک پیدا نشود.

علاوه بر این، با ایجاد فایل `not-found.js` در ریشه مسیر یا در داخل یک سگمنت، می توانید صفحه 404 سفارشی خود را تعریف کنید. این فایل UI اختصاصی برای زمانی که یک مسیر یافت نمی شود، ارائه می دهد و تجربه کاربری بهتری نسبت به صفحه خطای پیش فرض مرورگر ایجاد می کند. برای نمایش وضعیت بارگذاری، می توانید فایل `loading.js` را در داخل یک سگمنت ایجاد کنید. این کامپوننت قبل از اتمام واکشی داده ها توسط Server Component مربوطه، رندر می شود و به کاربر اطلاع می دهد که محتوا در حال بارگذاری است.

// app/blog/[slug]/page.js (مثالی از فراخوانی notFound) import { notFound } from ‘next/navigation’; export default async function BlogPost({ params }) { const { slug } = params; const post = await fetch(`https://api.example.com/posts/${slug}`).then(res => res.json()); if (!post) { notFound(); // اگر پست یافت نشد، 404 را فعال کن } // … } // app/blog/[slug]/not-found.js (فایل سفارشی 404) export default function NotFound() { return (

); } // app/blog/[slug]/loading.js (فایل سفارشی Loading) export default function Loading() { return

در حال بارگذاری پست بلاگ…

; }

۲.۴. ناوبری به صفحات داینامیک با next/link

کامپوننت `next/link` عنصر اصلی برای ناوبری در Next.js است و مزایای متعددی را برای صفحات داینامیک فراهم می کند. استفاده از `next/link` نه تنها ناوبری را در سمت کلاینت فعال می کند (یعنی بدون رفرش کامل صفحه)، بلکه قابلیت Pre-fetching خودکار را نیز به ارمغان می آورد. این بدان معناست که Next.js به طور هوشمندانه محتوای لینک هایی که احتمالاً کاربر روی آن ها کلیک می کند را پیش واکشی می کند تا هنگام کلیک، صفحه تقریباً بلافاصله بارگذاری شود. این ویژگی سرعت اپلیکیشن را به شدت افزایش می دهد و تجربه کاربری را بهبود می بخشد.

// app/blog/page.js (مثالی برای لیست پست ها) import Link from ‘next/link’; export default async function BlogList() { const posts = await fetch(‘https://api.example.com/posts’).then(res => res.json()); return (

۲.۵. استفاده از Route Handlers (API Routes) برای داده های داینامیک

Route Handlers (که در گذشته با نام API Routes شناخته می شدند) به شما امکان می دهند تا بک اند اپلیکیشن خود را مستقیماً در کنار فرانت اند Next.js بسازید. این قابلیت برای ایجاد APIهای RESTful سفارشی برای واکشی، ایجاد، به روزرسانی و حذف داده ها در صفحات داینامیک بسیار مفید است. شما می توانید Route Handlers را در پوشه `app/api` ایجاد کنید و سپس در Server Components یا Client Components از آن ها استفاده کنید.

برای مثال، می توانید یک Route Handler داینامیک در مسیر `app/api/posts/[slug]/route.js` ایجاد کنید که وظیفه واکشی جزئیات یک پست بلاگ خاص را بر عهده دارد. این Route Handler می تواند به دیتابیس یا یک سرویس خارجی متصل شده و داده ها را بر اساس `slug` ارائه شده در URL بازگرداند. استفاده از Route Handlers، معماری یکپارچه (Monorepo) را برای پروژه های Next.js تقویت می کند و بهینه سازی دسترسی به داده ها را فراهم می آورد. با این قابلیت ها یک فریم ورک همه کاره است که به شما کمک می کند تا اپلیکیشن های کامل بسازید.

// app/api/posts/[slug]/route.js import { NextResponse } from ‘next/server’; export async function GET(request, { params }) { const { slug } = params; // در اینجا، داده ها را از دیتابیس یا سرویس دیگر واکشی کنید const post = await getPostFromDatabase(slug); if (!post) { return NextResponse.json({ message: ‘Post not found’ }, { status: 404 }); } return NextResponse.json(post); }

نگاهی سریع به ساخت صفحات داینامیک با Pages Router (رویکرد قبلی)

پیش از معرفی App Router، Next.js از Pages Router برای مسیریابی استفاده می کرد. اگرچه App Router رویکرد مدرن و توصیه شده است، اما شناخت Pages Router برای کار با پروژه های قدیمی تر یا درک تکامل Next.js ضروری است. در این زمینه نیز قابلیت های زیادی برای داشته است.

۳.۱. ایجاد فایل داینامیک در Pages Router

در Pages Router، فایل های داینامیک در پوشه `pages` ایجاد می شوند، برای مثال `pages/blog/[slug].js`. برای دسترسی به مقادیر داینامیک URL، از آبجکت `router.query` که از `next/router` قابل دسترسی است، استفاده می شود. این آبجکت حاوی پارامترهای مسیر داینامیک و همچنین پارامترهای کوئری است. با استفاده از قلاب `useRouter` می توانید به این آبجکت دسترسی پیدا کنید.

// pages/blog/[slug].js import { useRouter } from ‘next/router’; import { useEffect, useState } from ‘react’; export default function BlogPostPage() { const router = useRouter(); const { slug } = router.query; const [post, setPost] = useState(null); useEffect(() => { if (slug) { // واکشی داده در سمت کلاینت fetch(`/api/posts/${slug}`) .then(res => res.json()) .then(data => setPost(data)); } }, [slug]); if (!post) return

در حال بارگذاری…

; return (

); }

۳.۲. استراتژی های واکشی داده در Pages Router

Pages Router توابع خاصی را برای واکشی داده در زمان سرور یا در زمان بیلد ارائه می دهد:

۳.۲.۱. getServerSideProps برای SSR:

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

// pages/products/[id].js export async function getServerSideProps(context) { const { id } = context.params; const res = await fetch(`https://api.example.com/products/${id}`); const product = await res.json(); if (!product) { return { notFound: true, }; } return { props: { product }, }; } export default function ProductPage({ product }) { // … }

۳.۲.۲. getStaticProps و getStaticPaths برای SSG:

تابع `getStaticPaths` مسیرهای داینامیک را که باید در زمان بیلد تولید شوند، تعیین می کند. سپس `getStaticProps` داده های مورد نیاز برای هر یک از این مسیرها را واکشی می کند. این رویکرد برای سایت های استاتیک یا بلاگ ها بسیار پرسرعت و SEO-friendly است. در App Router، معادل `getStaticPaths` و `getStaticProps` به ترتیب `generateStaticParams` و واکشی داده در Server Component است.

// pages/blog/[slug].js export async function getStaticPaths() { const res = await fetch(‘https://api.example.com/posts’); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: false }; // fallback: ‘blocking’ یا true برای ISR } export async function getStaticProps({ params }) { const res = await fetch(`https://api.example.com/posts/${params.slug}`); const post = await res.json(); return { props: { post }, revalidate: 60, // برای Incremental Static Regeneration (ISR) }; } export default function BlogPost({ post }) { // … }

۳.۲.۳. getInitialProps:

این تابع یک روش قدیمی تر برای واکشی داده در Pages Router بود که هم در سمت سرور و هم در سمت کلاینت اجرا می شد. با معرفی `getServerSideProps` و `getStaticProps`، استفاده از آن در پروژه های جدید کمتر توصیه می شود و در App Router کاملاً منسوخ شده است. با این حال، در و سایر دوره های در ، این مفاهیم به طور کامل پوشش داده می شوند.

۳.۳. مدیریت Redirects و Rewrites

در Next.js، می توانید Redirects (تغییر مسیر کاربر به یک URL دیگر) و Rewrites (بازنویسی مسیر داخلی بدون تغییر URL در مرورگر) را پیکربندی کنید. این تنظیمات در فایل `next.config.js` انجام می شوند و برای مدیریت مسیرهای منسوخ شده، SEO و بهبود تجربه کاربری اهمیت زیادی دارند. هر دو قابلیت در App Router و Pages Router قابل استفاده هستند. با این ابزارها به شما کمک می کند تا یک و یک کامل شوید.

نکات پیشرفته و بهترین شیوه ها در Next.js

پس از آشنایی با مبانی و روش های ساخت صفحات داینامیک، توجه به نکات پیشرفته و بهترین شیوه ها برای توسعه یک اپلیکیشن مقیاس پذیر و با کارایی بالا در Next.js ضروری است. در ، این موارد به شما کمک می کنند تا از فریم ورک به بهترین نحو استفاده کنید.

۴.۱. بهینه سازی عملکرد (Performance Optimization)

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

• استفاده بهینه از Caching: در App Router، `fetch` به طور هوشمندانه پاسخ ها را کش می کند. با تنظیم هدرهای `Cache-Control` در پاسخ های API خود یا استفاده از گزینه `revalidate` در `fetch`، می توانید رفتار کشینگ را به دقت مدیریت کنید. این کار باعث کاهش درخواست های مکرر به سرور و افزایش سرعت بارگذاری می شود.
• انتخاب استراتژی رندرینگ صحیح: انتخاب بین SSR، SSG، ISR و CSR بر اساس نوع محتوا و نیازهای هر صفحه بسیار مهم است. برای محتوای ثابت SSG و برای محتوای شخصی سازی شده CSR (با دقت) مناسب است. SSR و ISR تعادلی بین این دو ارائه می دهند.
• Lazy Loading کامپوننت ها با next/dynamic: برای کامپوننت هایی که بلافاصله نیاز به رندر شدن ندارند (مثلاً کامپوننت های پایین صفحه یا مودال ها)، از `next/dynamic` استفاده کنید. این کار حجم باندل اولیه را کاهش داده و زمان بارگذاری صفحه را بهبود می بخشد.

۴.۲. ملاحظات SEO برای صفحات داینامیک

بهینه سازی برای موتورهای جستجو در صفحات داینامیک حیاتی است تا محتوای شما به درستی ایندکس شده و کاربران آن را پیدا کنند:

• تنظیم داینامیک Meta Tags با generateMetadata در App Router: در App Router، می توانید با استفاده از تابع `generateMetadata`، تگ های `title`، `description` و سایر Meta Tags را به صورت داینامیک برای هر صفحه تنظیم کنید. این تابع یک prop به نام `params` را دریافت می کند که به شما امکان می دهد متادیتا را بر اساس محتوای داینامیک صفحه تولید کنید. این قابلیت برای SEO صفحات داینامیک بسیار مهم است.
• اهمیت Sitemap و RSS Feed: اطمینان حاصل کنید که Sitemap وب سایت شما به طور خودکار تمام مسیرهای داینامیک را شامل می شود. همچنین، RSS Feed می تواند به توزیع محتوای جدید شما کمک کند.
• Canonical URLs: برای جلوگیری از مشکلات محتوای تکراری (Duplicate Content) در موتورهای جستجو، از Canonical URLs استفاده کنید، به خصوص اگر یک محتوا از چندین مسیر داینامیک قابل دسترسی باشد.

// app/blog/[slug]/page.js import type { Metadata } from ‘next’; type Props = { params: { slug: string }; searchParams: { [key: string]: string | string[] | undefined }; }; export async function generateMetadata({ params, searchParams }: Props): Promise { // واکشی داده های پست برای ساخت متادیتا const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json()); return { title: post.title, description: post.excerpt, openGraph: { images: [post.image], }, }; }

۴.۳. مدیریت وضعیت بارگذاری و خطا (Loading & Error States)

تجربه کاربری تنها به محتوای صحیح محدود نمی شود؛ مدیریت وضعیت های میانی و خطا نیز اهمیت دارد:

• پیاده سازی Skeleton Loaders و Spinners: به جای نمایش یک صفحه خالی در حین بارگذاری داده ها، از Skeleton Loaders (نمایش طرح کلی محتوا) یا Spinners استفاده کنید. فایل `loading.js` در App Router ابزار مناسبی برای این کار است.
• استفاده از error.js در App Router و _error.js در Pages Router: برای مدیریت خطاهای زمان اجرا در Server Components یا Client Components، می توانید فایل `error.js` را در App Router ایجاد کنید. این فایل، یک Boundary Error React است که خطاها را به طور زیبا مدیریت می کند. در Pages Router، فایل `_error.js` برای مدیریت خطاهای سمت سرور و کلاینت استفاده می شود.

۴.۴. امنیت در صفحات داینامیک

امنیت، به ویژه هنگام سرویس دهی محتوای داینامیک، نباید نادیده گرفته شود:

• جلوگیری از Cross-Site Scripting (XSS): اگر در صفحات داینامیک، محتوای تولیدشده توسط کاربر را نمایش می دهید، همیشه ورودی ها را قبل از رندر کردن، sanitize کنید تا از حملات XSS جلوگیری شود.
• اعتبارسنجی و Sanitization ورودی های داینامیک: همیشه ورودی های دریافتی از URL (مانند `params` یا `searchParams`) را اعتبارسنجی کنید تا از تزریق داده های مخرب یا رفتارهای غیرمنتظره جلوگیری شود.

با رعایت این نکات و شرکت در ، می توانید مهارت های خود را در ارتقا دهید. و در به شما کمک می کنند تا این بهترین شیوه ها را به کار بگیرید.

ویژگی	App Router	Pages Router
فایل مسیریابی	page.js داخل سگمنت های پوشه app	.js یا .jsx داخل پوشه pages
سگمنت داینامیک	پوشه [slug]	فایل [slug].js
دسترسی به پارامترها	props.params در Server Component	router.query (با useRouter)
SSR	fetch در Server Component (پیش فرض)	getServerSideProps
SSG	generateStaticParams و fetch در Server Component	getStaticPaths و getStaticProps
ISR	گزینه revalidate در fetch (در Server Component)	گزینه revalidate در getStaticProps
مدیریت خطا (404)	notFound() و فایل not-found.js	برگرداندن notFound: true از Data Fetching، فایل 404.js
مدیریت بارگذاری	فایل loading.js	نمایش دستی حالت بارگذاری در کامپوننت (با استفاده از state)
Meta Data داینامیک	generateMetadata	Head از next/head (در Client Component)

سوالات متداول

آیا می توانم از getServerSideProps در App Router استفاده کنم؟ اگر نه، جایگزین آن چیست؟

خیر، `getServerSideProps` در App Router وجود ندارد. جایگزین آن، استفاده از `fetch` یا هر روش واکشی داده دیگری به طور مستقیم در Server Components است.

بهترین روش برای واکشی داده در یک صفحه داینامیک Next.js (در App Router) بر اساس سناریوهای مختلف چیست؟

بهترین روش بسته به نیاز شما متفاوت است: برای محتوای پویا و لحظه ای از `fetch` در Server Components (SSR) استفاده کنید؛ برای محتوای ثابت یا کم تغییر از `generateStaticParams` و `fetch` (SSG)؛ و برای محتوای کاملاً شخصی سازی شده و تعاملی از CSR در Client Components استفاده کنید.

چگونه می توانم صفحات 404 و 500 سفارشی را برای مسیرهای داینامیک در Next.js ایجاد و مدیریت کنم؟

در App Router، با ایجاد فایل `not-found.js` برای خطای 404 و `error.js` برای خطاهای زمان اجرا (که شامل خطاهای 500 می شود) می توانید صفحات خطای سفارشی بسازید.

تفاوت اصلی بین generateStaticParams و getStaticPaths چیست و چه زمانی از هر کدام استفاده می شود؟

`generateStaticParams` (در App Router) و `getStaticPaths` (در Pages Router) هر دو برای تعریف مسیرهای داینامیک SSG استفاده می شوند. تفاوت اصلی در نحوه استفاده و ساختار API آن ها در دو سیستم مسیریابی متفاوت Next.js است.

آیا Next.js برای توسعه اپلیکیشن های Enterprise مناسب است؟

بله، Next.js با قابلیت هایی مانند SSR، SSG، مسیریابی پیشرفته، بهینه سازی SEO و عملکرد بالا، یک انتخاب عالی برای توسعه اپلیکیشن های در مقیاس Enterprise است. آموزش و در به شما در این زمینه کمک می کند.