Удаление «HREF» от Next.js Динамические маршруты

Автор оригинала: Josiah Dudzik.

Примечание : Этот код теперь избыточный с момента объявлений Next.js Автоматическое разрешение «HREF» Отказ Однако это все еще отличный источник для образования, и в некоторых редких случаях все еще может быть полезным – таким, как если кодовая база застряла на более старой версии следующего!

Если вы использовали Next.js на любую продолжительность времени, вы знаете, что страницы и маршруты страницы определяются структурой файла приложения. Это может упростить необходимость вручную объявить маршруты и облегчает быстро получить простое приложение вверх и работает! Однако это создает точку боли, когда пришло время работать с большим количеством динамических маршрутов.

В качестве примечания этот пост предполагает, что вы уже знакомы с тем, как следующим образом обрабатывает динамические маршруты в его структуре файла. Если нет, вы всегда можете проверить Документация узнать о спецификах.

Основной точкой соперничества происходит от того, как вы должны определить маршрут дважды, когда вы хотите перейти на страницу, которая генерируется динамическим маршрутом. Если вы решили использовать следующие ‘ Ссылка элемент или очень удобное UserOuter Крюк, вам придется определить так:

import Link from 'next/link';


  First Post

Как видите, мы должны были написать строку URL в как , но мы также должны были определить путь к файловой структуре в href Отказ В большинстве случаев это хорошо, потому что обычно вы будете знать, где вы отправляете пользователя, и вы можете просто написать href линия без проблемы. Тем не менее, это становится беспокойством, когда вам нужно хранить динамический URL в параметре cookie или URL, потому что вам придется хранить как URL, так и путь к структуре файла. В зависимости от вашей кодовой структуры и того, как вы храните значения, это может даже быть потенциальной озабоченностью безопасности, поскольку линия структуры файлов будет раскрывать вашу логику маршрутизации! Не говоря уже о том, что этот стиль маршрутизации является дополнительным когнитивным подслувом, особенно когда вы имеете дело с вложенными динамическими маршрутами и ловкой – все маршруты в каждой ссылке, которую вы пишете.

Решение – устранить необходимость вручную определять href на каждой ссылке, автоматически выводя его на основе предоставленного URL. Вопрос в том, что вы не можете напрямую вывести путь к файловой структуре из строки URL! Нам нужно будет реализовать другой инструмент. Так приходит Путь к регессу , инструмент, который позволяет нам преобразовывать строки пути к регулярному выражению, а затем проверьте, соответствует ли прилагаемая строка URL Regexp!

Давайте наступим в паузу и уточните некоторую терминологию, которую мы используем. Теперь мы работаем с 2 различными типами строк, которые относятся к логическому отображению маршрутов URL.

• Путь структуры файлов Является ли нестандартный метод URL-маршрутизации URL, используемый Next.js, чтобы сопоставить URL для их маршрутов на основе файлов. Некоторые примеры: /блог/[пост] , /user/[ID] , /search/[[...filters]] Отказ
• Путь-строка является стандартным методом маршрутизации URL-адресов, используемый во многих веб-сайтах, серверах и т. Д. Те же примеры, что и выше, написанные на путях, выглядит так: /блог/: пост , /user/: id , /поиск/: фильтры * Отказ

Есть проблема с использованием Путь к регессу библиотека. Как уже упоминалось выше, следующие пути к файлам структуры файлов не являются стандартными, и нам придется добавить дополнительный шаг, который преобразует следующую структуру файловых строк в стандартную строку путей. Самый простой способ сделать это создает файл маршрутов со всеми нашими нашими маршрутами файловой структуры, определенной наряду с их аналоговыми путями. Страница GitHub Path-To-Regexp имеет некоторые Основные инструкции На написании стандартных путей-строк. Короче говоря, если вы когда-либо использовали Реагистрационный маршрутизатор Тогда вы уже работали с путями-струнами. Вот пример файла маршрутов:

// routes.js

export default [  
  // Static Routes
  ['/', '/'],
  ['/blog', '/blog'],
   
  // Dynamic Route
  ['/blog/[post]', '/blog/:post'],
  
  // Catch-all Route
  ['/delete-posts/[...posts]', '/delete-posts/:posts+'],
   
  // Optional Catch-all Route 
  ['/search/[[...filters]]', '/search/:filters*']
];

Здесь мы объявили массив, который содержит все наши ссылки в нашем приложении. Каждый элемент – это еще один массив, в котором первое значение – это путь к файловой структуре следующего, а второе значение – это аналог путей. С этими определенными мы можем легко совпадать между двумя!

Следует отметить, что упорядочение элементов имеет значение! Если URL-адрес потенциально сопоставят несколько элементов, мы собираемся выбрать первый, который он соответствует. Вы также можете заметить, что наши маршруты файл не очень Сухой Отказ Больше на этом позже.

Далее нам нужно создать функцию, которая возьмет URL, проверьте, соответствует ли он любым из наших перечисленных строковых путей, а затем вернуть соответствующую строку структуры файлов. Не волнуйтесь, это не так сложно, как это звучит:

// deriveNextPath.js

import { match } from 'path-to-regexp';
import routes from '/routes';

const deriveNextPath = (url) => {

  // Remove any query params or hash mark from the URL for this process:
  const simplifiedUrl = url.split('?')[0].split('#')[0];
  let selectedfilePath = undefined;

  // Loop through each available route until we find the first match:
  routes.some((route) => {
    const [nextRoute, pathString] = route;
    
    // Convert the current path-string into a regular expression:
    const regexpMethod = match(pathString, { decode: decodeURIComponent });
    
    // Check if the regular expression matches the supplied URL:
    if (regexpMethod(simplifiedUrl)) {
      selectedfilePath = nextRoute;
      return true;
    }
  });

  // Return our final Next.js file structure path!
  return selectedfilePath;
};

export default deriveNextPath;

Технически, мы закончили! Все, что осталось, это использовать наш новый derivenextpath Функция, где мы хотим автоматически генерировать наши href Отказ Отличный пример – создать обертку для Ссылка а затем использовать его:

// MyLink.js

import Link from 'next/link';
import { deriveNextPath } from '/deriveNextPath';

const MyLink = (props) => {
  const {as, ...remainingProps} = props;
  
  return (
    
  );
};

export default MyLink;


---------------------------------------
// Using MyLink.js
  
import MyLink from '/MyLink';


  First Post

href Значение будет автоматически сгенерировано для нас до тех пор, пока наши Маршруты.js Файл остается в курсе.

Хотите попробовать несколько вызовов оптимизации?

• Как я уже упоминал выше, Маршруты.js Файл не сухой для статических маршрутов. Какие изменения должны быть сделаны, чтобы позволить вам объявить статические маршруты только один раз в этом файле?
• Почти во всех случаях в нашем Маршруты.js Файл, мы объявляем маршруты Dynamic/Catch-All/etc, чтобы соответствовать путям-структуре файлов и строки путей, так как мы можем добавить этот код еще дальше, и автоматически генерировать наши строки пути на основе Пути структуры файлов?