Динамично маршрутизиране в приложенията Next.js

В уеб разработката създаването на динамично и персонализирано съдържание е от съществено значение за предоставянето на ангажиращи потребителски изживявания. С Next.js, популярна рамка на React, динамичното маршрутизиране става лесно. В тази статия ще се потопим дълбоко в динамичното маршрутизиране в Next.js, разбирайки важността му и изследвайки различни техники чрез лесни за следване примери на код.

Какво е динамично маршрутизиране?

Динамичното маршрутизиране ви позволява да генерирате страници с различно съдържание въз основа на специфични параметри, като идентификатори, охлузи или всякакви други данни от вашия бекенд или API. За разлика от статичните маршрути, където всяка страница има предварително дефиниран маршрут, динамичното маршрутизиране ви позволява да създавате страници в движение и да персонализирате тяхното съдържание.

Next.js предоставя мощен механизъм за динамично маршрутизиране, което го прави фантастичен избор за изграждане на приложения, които изискват динамично и персонализирано съдържание.

Създаване на динамични маршрути

В Next.js динамичните маршрути се дефинират с квадратни скоби ([]) в директорията pages. Ето как можете да създадете динамичен маршрут за отделни публикации в блогове:

Създайте файл с име [slug].js в директорията pages/posts.
Вътре в този файл можете да получите достъп до динамичния параметър, като използвате куката useRouter от next/router:

import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
    </div>
  );
}

export default Post;

Тук частта [slug] в името на файла съответства на динамичния сегмент в URL адреса. Например, ако имате достъп до /posts/my-dynamic-post, slug ще бъде равно на 'my-dynamic-post'.

Генериране на динамични маршрути

За да генерирате динамични маршрути динамично, можете да използвате функцията getStaticPaths във вашия компонент за динамичен маршрут. Тази функция дефинира кои пътища трябва да бъдат предварително изобразени по време на изграждане. Нека модифицираме нашия [slug].js файл, за да включим това:

import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
      <p>{post.content}</p>…

Динамично маршрутизиране в приложенията Next.js