نحوه استفاده از مؤلفه پیوند Next.js (با مثال)

برای چندین سال، عنصر لنگر HTML (<a> </a>) روش سنتی پیمایش به صفحات وب داخلی و وب سایت ها و صفحات وب خارجی باقی ماند. این رویکرد برای مدتی به خوبی جواب داد، اما با پیچیده‌تر شدن وب، نیاز به راه‌حل بهتری وجود داشت.

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

در این مقاله، ما شما را با مولفه Next.js Link آشنا می‌کنیم و موارد مختلفی را که می‌توانید برای ایجاد مکانیسم‌های پیوند قدرتمند در برنامه Next.js خود به کار ببرید، پوشش می‌دهیم.

در اینجا چیزهایی هستند که یاد خواهید گرفت:

• معرفی <Link/> جزء
• اجزای پیوند Next.js
  • وسایل مورد نیاز
  • href
  • لوازم اختیاری
  • as
  • passHref
  • prefetch
  • replace
  • scroll
  • locale

پیش نیازها

برای دنبال کردن این آموزش به موارد زیر نیاز دارید:

• درک خوبی از جاوا اسکریپت و سینتکس React
• یک برنامه شروع Next.js (برای دستورالعمل‌های راه‌اندازی به این صفحه مراجعه کنید)

معرفی کامپوننت پیوند Next.js

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

با <Link />، توسعه دهندگان می توانند به سرعت مکانیسم های پیوند پویا و تعاملی را در برنامه های خود ایجاد کنند. برای استفاده از مولفه Next.js Link، باید آن را از ماژول next/link وارد کنید.

در اینجا یک مثال اساسی آورده شده است:

import Link from "next/link";

export default function Contact() {
  return (
    <Link href="https://dev.to/about">
      <a>About Page</a>
    </Link>
  );
}

لوازم مولفه پیوند

برای سفارشی کردن رفتار ناوبری و ارسال پارامترهای اضافی به مسیر مقصد، می‌توان موارد مختلفی را در یک جزء Next.js Link ثبت کرد.

وسایل مورد نیاز

را <Link> جزء برای عملکرد فقط به یک پایه نیاز دارد – href. اگر نتوانستید این پایه را تعریف کنید <Link />، یک خطا دریافت خواهید کرد.

href

وقتی استفاده می کنید </Link>، باید URL مقصد را به عنوان مقدار به آن ارائه دهید href پشتیبانی URL مقصد جایی است که کاربر پس از کلیک بر روی لینک ارسال می شود. این می تواند یک URL نسبی، یک URL مطلق یا یک شی URL باشد.

URL نسبی:

<Link href="https://dev.to/about">
  <a>About (Relative URL)</a>
</Link>

URL مطلق:

<Link href="https://www.ubahthebuilder.tech/about">
  <a>About(Absolute URL)</a>
</Link>;

شی URL:
شی URL به شما امکان می دهد رشته ها و پارامترهای پرس و جو را با ارسال آنها در یک شی به جزء Next.js Link ارسال کنید. ما از شی URL برای مسیریابی پویا استفاده می کنیم، جایی که صفحات مختلف بسته به پارامتر URL ارائه می شوند.

در اینجا یک نسخه نمایشی است که نحوه استفاده از آن را در مؤلفه Link نشان می دهد:

<Link
  href={{
    pathname: "/posts",
    query: { post: "1" },
  }}
>
  <a>Read post 1 details</a>
</Link>

این مثال مشکل را حل می کند href ارزش به: /posts/?post=1.

لوازم اختیاری

لوازم زیر اختیاری هستند و به شما امکان می دهند رفتار خود را سفارشی کنید <Link /> جزء.

as

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

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

در اینجا دو نمونه وجود دارد:

https://mystore.com/products/1?affID=21223543
http://www.blog.openreplay.com/post?language=en

در اینجا دکوراتور پیوند بعد از می آید ? در URL، که معمولاً همینطور است. توجه داشته باشید که تزئین کننده پیوند، مقصد URL را تغییر نمی دهد. تنها کاری که انجام می دهد این است که اطلاعات اضافی را منتقل کند.

بیایید یک مثال را ببینیم. به پروژه Next.js خود بروید و پوشه و ساختار فایل زیر را در داخل پوشه pages ایجاد کنید

📦pages
 ┣ 📂api
 ┃ ┗ 📜welcome.js
 ┣ 📂posts
 ┃ ┣ 📜index.js
 ┃ ┗ 📜[post].js
 ┣ 📜index.js
 ┗ 📜_app

در مرحله بعد کد زیر را به آن اضافه کنید pages/posts/index.js:

import React from "react";
import Link from "next/link";

const BlogPosts = () => {
  const postIDs = ["1", "2", "3"];
  return (
    <>
      <div>
        <h1>List of posts</h1>
      </div>

      {postIDs.map((post, key) => (
        <Link href="/posts/[post]" as={`posts/${post}/?language=en`} key={key}>
          <a>
            <h1>Post {post}</h1>
            <p>Read more about post {post}</p>
          </a>
        </Link>
      ))}
    </>
  );
};

export default BlogPosts;

و در pages/posts/[post].js، کد زیر را اضافه کنید:

import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const postID = router.query.post;
  return (
    <>
      <h1>
        <Link href="/products">
          <a>See all posts</a>
        </Link>
      </h1>
      <div>
        <h5>Post {postID} Details Page</h5>
      </div>
    </>
  );
};

export default Post;

در اینجا چیزی است که اگر به http://localhost:3000/posts بروید پیدا خواهید کرد:

روی هر یک از پست ها کلیک کنید. شما را به صفحه جزئیات هر پست هدایت می کند (که یک مسیر پویا است)

در تصویر بالا می بینید که آدرس پست اول حاوی یک دکوراتور لینک است. ?language=en، که بر مقصد پیوند تأثیر نمی گذارد. برای پست دو و پست سه هم همینطور.

passHref

گاهی اوقات با مواردی مواجه می شوید که </Link> فرزند کامپوننت ممکن است یک مؤلفه سفارشی باشد که یک برچسب لنگر را می‌پیچد (به کتابخانه‌ها مانند مؤلفه‌های سبک‌دهی شده فکر کنید). در چنین مواردی، مشخص کنید passHref بر روی مولفه Next.js Link قرار دهید. انجام این کار را مجبور می کند Link برای ارسال href به فرزندش کمک کند

اضافه کردن passHref prop برای سئو و دسترسی بسیار مهم است زیرا حذف prop باعث ترک تو در تو می شود <a> برچسب ها بدون الف href ویژگی.

بیایید یک مثال را ببینیم. کد را ویرایش کنید pages/post/[post].js شامل موارد زیر باشد:

import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

// Import this
import styled from "styled-components";

// Add this:
const CustomLink = styled.a`
      color: red;
      font-size: 30px;
    `;

const Post = () => {
  const router = useRouter();
  const postID = router.query.post;
  return (
    <>
      <h1>
        <Link href="/products">Back to posts</Link>
      </h1>
      <h1>
        <NavLink href="/" name="Home" />
      </h1>
      <div>
        <h5>Post {postID} Details Page</h5>
      </div>
    </>
  );
};

// Add this:
const NavLink = ({ href, name }) => {
  return (
    <Link href={href} passHref legacyBehavior>
      <CustomLink>{name}</CustomLink>
    </Link>
  );
};

export default Post;

اکنون به http://localhost:8000/posts بروید و روی هر پست کلیک کنید. در صفحه جزئیات پست، یک پیوند قرمز سفارشی باید مانند تصویر زیر نشان داده شود:

prefetch

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

به خاطر داشته باشید که بارگذاری اولیه صفحات فقط در برنامه های تولیدی کار می کند. با تنظیم می توانید آن را خاموش کنید prefetch مقدار ‘s false است، همانطور که در زیر نشان داده شده است:

<Link href="/posts" prefetch={false}>
  <a>Get posts</a>
</Link>

replace

