Next.js – صفحات ، مسیرهای استاتیک ، پویا و تو در تو

صفحات با Next.js

بعد. js استفاده کردن مسیریابی مستقر در آن سیستم از بایگانی ، این بدان معنی است که می توانید استفاده کنید پوشه ها و پرونده ها برای تعریف مسیرهابشر

بوها صفحه در بعد. js یک رابط کاربری را نشان می دهد که در یک مسیر خاص از سایت ارائه می شود [ref]بشر

برای ایجاد یک صفحه ، باید یک پرونده اضافه کنید page.tsx در هیئت مدیره /app و یک جزء React را صادر کنید.

export default function ExamplePage() {
  return <h1>Esta es una página de ejemplo en Next.js!</h1>;
}

استفاده کردن: این پروژه به طور پیش فرض صفحه ای ایجاد می کند _/app

یک صفحه ایجاد کنید

برای ایجاد یک صفحه جدید در Next.js ، باید مراحل زیر را در نظر بگیرید:

• پوشه ای با نام مسیر مورد نظر ایجاد کنید

• در آن پوشه ، پرونده ای به نام ایجاد کنید page.tsx

• یک جزء React React را صادر می کند.

ما صفحه ای را ایجاد خواهیم کرد که از مسیر در دسترس خواهد بود http://localhost:3000/about

پوشه و پرونده را ایجاد کنید:

src/app/about/page.tsx

در داخل page.tsx :

// src/app/about/page.tsx

export default function AboutPage() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Acerca de Nosotros</h1>
      <p>Esta es la página de información general.</p>
    </div>
  );
}

هنگام شروع سرور (npm run dev) ، می توانید به این صفحه مراجعه کنید:

http://localhost:3000/about

پروژه فعلی را بارگیری کنید [ref] (شاخه: صفحه ساده)

مسیر بعدی. js

در بعد. js، ، هر یک پرونده در داخل /app این یک مسیر را نشان می دهد برنامه

مسیرهای استاتیک

آنها صفحاتی هستند که مسیرها تغییر نمی کنند، آنها تعریف شده اند. به عنوان مثال: /, /about, /contact, /faq, /ssg, etc.

مزایای مسیرهای استاتیک:

• سئو: همانطور که شناخته شده است ، می توانند به عنوان HTML استاتیک تولید شوند.

• آنها را می توان با SSG (ساخت) ارائه داد ، بنابراین بار آنها بسیار سریعتر خواهد بود.

• استاتیک بودن پارامترهای خارجی مانند مسیرهای پویا را نمی پذیرید.

چگونه آنها ایجاد می کنند؟

مسیرها ثابت آنها دقیقاً همان صفحه ایجاد شده اند:

• پوشه ای با نام مسیر مورد نظر ایجاد کنید

• در آن پوشه ، پرونده ای به نام ایجاد کنید page.tsx

• یک جزء React React را صادر می کند.

چگونه کار می کنند؟

بعد. js با هم زدن روتر برنامه پوشه را تجزیه و تحلیل کنید /app و به طور خودکار مسیرها را تولید می کند ، یعنی هنگام اجرای npm run devبا بعد. js موارد زیر را انجام می دهد:

• همه پوشه ها را داخل آن قرار دهید /app و پرونده را داشته باشید page.tsx به عنوان مسیرها

• HTML و JavaScript لازم را تولید می کند.

• تصمیم می گیرد که آیا ارائه می شود CSR (مشتری) ، SSR (زمان واقعی) ، SSG (ساخت) یا همانطور که کد را نوشتید.

استفاده کردن: انواع رندر که بعداً به عمق بررسی خواهیم کرد.

نمونه

src/app/contact/page.tsx → /contact

// src/app/contact/page.tsx

export default function ContactPage() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Contáctanos!!</h1>
      <p>
        Estamos para ayudarte :). Escríbenos si tienes alguna duda o sugerencia.
      </p>
    </div>
  );
}

هنگام شروع سرور (npm run dev) ، می توانید به این صفحه مراجعه کنید:

http://localhost:3000/contact

مسیرهای استاتیک نامشخص

مسیرهای استاتیک تو در تو چیزی غیر از یک مسیر استاتیک است که یافت می شود درون یک پوشه استاتیک دیگربشر یعنی نمایانگر a سطح سلسله مراتبی عمیق تربشر مثال: products/mens, products/woman, docs/getting-started, etcبشر

مزایای مسیرهای استاتیک

• این امکان را می دهد تا برنامه را بر اساس بخش ها و زیر بخش ها به وضوح و مقیاس پذیر بسازید.

• URL ها برای موتورهای جستجوگر قابل پیش بینی و دوستانه هستند (SEO دوستانه).

• برای به اشتراک گذاشتن طراحی بین مسیرهای مرتبط می توانید طرح های تو در تو در تو در تو قرار بگیرید.

• ایده آل برای بخش های بزرگ با چندین صفحه و زیر بخش (/docs/..., /products/..., etc)

چگونه کار می کنند؟

بعد. js با هم زدن روتر برنامه پوشه را تجزیه و تحلیل کنید /app و به طور خودکار مسیرها را تولید می کند:

• همه پوشه ها و زیر پوشه هایی را که در آن قرار دارند ، استفاده کنید /appبشر

• هر پوشه نشان دهنده است بخشی از مسیر در URLبشر

• انفرادی در نظر گرفتن یک پوشه به عنوان بخشی از a مسیر بله با هم مشترک شدن پرونده های ویژه ، بقیه آنها را نادیده می گیرند.

مثال:

src/app/dashboard/settings/page.tsx → /dashboard/settings

// src/app/dashboard/settings/page.tsx

export default function SettingsPage() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Configuración</h1>
      <p>Ajusta tus preferencias...</p>
    </div>
  );
}

هنگام شروع سرور (npm run dev) ، می توانید به این صفحه مراجعه کنید:

http://localhost:3000/dashboard/settings

پروژه فعلی را بارگیری کنید [ref] (شاخه: مسیرهای استاتیک)

اکنون سعی کنید دسترسی داشته باشید:

http://localhost:3000/dashboard

می توانید پیام خطا را رعایت کنید: 404 | This page could not be found.

رفتار به عنوان شناخته شده است مکان یابی [ref]، این به معنای آن است next.js فقط در صورتی که پوشه حاوی پرونده های مربوط باشد ، مسیری را ایجاد می کند (page.tsx ای route.tsx) برای آن مسیربشر بنابراین مانع از ایجاد پوشه های خالی از مسیرهای غیر ضروری می شود.

اگرچه ساختار از طریق پوشه ها تعریف می شود ، یک مسیر در دسترس عموم نیست تا زمانی که یک پرونده خاص اضافه شود.

هنگامی که بازگشت می شود ، مسیر عمومی می شود page.tsx ای route.tsx

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

این به جلوگیری از اشتباهات کمک می کند و آن را تضمین می کند فقط پوشه های معتبر به مسیرهای قابل دسترسی تبدیل می شوندبشر

استفاده کردن: اگرچه می توان پرونده های غیر ویژه (مانند مؤلفه ها ، سبک ها ، عملکردهای سودمند یا درخواست های API) را در فهرست قرار داد. /appبا انجام این کار توصیه نمی شودبشر به عنوان یک عمل خوب ، پیشنهاد می شود این عناصر را حفظ کنید خارج از هیئت مدیره /app، در پوشه هایی مانند /componentsبا /libبا /styles، و غیره ، برای حفظ یک ساختار مدولار ، تمیز و آسان تر برای نگهداری.

مسیرهای پویا

آنها صفحاتی هستند که آنها وابسته هستند توسط یک پارامتر متغیر، مانند یک شناسه یا یک نام. به عنوان مثال /posts/1, /users/mau, /products/abc123, etcبشر

مزایای مسیرهای پویا

• انعطاف پذیری برای نشان دادن محتوای متغیر.

• از کپی کردن کد خودداری کنید زیرا لازم نیست صفحه ای بر اساس آن بسازید.

• مقیاس پذیری کل از زمان رشد برنامه ، مسیرهای پویا به طور خودکار بدون ایجاد پرونده های جدید مقیاس می شوند.

• پشتیبانی کامل از SSR (به طور مکرر محتوا تغییر می کند) ، SSG (داده هایی که تغییر نمی کند) یا CSR (شما به JS از طرف مشتری نیاز دارید).

• بسته به مورد ، آزادی کل برای بهینه سازی عملکرد ، سئو و تجربه کاربر.

چگونه آنها ایجاد می کنند؟

مسیرهای پویا به روشی بسیار مشابه با یک مسیر استاتیک ایجاد می شوند ، با این تفاوت که پوشه از براکت ها استفاده می کند [foldername] برای تعریف یک پارامتر پویا.

• پوشه ای با نام مسیر مورد نظر ایجاد کنید و نام آن را در براکت های مربع قرار دهید [foldername]بشر

• در آن پوشه ، پرونده ای به نام ایجاد کنید page.tsxبشر

• یک جزء React React را صادر می کند.

• به پارامتر پویا از params در مؤلفه صفحه.

چگونه کار می کنند؟

next.js con روتر برنامه پوشه را تجزیه و تحلیل کنید /app و به طور خودکار مسیرها را تولید می کند:

• همه پوشه ها را داخل آن قرار دهید /app و پرونده را داشته باشید page.tsx به عنوان مسیرها

• HTML و JavaScript لازم را تولید می کند.

• تصمیم بگیرید که آیا به عنوان CSR (مشتری) ، SSR (زمان واقعی) ، SSG (ساخت) یا همانطور که کد را نوشته اید ، ارائه دهید.

