При работе с промежуточным ПО или заголовками 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
. Наиболее важные правила, о которых следует помнить, заключаются в том, что значения, присвоенные этим полям:
- Должен начинаться с
/
- Может включать именованные параметры (например,
/blog/:path
соответствует/blog/article-1
и/blog/article-1
, но не/blog/article-3/draft
) - Может иметь модификаторы для именованных параметров, начинающихся с
:
(например,/blog/:path*
соответствует/blog/a/b/c
, потому что*
означает «ноль или больше». В частности,?
— «ноль или один», а+
— «один или несколько») - Можно использовать регулярные выражения, заключенные в круглые скобки (например,
/blog/(.*)
совпадает с/blog/:path*
)
Изучите path-to-regexp
документацию, чтобы узнать об этом синтаксисе!
Заключение
В этой статье вы узнали, что такое ошибка Next.js «ошибка синтаксического анализа источника для маршрута», почему она возникает и как ее исправить. В деталях вы поняли, что он возникает, когда вы не следуете синтаксису path-to-regexp
. Таким образом, исправить это довольно просто и быстро!
Спасибо за прочтение! Я надеюсь, что вы нашли эту статью полезной. Не стесняйтесь оставлять любые вопросы, комментарии или предложения.
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу