При работе с промежуточным ПО или заголовками Next.js в next.config.js вы можете наткнуться на сообщение об ошибке «Ошибка синтаксического анализа источника для маршрута». Это распространенная проблема, которая возникает, когда вы неправильно определяете значения matcher или source.

Давайте углубимся в эту ошибку Next.js, узнаем, когда она возникает и как ее исправить!

Когда возникает ошибка "Недопустимый источник пользовательского маршрута"?

Как объясняется в официальной документации, ошибка недействительного пользовательского маршрута source возникает, когда шаблон не может быть проанализирован в пользовательском маршруте, промежуточном программном обеспечении matcher, next.config.js headers source.

Одной из наиболее распространенных причин этого является использование обычного синтаксиса RegExp вместо синтаксиса path-to-regexp.

Взгляните на пример ниже:

// src/middleware.js

import { NextResponse } from 'next/server'
 
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  // invalid first carachter (it should be "/")
  matcher: '*',
}

При добавлении этого промежуточного программного обеспечения в ваше приложение Next.js компиляция завершится ошибкой «Ошибка: найдено недопустимое промежуточное программное обеспечение». Более подробно, причиной ошибки может быть «Ошибка синтаксического анализа *».

Точно так же рассмотрим файл next.config.js ниже:

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
        return [
            {
                // invalid double *
                source: "/api/:path**",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "https://example.com" },
                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
                ]
            }
        ]
    }
}

module.exports = nextConfig

Опять же, это завершится ошибкой с сообщением «Ошибка: найден неверный заголовок». Причина? Вот:

source parse failed for route {"source":"/api/:path**","headers":[{"key":"Access-Control-Allow-Credentials","value":"true"},{"key":"Access-Control-Allow-Origin","value":"https://example.com"},{"key":"Access-Control-All ow-Methods","value":"GET,DELETE,PATCH,POST,PUT"},{"key":"Access-Control-Allow-Headers","value":"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"}]Good to know: The matcher values need to be constants so they can be statically analyzed at build-time. Dynamic values such as variables will be ignored.

Что общего у этих двух примеров? И matcher, и source не соответствуют синтаксису path-to-regexp! Вот почему Next.js вызывает эту ошибку.

Устранение синтаксической ошибки неверного источника

Чтобы избежать ошибки, все, что вам нужно сделать, это убедиться, что matcher и source соответствуют синтаксису path-to-regexp. Наиболее важные правила, о которых следует помнить, заключаются в том, что значения, присвоенные этим полям:

  1. Должен начинаться с /
  2. Может включать именованные параметры (например, /blog/:path соответствует /blog/article-1 и /blog/article-1, но не /blog/article-3/draft)
  3. Может иметь модификаторы для именованных параметров, начинающихся с : (например, /blog/:path* соответствует /blog/a/b/c, потому что * означает «ноль или больше». В частности, ? — «ноль или один», а + — «один или несколько»)
  4. Можно использовать регулярные выражения, заключенные в круглые скобки (например, /blog/(.*) совпадает с /blog/:path*)

Изучите path-to-regexp документацию, чтобы узнать об этом синтаксисе!

Заключение

В этой статье вы узнали, что такое ошибка Next.js «ошибка синтаксического анализа источника для маршрута», почему она возникает и как ее исправить. В деталях вы поняли, что он возникает, когда вы не следуете синтаксису path-to-regexp. Таким образом, исправить это довольно просто и быстро!

Спасибо за прочтение! Я надеюсь, что вы нашли эту статью полезной. Не стесняйтесь оставлять любые вопросы, комментарии или предложения.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу