مسیریابی در Next.js – نحوه استفاده از روتر برنامه در برنامه های بعدی

App Router برای Next.js 14 به این معنی است که توسعه دهندگان می توانند برنامه های ساخت یافته تر، ماژولار و با عملکرد بالا را با معرفی رویکردی از مسیریابی مبتنی بر فایل در دایرکتوری برنامه/برنامه بسازند. در اینجا یک دستورالعمل در مورد نحوه اعمال موثر روتر برنامه در Next.js برای برنامه های خود آورده شده است:

روتر برنامه چیست؟

App Router به شما امکان می دهد مسیرها را به روشی کاملاً جدید تعریف کنید. به سادگی با ساختاربندی اجزا در پوشه ها. هر پوشه ای که در پوشه /app قرار دارد به یک مسیر URL نگاشت می شود. چنین سازمانی ویژگی‌هایی مانند طرح‌بندی‌های تودرتو و مسیرهای گروهی را ارائه می‌دهد، در حالی که در واکشی داده‌ها هنگام کار با برنامه‌های بزرگ‌تر آسان‌تر است و بنابراین مدیریت مسیر را بهتر می‌کند.

راه اندازی روتر برنامه

• یک پروژه Next.js جدید ایجاد کنید (اگر قبلا این کار را نکرده اید):
  npx create-next-app@latest

• روتر برنامه را فعال کنید:

• در Next.js 14، دایرکتوری /app به طور پیش فرض تنظیم شده است، و این روتر App را فعال می کند. هیچ پیکربندی اضافی مورد نیاز نیست.

مسیریابی پایه

هر پوشه و فایل داخل برنامه/دایرکتوری به طور خودکار به مسیری در برنامه شما نگاشت می شود.

app/
 ├── page.tsx           # Home page (e.g., "https://dev.to/")
 ├── about/
 │    └── page.tsx      # About page (e.g., "https://dev.to/about")
 └── blog/
      ├── page.tsx      # Blog index page (e.g., "/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog post (e.g., "/blog/my-post")

• مسیرهای استاتیک: app/about/page.tsx به طور خودکار در دسترس خواهد بود /about.

• مسیرهای پویا: شما می توانید مسیرهای پویا را با استفاده از براکت های مربع ایجاد کنید ([ ]). به عنوان مثال، app/blog/[slug]/page.tsx صفحات را به صورت پویا در مسیرهایی مانند /blog/من-اولین-پست یا /blog/Hello-World.

چیدمان و تودرتو

App Router به شما امکان می‌دهد طرح‌بندی‌ها را فقط در یک مکان تعریف کنید و از آن‌ها در صفحات مختلف استفاده مجدد کنید، بنابراین طراحی پیوسته عناصر UI در بخش‌های برنامه‌تان کار آسانی نیست.

ایجاد یک طرح:

برای ایجاد یک طرح، یک را اضافه کنید layout.tsx فایل در یک پوشه این طرح برای تمام صفحات و اجزای داخل آن پوشه اعمال می شود.

app/
 ├── layout.tsx         # Root layout for the entire app
 ├── about/
 │    ├── layout.tsx    # About page-specific layout
 │    └── page.tsx      # About page content

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    
      
        
My App
        {children}
      
    
  );
}

مسیرها و طرح‌بندی‌های تودرتو:

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

app/
 ├── dashboard/
 │    ├── layout.tsx         # Layout for the entire dashboard section
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings 

(“/داشبورد/تنظیمات”)

• طرح داشبورد: را layout.tsx فایل داخل /dashboard برای هر دو اعمال می شود /داشبورد و /داشبورد/تنظیمات

گروه های مسیر:

گروه های مسیر امکان سازماندهی مسیرها را بدون تأثیر بر ساختار URL با افزودن یک پوشه گروهی در پرانتز فراهم می کنند. این برای ساختاردهی کد برنامه شما بدون تأثیر بر URLها مفید است.

app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"

نمایه پوشه ها و تنظیمات ظاهر می شود /پروفایل و /تنظیمات، اما با استفاده از (داشبورد) آنها را به صورت بصری برای ساختار کد گروه بندی می کند.

Catch-All Routes.

مسیرهای Catch-all زمانی استفاده می شوند که بخواهید چندین بخش URL را تحت یک فایل مسیر واحد مدیریت کنید. این با استفاده به دست می آید ... در نام فایل

• مثال: […slug]tsx چندین بخش از مسیر را می گیرد /blog/a/b/c.

رسیدگی به خطاها و وضعیت های بارگیری

Next.js 14 به شما امکان می دهد خطاها و وضعیت های بارگیری را با استفاده از اجزای خاص در هر مسیر مدیریت کنید.

مرز خطا:

برای رسیدگی به خطاهای یک مسیر، اضافه کنید error.tsx در یک پوشه

app/
 ├── blog/
 │    ├── error.tsx     # Error boundary for blog pages
 │    └── page.tsx      # Blog main page

• ایالات بارگیری: استفاده کنید loading.tsx برای نشان دادن نشانگرهای بارگذاری برای مسیرهای خاص.

واکشی داده در روتر برنامه

با Next.js 14، می‌توانید داده‌های سمت سرور را مستقیماً با استفاده از قلاب استفاده یا async/await واکشی کنید.

// app/dashboard/page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function DashboardPage() {
  const data = await getData();
  return 
{JSON.stringify(data)}
;
}

اقدامات سرور

Server Actions به شما این امکان را می دهد که منطق سمت سرور را مستقیماً در کد مؤلفه مدیریت کنید، مانند رسیدگی به فرم ارسالی.

// app/contact/page.tsx
"use client";

import { useForm } from 'react-hook-form';

export default function ContactForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    "use server";
    await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
  };

  return (
    
  );
}

استقرار روتر برنامه

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

فرآیند استقرار:

• متغیرهای محیطی را برای کلیدهای API یا سایر داده های حساس پیکربندی کنید.
• ساخت و صادرات پروژه با:

npm rum build

• استقرار در Vercel: از Vercel CLI استفاده کنید یا مخزن خود را برای استقرار یکپارچه وصل کنید.

App Router در Next.js 14 از نظر ساخت برنامه های مقیاس پذیر و سریع با کد پاک تر، انعطاف پذیر و ماژولار است. بنابراین، با رویکردی که در بالا توضیح داده شد، می‌توانید از تمام قدرت App Router در پروژه‌های Next.js خود استفاده کنید.