معرفی اصول فولدرمحور و Routing در Next.js
سلام! امروز میخوایم یه موضوع خیلی مهم و کاربردی تو دنیای برنامهنویسی وب با Next.js رو با هم بررسی کنیم: اصول فولدرمحور یا همون Routing در Next.js. حالا اگه اسمش یه کم عجیب به نظر میاد نگران نباش، قراره همه چیز رو ساده و قدم به قدم با هم یاد بگیریم، حتی اگه تا حالا هیچ چیزی درباره Next.js نشنیده باشی.
ساختار صفحات و فایلها در Next.js
خب، اول یه سوال خیلی ساده: وقتی وارد یه سایت میشی و روی یه لینک کلیک میکنی، چطوری مرورگر میدونه که باید چه صفحهای رو نشون بده؟ درست حدس زدی، اینجا پای Routing وسط میاد. Routing در واقع همون مسیریه که مرورگر باید طی کنه تا به صفحه درست برسه.
تو Next.js، چیز جالب و راحت اینه که Routing تقریبا خودش انجام میشه. یعنی دیگه لازم نیست مثل بعضی فریمورک های دیگه کلی کد بنویسی تا مسیرها رو تعریف کنی. فقط کافیه فایلها و فولدرها رو تو پروژه درست بچینی، Next.js خودش مسیرها رو میسازه. به همین دلیل بهش میگیم اصول فولدرمحور یا File-based Routing.
حالا یه مثال واقعی بزنیم تا کاملاً واضح بشه. فرض کن تو یه پروژه Next.js یه فولدر داری به اسم pages. این فولدر جاییه که همه صفحات سایتت اونجا قرار میگیرن. مثلاً:
/pages index.js about.js contact.js
اینجوری Next.js به طور خودکار میفهمه:
– index.js میشه صفحه اصلی سایت، یعنی وقتی کاربر به آدرس yourwebsite.com میره این صفحه باز میشه.
– about.js میشه صفحه درباره ما، یعنی وقتی کاربر به yourwebsite.com/about میره، این صفحه رو میبینه.
– contact.js هم صفحه تماس با ماست، یعنی مسیرش میشه yourwebsite.com/contact.
یعنی فقط با درست کردن فایلها و گذاشتن اسم مناسب، مسیرها خودشون ایجاد میشن! حالا دیگه نیاز نیست نگران تعریف مسیرها و کنترلرها باشی، چون Next.js خودش همه چی رو مدیریت میکنه.
ساختار صفحات و فایلها در Next.js
تا الان فهمیدیم که در Next.js مسیرها یا Routing تقریبا خودش ایجاد میشه و فولدر pages قلب ماجراست. حالا بیایم ببینیم چطور فایلها و فولدرها رو بسازیم تا سایتمون درست کار کنه و چطور میتونیم محتوا رو تو صفحات نمایش بدیم.
1. صفحه اصلی یا Home Page
همونطور که گفتیم، فایل index.js یا index.tsx (اگه از TypeScript استفاده میکنیم) داخل فولدر pages صفحه اصلی سایت هست. یعنی وقتی کاربر آدرس اصلی سایتت رو باز میکنه، این فایل اجرا میشه.
2. صفحات داخلی یا Secondary Pages
برای صفحات دیگه، فقط کافیه فایل جدید بسازیم. مثلا یک صفحه درباره ما (about.js) یا تماس با ما (contact.js). با Routing خودکار بدون هیچ کدنویسی اضافهای این مسیرها ساخته میشن! این سیستم خیلی کار رو راحت میکنه.
3. فولدرها و صفحات گروهبندی شده
حالا فرض کن یه سری صفحات داری که مربوط به یه موضوع خاص هست، مثل مقالات بلاگ. به جای اینکه همه فایلها توی pages باشن، میتونی یه فولدر بسازی:
/pages blog/ first-post.js second-post.js
اینجوری مسیرها به شکل زیر میشن:
yourwebsite.com/blog/first-post
yourwebsite.com/blog/second-post
مزیت این کار اینه که صفحات مرتبط با هم تو یه فولدر قرار میگیرن و وقتی پروژه بزرگ شد، همه چیز مرتب و قابل مدیریت میمونه.
4. صفحات داینامیک (Dynamic Pages)
یه قابلیت خیلی جالب Next.js اینه که مسیرها میتونن داینامیک باشن. مثلا میخوای صفحات کاربرها با ID متفاوت داشته باشی.
در مسیر pages/users/[id].js/:
import { useRouter } from ‘next/router’
export default function UserPage() {
const router = useRouter()
const { id } = router.query
return (
<div>
<h1>صفحه کاربر {id}</h1>
<p>این صفحه مخصوص کاربر با شناسه {id} است.
</p>
</div>
) }
اینجوری وقتی کاربر به yourwebsite.com/users/1 میره، صفحه مخصوص کاربر شماره 1 باز میشه و برای yourwebsite.com/users/42 هم صفحه شماره 42 نمایش داده میشه. نیازی به نوشتن مسیر جداگانه برای هر کاربر نیست.
5. نکات کاربردی برای فایلها
نام فایلها مهمه: Next.js اسم فایل رو میگیره و مسیر رو درست میکنه. پس حواست باشه از فاصله یا کاراکترهای عجیب استفاده نکنی.
index.js داخل فولدر: اگه یه فولدر داخل pages داری و میخوای مسیرش بدون نوشتن اسم فایل باز بشه، فایل index.js بساز. مثال:
/pages/blog/index.js
مسیرش میشه yourwebsite.com/blog و دیگه لازم نیست کاربر /blog/index بنویسه.
استفاده از JSX: محتوای صفحات با JSX نوشته میشه، یعنی میتونی همزمان HTML و جاوااسکریپت رو با هم ترکیب کنی و محتوای پویا بسازی.
لینکدهی بین صفحات و ناوبری در Next.js
تا اینجای کار فهمیدیم که Next.js چطور مسیرها رو فقط با ساختن فایل و فولدر برای ما ایجاد میکنه. اما حالا وقتشه ببینیم کاربر چطور بین این صفحات جابهجا میشه؟ یکی از مهمترین چیزهایی که هر وبسایت لازم داره، سیستم ناوبری یا Navigation هست؛ یعنی همون منوها و لینکهایی که کاربر روی اونها کلیک میکنه تا از یه صفحه به صفحه دیگه بره.
1. چرا نباید از تگ a معمولی استفاده کنیم؟
اگه تازهکار باشی، شاید اولین فکری که به ذهنت برسه این باشه که از همون <“…”=a href> استفاده کنی. اما تو Next.js این روش چندتا مشکل ایجاد میکنه:
- کل صفحه دوباره بارگذاری میشه (Full Page Reload)
- سرعت سایت پایین میاد
- تجربه کاربری بد میشه
- مزیتهای داخلی Next.js مثل Routing سمت کلاینت از بین میره
پس Next.js یه کامپوننت مخصوص برای لینکسازی داره به اسم <Link>.
2. استفاده از Link برای ناوبری سریع و بدون رفرش
کامپوننت Link کاری میکنه که وقتی کاربر روی لینک کلیک میکنه، صفحه بدون رفرش کامل لود بشه. این یعنی سرعت بالا، مصرف کمتر منابع، و تجربه کاربری خیلی بهتر. یه مثال ساده:
import Link from ‘next/link’
export default function Home() {
return (
<div>
<h1>صفحه اصلی</h1>
<Link href=”/about”>رفتن به صفحه درباره ما</Link>
</div>
) }
وقتی روی این لینک کلیک کنی، خیلی سریع میپره به صفحه about بدون اینکه کل صفحه رفرش بشه. این یکی از چیزهایی هست که باعث شده Next.js انقدر محبوب و سریع باشه.
3. ساختن منوی ساده برای کل سایت
گه سایت آموزشی یا محتوایی درست میکنی، معمولاً یک منوی همیشگی داری که تو همه صفحات دیده میشه. میتونی این منو رو توی یک کامپوننت جدا بسازی و تو صفحات مختلف استفاده کنی.
داخل کامپوننت Navbar.js:
import Link from ‘next/link’
export default function Navbar() {
return (
<nav>
<Link href=”/”>خانه</Link> |{” “} <Link href=”/about”>درباره ما</Link> |{” “} <Link href=”/contact”>تماس با ما</Link>
</nav>
) }
بعد تو صفحهها میتونی این Navbar رو وارد کنی:
import Navbar from “../components/Navbar”
export default function About() {
return (
<div>
<Navbar />
<h1>درباره ما</h1>
</div>
) }
اینجوری کاربر همیشه یه مسیر مشخص برای گشتن تو سایت داره.
4. لینکهای داینامیک
اگه یادت باشه تو بخش قبل درباره مسیرهای داینامیک حرف زدیم. لینک دادن به اونها هم خیلی سادهس:
<Link href=”/users/5″>نمایش کاربر 5</Link>
یا حتی میتونی مقدار رو از جاوااسکریپت بگیری:
const userId = 12; <Link href={/users/${userId}}>نمایش کاربر 12</Link>
5. ویژگی replace و scroll
کامپوننت Link چندتا ویژگی مفید هم داره:
- replace
به جای اینکه یک صفحه جدید به تاریخچه مرورگر اضافه کنه، همون صفحه فعلی رو جایگزین میکنه. برای مواقع خاص خوبه. - scroll
بعد از رفتن به صفحه جدید، صفحه رو اسکرول میکنه به بالا. به طور پیشفرض فعال هست، ولی میتونی خاموشش هم بکنی.
مثال:
<Link href=”/about” replace scroll={false}> رفتن بدون اسکرول به بالا </Link>
6. لینکهای داخل کامپوننتها
چیزی که خیلی مهمه اینه که Link فقط مخصوص صفحات نیست، میتونی داخل لیستها، کارتها، باکس مقالات، اسلایدر و هرجایی استفاده کنی.
مثلا کارت مقاله:
<Link href={/blog/${post.slug}}>
<div className=”card”>
<h3>{post.title}</h3>
<p>{post.summary}</p>
</div>
</Link>
اینجوری Next.js خودش تشخیص میده که باید این div کلی رو تبدیل کنه به لینک، بدون تگ a.
داینامیک Routing پیشرفته، گرفتن دادهها و API Routes در Next.js
تا الان با داینامیک Routing ساده آشنا شدیم؛ همون id].js] که اجازه میده صفحات با دادههای متغیر بسازیم. اما Next.js امکانات خیلی بیشتری داره که باعث میشه مثل یه سایت واقعی بتونی با دیتابیس، سرور، دادهها و… کار کنی. در این بخش میخوایم این ویژگیها رو قدمبهقدم توضیح بدیم.
1. داینامیک Routing پیشرفته (Nested Dynamic Routes)
وقتی پروژه بزرگ بشه، شاید بخوای داخل فولدرها هم مسیرهای داینامیک داشته باشی. مثلاً فرض کن صفحه مقالات داری که هر مقاله چند بخش داره:
/pages blog/ [slug]/ [chapter].js
اینجوری مسیرهایی مثل این ساخته میشه:
/blog/javascript-basics/1
/blog/javascript-basics/2
/blog/react-hooks/1
در این فایلها میتونی از ()useRouter استفاده کنی:
import { useRouter } from ‘next/router’
export default function BlogChapter()
{ const router = useRouter() const { slug, chapter } = router.query
return (
<div>
<h1>مقاله: {slug}</h1>
<p>فصل: {chapter}</p>
</div>
) }
این یعنی Next.js هر مقدار دینامیکی که تو مسیر باشه رو خودش میده دستت.
2. گرفتن دادهها قبل از ساخت صفحه (get Static Props و get Server Side Props)
Next.js دو روش مهم برای گرفتن داده داره:
1. get Static Props
وقتی صفحه ثابت هست و قبل از انتشار سایت ساخته میشه. برای مطالب بلاگ، صفحات استاتیک و مواردی مثل این عالیه.
export async function getStaticProps()
{ const data = await fetch(“https://api.example.com/posts”).then(r => r.json())
return { props: { data } } }
خروجی:
- سریعتر
- بهینهتر
- مناسب سئو
2. get Server Side Props
وقتی میخوای هر بار که صفحه باز میشه، داده جدید دریافت بشه.
export async function getServerSideProps() {
const user = await fetch(“https://api.example.com/user”).then(r => r.json())
return { props: { user } } }
این روش برای دادههای لحظهای یا حساس به زمان خوبه.
3. API Routes — ساخت سرور کوچک
حالا میرسیم به یه قابلیت خیلی خفن! Next.js اجازه میده داخل پروژه بکاند کوچک هم داشته باشی! فقط کافیه تو فولدر pages/api فایل بسازی:
/pages/api/hello.js
کد داخلش:
export default function handler(req, res) { res.status(200).json({ message: “سلام از API داخلی!” }) }
مسیرش میشه:
yourwebsite.com/api/hello
مزیت API Routes چیه؟
- نیازی به سرور جداگانه نیست
- خیلی مناسب تمرین و پروژههای کوچک
- گرفتن داده از دیتابیس به راحتی
- امنتر نسبت به fetch مستقیم از کلاینت
4. روتینگ API پیچیدهتر (Dynamic API Routes)
API Routesها هم میتونن داینامیک باشن:
/pages/api/users/[id].js
کد:
export default function handler(req, res) {
const { id } = req.query res.status(200).json({ userId: id })
}
مسیرها:
/api/users/1
/api/users/42
این شبیه داینامیک Routing صفحههاست، اما برای بخش API.
5. ارتباط کامل مسیرهای داینامیک و API
معمولاً تو سایتهایی مثل:
- فروشگاه اینترنتی
- بلاگ
- داشبورد کاربران
- سیستمهای آموزشی
از ترکیب این موارد استفاده میشه. مثلاً:
/courses/[id] نمایش جزئیات دوره
/api/courses/[id] دریافت اطلاعات دوره از سرور
بعد تو صفحه دوره، داده از API داخلی گرفته میشه.
6. نکاتی که تازهکارها همیشه اشتباه میکنن
فکر میکنن get Static Props داده جدید نمیاره: درست فکر میکنن؛ ولی میشه با revalidate مدت زمان رفرش داده رو مشخص کرد. API Routeها جایگزین سرور کامل نیستن، اما برای پروژههای کوچک خیلی خوبن. تو مسیرهای داینامیک، اگه از slug].js] استفاده میکنی، باید get Static Paths هم تعریف کنی.
حتماً باید بدونی کِی static بهتره و کِی server-side.
جمعبندی + نکات حرفهای
وقتشه یک نگاه کامل به کل ماجرا بندازیم تا Routing در Next.js کاملاً برات جا بیفته. Next.js واقعاً یکی از سادهترین و در عین حال قدرتمندترین سیستمهای Routing رو داره.
کافیه فولدر بسازی ← فایل بذاری ← Next.js خودش مسیر رو میسازه!
در این بخش همه نکات مهم، کاربردی و حرفهای رو جمع میکنیم تا یه تصویر کامل از Routing داشته باشی.
1. خلاصه کامل سیستم فولدرمحور در Next.js
تو Next.js دو بخش مهم برای ساخت صفحات داریم:
فولدر pages
این فولدر حکم «نقشهی سایت» رو داره. هر فایل داخلش میشه یک مسیر:
pages/index.js/pages/about.js/aboutpages/blog/index.js/blogpages/blog/post1.js/blog/post1
هر فولدر مسیر جدید میسازه، هر فایل یک صفحه.
2. داینامیک Routing — یکی از مهمترین امکانات Next.js
صفحههایی که مقدارشون متغیر هست، مثلا:
– صفحه کاربر: /users/1
– صفحه محصول: /products/iphone-15
– صفحه مقاله: /blog/react-hooks
با ساختن فایلهایی مثل این ایجاد میشن:
/pages/users/[id].js /pages/products/[slug].js
نکته مهم
وقتی از slug].js] استفاده میکنی و میخوای صفحهها رو به صورت استاتیک بسازی، باید از get Static Paths استفاده کنی.
3. API Routes — سرور کوچک داخل Next.js
Next.js فقط فرانت نیست! تو فولدر pages/api میتونی مسیرهای بکاند داشته باشی، مثل:
/pages/api/users.js /pages/api/products/[id].js
خروجی این مسیرها JSON هست و میتونی از دیتابیس هم داده بگیری.
4. Navigation — رفتوآمد بین صفحات
کامپوننت <Link> مهمترین ابزار ناوبریه.
چرا Link مهمه؟
- صفحه بدون رفرش عوض میشه
- سرعت سایت خیلی بالاتر میره
- تجربه کاربری بهتر میشه
5. Layoutها، app.js و document.js
برای بخشبندی ظاهر کلی سایت و مدیریت ساختار HTML به کار میرن.
_app.js ← کنترل ظاهر کلی صفحات (هدر و فوتر مشترک)
_document.js ← کنترل تگهای HTML، Head و ساختار کلی
Layout ← ساختار مخصوص برای هر صفحه یا گروهی از صفحات
این سه مورد باعث میشن پروژه حرفهای و تمیز باشه.
6. نکات حرفهای Routing که باید حتماً بدونی
• نامگذاری فایلها مهمه
هرچه نام مناسبتری انتخاب کنی، مسیر سایت قابل فهمتر میشه.
• مسیرها نباید تکراری باشن
اگه مسیر تکراری داشته باشی، Next.js خطا میده.
• استفاده از index.js داخل فولدر
به جای اینکه کاربر وارد /blog/index بشه، تو فولدر blog یک index.js میسازی تا مسیر /blog کار کنه.
• مسیرهای تو در تو (Nested Routes)
برای پروژههای بزرگ خیلی مهمن:
/blog/[slug]/comments/[commentId].js
• استفاده مناسب از Static و Server-side
برای دادههایی که زیاد تغییر نمیکنن ← get Static Props
برای دادههای حساس و لحظهای ← get Server Side Props
• اشتباه بزرگ: استفاده از a به جای Link
این کار کل مزایای Next.js رو از کار میندازه.
7. اشتباهات رایج تازهکارها
اینا چیزایی هست که معمولاً خیلیها اشتباه انجام میدن:
- استفاده از پوشه اشتباه (مثلاً pagesS به جای pages )
- ساختن فایل با اسم فارسی یا کاراکترهای عجیب
- فراموش کردن مسیرهای داینامیک مثل id].js]
- استفاده همزمان از get Static Props و get Server Side Props (که امکانپذیر نیست)
- استفاده از fetch در خود کامپوننت به جای توابع data fetching در برخی موقعیتها
- استفاده از Layout داخل تکتک صفحات (در حالی که میشه تو _app.js گذاشت)
با یاد گرفتن این نکات، پروژههات خیلی تمیزتر و حرفهایتر میشن.
سوالات متداول (FAQ)
1. آیا برای Routing در Next.js باید کد خاصی بنویسم؟
نه! فقط با ساختن فولدر و فایل مسیر به صورت خودکار ساخته میشه.
2. فرق id].js] با slug].js] چیه؟
هیچی! فقط اسمشونه. id عددی هست، slug معمولاً متنی مثل نام مقاله.
3. مثلا میتونم داخل یک فولدر چندتا مسیر داینامیک بسازم؟
بله، حتی میتونی تو در تو هم بسازی.
4. چه زمانی باید از get Static Props استفاده کنم؟
وقتی داده کم تغییر میکنه و میخوای صفحه سریع، سبک و سئوپسند باشه.
5. API Routes دقیقا چیکار میکنن؟
مثل یک سرور کوچک بهت اجازه میدن دادهها رو مدیریت کنی و خروجی JSON بگیری.
6. آیا میتونم API رو بیرون از Next.js بنویسم؟
کاملاً! اما API Routes کار رو برای پروژههای کوچک و متوسط خیلی راحت میکنه.
7. آیا app.js_ اجباریه؟
نه، اما معمولاً برای اضافه کردن استایل کلی یا Layout مشترک لازم میشه.
8. آیا Routing Next.js فقط برای فولدر pages کار میکنه؟
در نسخه جدید (App Router) فولدر app هم وجود داره، ولی در این پست نسخه pages رو بررسی کردیم.
همراهان عزيز تمسی، شما می توانید جديدترین مطالب ما را در اینستاگرام و تلگرام تمسی دنبال کنید. اگر دنبال کیفیت بالاتر این آموزش ها هستید میتوانید از کانال یوتیوب ما استفاده کنید. برای عضویت در شبکه های مجازی ما از دکمه های زیر استفاده کنید.
یوتیوب تلگرام اینستاگرام