وقتی کاربر از یک صفحه پویا بازدید می کند (/posts/5) ، next.js موارد زیر را انجام می دهد:

• تشخیص می دهد که [id] این یک مسیر پویا است.

• استخراج 5 به عنوان یک پارامتر params.idبشر

• منطق را درون مؤلفه اجرا کنید و صفحه را ارائه دهید.

نمونه

src/app/posts/[id]/page.tsx → /posts/:id

// src/app/posts/[id]/page.tsx

interface PageParams {
  id: string;
}

// La propiedad params es asincrona, por lo que se debe de tratar como promesa
interface PageProps {
  params: Promise<PageParams>;
}

export default async function PostPage({ params }: PageProps) {
  // Desestructuramos el id de params, ya que es una promesa
  const { id } = await params;

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">{id}</h1>
    </div>
  );
}

استفاده کردن: در نسخه های قبل از 14، ملک params es همگامبشر

AUNQUE NEXT.JS 15 هنوز سازگاری با این رفتار را حفظ می کند ، استفاده از آن توصیه می شود params غیر همزمان از آنجا که رفتار همزمان در نسخه های آینده از بین می رود.

هنگام شروع سرور (npm run dev) ، می توانید به این صفحه مراجعه کنید:

http://localhost:3000/post/uno

app/posts/[id]/page.js → /posts/a → { id: 'a' }
app/posts/[id]/page.js → /posts/b → { id: 'b' }
app/posts/[id]/page.js → /posts/3 → { id: '3' }

مسیرهای تو در تو

next.js به شما امکان می دهد سطح پویا مختلفی را در یک مسیر داشته باشید. به عنوان مثال: /blog/javascript/arraysبا /blog/css/flexbox با /users/mau/posts/1

مزایای مسیرهای پویا تو در تو

• آنها ایده آل هستند که شما مجبور به نمایندگی روابط (پدر/پسر) هستید.

• آنها به صورت نمایی زمینه URL را بهبود می بخشند.

• بزرگترین استفاده آن در محصولات فروشگاه است ، نظرات در یک پست.

• امکان دسترسی به چندین پارامتر را فراهم می کند (params).

چگونه آنها ایجاد می کنند؟

به دنبال همان منطق یک مسیر پویا:

• پوشه src/app ساختار پوشه مربوط به مسیر مورد نظر ، تعریف بین [foldername] پوشه های لازم که پارامتر پویا خواهند بود.

• در آن پوشه یا پوشه هایی که می خواهیم مسیرهای عمومی باشیم ، باید پرونده ای به نام ایجاد شود page.tsxبشر

• یک جزء React React را صادر می کند.

• به پارامترهای پویا از params در مؤلفه صفحه.

چگونه کار می کنند؟

next.js با روتر برنامه Carpeta را تجزیه و تحلیل کرد /app و به طور خودکار مسیرها را تولید می کند:

• همه پوشه ها و زیر پوشه هایی را که در آن قرار دارند ، استفاده کنید /appبشر

• هر پوشه بخشی از مسیر را در URL نشان می دهد.

• اگر یک پوشه در براکت های مربعی نام داشته باشد ([param]) ، این یک است بخش پویابشر

• اگر پرونده های ویژه ای را تهیه می کنید ، یک پوشه را به عنوان بخشی از یک مسیر در نظر بگیرید ، بقیه آنها را نادیده می گیرد.

نمونه

src/app/blog/nextjs/posts/[name]/page.tsx → /blog/javascript/posts/arrays

// src/app/blog/nextjs/posts/[name]/page.tsx

interface PageParams {
  category: string;
  name: string;
}

// La propiedad params es asincrona, por lo que se debe de tratar como promesa
interface PageProps {
  params: Promise<PageParams>;
}

export default async function BlogPostPage({ params }: PageProps) {
  // Desestructuramos los parámetros de la promesa
  const { category, name } = await params;

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Post: {name}</h1>
      <p className="text-lg">Categoría: {category}</p>
    </div>
  );
}

هنگام شروع سرور (npm run dev) ، می توانید به این صفحه مراجعه کنید:

http://localhost:3000/blog/javascript/posts/arrays

src/app/blog/nextjs/posts/[name]/page.tsx
→ /blog/javascript/posts/nodejs-introduction
→ { category: 'javascript', name: 'nodejs-introduction' }


src/app/blog/nextjs/posts/[name]/page.tsx
→ /blog/css/posts/flexbox
→ { category: 'javascript', name: 'flexbox' }

پروژه فعلی را بارگیری کنید [ref] (شاخه: مسیرهای پویا)

یادآوری کردن: اگر سعی در دسترسی دارید /blog ای /blog/nextjs ای /blog/nextjs/posts پیام منتشر خواهد شد: 404 | This page could not be found.

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