معمولاً وقتی به یک URL جدید هدایت می‌شوید، آن URL به پشته اضافه می‌شود. با کلیک بر روی دکمه بازگشت در نوار پیمایش در مرورگر، به صفحه قبلی در پشته باز می گردید.

را replace prop این رفتار ناوبری را با جایگزین کردن وضعیت فعلی تاریخ تغییر می دهد.

ویرایش محتوا در pages/index.js به موارد زیر:

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to my homepage</h1>
        <h1>
          <Link href="/posts">Read my blog posts</Link>
        </h1>
      </main>
    </div>
  );
}

فایل را ذخیره کرده و به http://localhost:3000 بروید. شما باید صفحه ای را پیدا کنید که شبیه صفحه زیر باشد:

اگر روی آن کلیک کنید Go to products پیوند صفحه، مشاهده کنید که ناوبری برنامه چگونه کار می کند وقتی روی دکمه پیمایش برگشت بدون کلیک کلیک می کنیم replace در GIF زیر پشتیبانی کنید.

معمولی، درسته؟ حالا برو داخل pages/posts/index.js و طبق تصویر زیر، جایگزینی را به مولفه پیوند هر پست اضافه کنید:

// ...
{
  postIDs.map((product, key) => (
    <Link
      href="/posts/[post]"
      as={`post/${post}/?language=en`}
      key={key}
      replace={post === "3" ? true : false}
    >
      <a>
        <h1> Post {post}</h1>
        <p>Read more about post {post}</p>
      </a>
    </Link>
  ));
}
// ...

حالا بیایید به مرورگر برگردیم و ببینیم که ناوبری با آن چگونه کار می کند replace پایه به آن اضافه شده است.

از نسخه ی نمایشی بالا، توجه کنید که چگونه با کلیک بر روی دکمه بازگشت در پست سوم آنها، ما را به جای صفحه “فهرست پست ها” مستقیماً به صفحه اصلی می برد. این اتفاق می افتد زیرا ما آن را اضافه کردیم replace در مسیر پست سوم

scroll

وقتی صفحه جدیدی را با Next.js پیمایش می کنید <Link/>، به طور خودکار به سمت بالا حرکت می کند. می‌توانید این رفتار را غیرفعال کنید و حتی از طریق شناسه‌های هش (بخشی از URL بعد از #) به بخش‌های خاصی از صفحه جدید بروید.

برای غیرفعال کردن خودکار «scroll to top» یا hash ID، اسکرول را در مؤلفه Link روی false قرار دهید، همانطور که در زیر نشان داده شده است:

<Link href="/blog/intro" scroll={false}>
  <a>Disables scrolling to the top</a>
</Link>;

از هش شناسه ها برای اسکرول کردن به بخش های خاصی از یک صفحه وب استفاده کنید:

<Link href="https://blog.openreplay.com/what-is-css/#css-selectors">
  <a>Scroll to CSS selectors</a>
</Link>;

locale

را locale prop به شما این امکان را می دهد که محتوای یکسانی را به زبان های مختلف بر اساس زبان یا مکان دلخواه کاربران ارائه دهید. این برای وب سایت هایی که به کاربران کشورها و مناطق مختلف خدمات ارائه می دهند بسیار مفید است.

می‌توانید برنامه Next.js خود را راه‌اندازی کنید تا با پیکربندی شی i18n در next.config.js، نسخه‌های مختلف صفحه وب خود را به زبان دلخواه کاربران ارائه دهد. درباره پیکربندی محلی‌ها در اینجا بیشتر بخوانید.

نتیجه

هنگام توسعه برنامه‌ها در Next.js، توصیه می‌کنیم از مؤلفه Next.js Link روی عنصر لنگر اصلی برای مسیریابی استفاده کنید. Next Link نه تنها ناوبری سمت سرویس گیرنده را ساده می کند، بلکه به شما امکان می دهد با استفاده از ابزارهایی که در این مقاله به آن پرداختیم، رفتار آن را مطابق با مورد استفاده خود سفارشی کنید.

برای کسب اطلاعات بیشتر در مورد Next.js، راهنمای کامل ما در مورد Next.js و MongoDB را بخوانید.