Создание умных страниц 404 в NextJS

404 страницы, все видели их до такой степени, что они являются мемом. Они нужны каждому сайту, но мало кто задумывается над их созданием (за исключением, конечно, одного ниже).

Суть страницы 404

Когда пользователь видит страницу 404, это означает, что пользователь ожидает контент, который должен быть на вашем сайте, но его нет. Это может произойти по нескольким причинам, включая опечатки, неверные URL-адреса, удаленный контент и так далее.

По своей сути страница 404 означает, что пользователь потерян. Пользователь больше не может продолжать работу с предполагаемым потоком сайта и застревает.

Как мы можем помочь пользователю?

URL-адреса уродливы, их трудно запомнить, и это кошмар для безопасности. Тем не менее, в них вся суть сети — Аллен Пайк.

Самый распространенный способ столкнуться со страницей 404 — перепутать URL. Итак, что, если бы страница 404 решила эту проблему.

404 страницы с поддержкой URL

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

Давайте строить

Мы будем использовать NextJs с js для простоты. Но базовые принципы можно применить к любой платформе.

Создайте свое следующее приложение со следующим:

yarn create next-app

Теперь давайте установим fuse.js и glob

yarn add fuse.js glob

Создайте файл 404.jsx в папке pages:

Запишите свой шаблонный jsx

Давайте начнем веселую часть.

Приложение next.js использует маршрутизацию на основе пути, что означает, что все файлы в каталоге /pages на самом деле являются маршрутами. Поэтому, если мы просто получим пути к файлам, это все существующие маршруты. Так что мы делаем именно это здесь.

Добавим следующий метод getStaticProps:

Здесь мы используем glob для поиска файлов с расширением .js в каталоге pages. Затем мы удаляем расширения и игнорируем следующие конкретные файлы js и маршруты API. Страницы, которые мы получаем сейчас, отправляются в качестве реквизита.

Теперь мы добавляем эффект использования следующим образом:

const NotFoundPage = ({ pages }) => {
  const [results, setResults] = useState([]);
  const router = useRouter();
  useEffect(() => {
    const fuse = new Fuse(pages);
    const searchResults = fuse.search(router.asPath);
    setResults(searchResults.map((result) => result.item));
  }, [pages, router.asPath]);
....

Здесь мы инициализируем Fuse.js, который представляет собой библиотеку нечеткого поиска со всеми нашими страницами и поиском текущего пути маршрута на нем. Затем мы добавляем все результаты в наше состояние результатов.

Теперь, чтобы проверить это. Создайте несколько тестовых страниц/маршрутов

Теперь откройте URL-адрес, который приводит к 404 (я открываю http://localhost:3000/es), и вот он:

Он предложил страницы, похожие на наш URL-адрес маршрута, т.е. протестируйте и зарегистрируйтесь.

Примечание. Если ваш URL-адрес не отображается, потому что NextJS не создает файл .js в режиме разработки, пока вы его не откроете. Это не проблема после сборки, поэтому она работает, если вы просто делаете:

next build && next start

Наконец, поскольку мы используем getStaticProps для получения страниц, это работает, даже если у вас статический хостинг.

Весь проект находится в git hub, если вам нужно заглянуть в код:
https://github.com/symetryn/Smart-404-page

Удачного кодирования!

Создание умных страниц 404 в NextJS