The regex path matching issue in next.config.js is being caused by the pattern not being able to start with "?"

In my upcoming project, I attempted to utilize regex path matching in the next.config.js file as explained in the documentation. The goal was to match all routes except for one specific route by adding the regex ^(?!.*books). which successfully excludes anything with "books". However, when I tried implementing this in the headers section of my next.config.js file like so:

    async headers() {
            return [
                {
                    source: "/^(?!.*books).*$",
                    headers: [
                        {
                            key: "Content-Security-Policy",
                            value: "base-uri 'self'; form-action 'self'; object-src 'self'; media-src 'self';"
                        },
                        {
                            key: "Strict-Transport-Security",
                            value: "max-age=63072000; includeSubDomains; preload"
                        },
                        {
                            key: "X-Content-Type-Options",
                            value: "nosniff"
                        },
                        {
                            key: "X-XSS-Protection",
                            value: "1; mode=block"
                        },
                        {
                            key: "X-Frame-Options",
                            value: "deny"
                        }
                    ]
                }
            ]

Upon running the application using npm run dev, an error stating that "Pattern cannot start with "?"" is thrown. Despite being a valid regex and passing tests, the regex does not seem to work within the next.config.js file. What could be causing this discrepancy?

Answer №1

Discovered the solution to this specific issue: https://example.com/nextjs/solution-issue15712

After reviewing the github discussion, it was determined that the required regex pattern is ((?!books).*)

{
    source: "/((?!books).*)",
    headers: [
        {
            key: "Content-Security-Policy",
.....

This approach successfully resolved the issue for me, yet I remain curious as to why the regex differs in this scenario. Why is it ((?!books).*) instead of ^(?!.*books).*$? Any clarification on this would be much appreciated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with looping through subarrays using Javascript and JSON

I am attempting to iterate through a JSON object using Javascript (jQuery). Within the main JSON object, each object in the array contains embedded arrays of tags. My goal is to loop through all the files in the main object and simultaneously iterate thro ...

What is causing the "unable to resolve dependency tree" error when using ng new newApp?

Struggling with creating a new Angular app using the command ng new app-name? When running the command, you may encounter the following error in the command line. Installing packages (npm)...npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depen ...

What is the process for dynamically populating a select dropdown based on the selection made in another select dropdown?

I need to dynamically populate the second select box based on the option selected in the first select box. Here's what I have tried so far, but it doesn't seem to be working as expected. HTML: <form id="step1"> <p> Creat ...

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

Obtain element values using Protractor and WebDriverJS and store them in an array of objects

Coming from a Java+WebDriver background, I am new to Protractor, WebdriverJS, and Jasmine. In the image displayed, my goal is to hover over all bubbles and retrieve the tool tip values (city, sold, connected), assign them as objects to an array, and return ...

Why is my React component not being updated with Routes?

I'm new to using react-router and I'm struggling with it for the first time. Here is the code snippet: App.tsx import React from 'react'; logo = require('./logo.svg'); const { BrowserRouter as Router, Link, Route } = require ...

What is the target of the `__proto__` attribute in a constructor function?

I'm taking the time to dive deeper into prototypal inheritance. I know that an instance's __proto__ property points to the constructor function's prototype object, but where does the constructor function's __proto__ property point to? ...

Troubleshooting npm audit error involving loadVirtual and ENOLOCK

➜ npm safety check npm ERR! code ENOLOCK npm ERR! safety check This operation requires an existing lockfile. npm ERR! safety check Please generate one using: npm i --package-lock-only npm ERR! safety check Original error: loadVirtual needs a preexistin ...

Broadcast signals to an overarching frame

I have successfully embedded a chatbot (Angular 14 app) in an iframe and now I need to determine whether the frame should be minimized so it can fit within the parent container. My goal is to send custom events to the receiving frame. let iframeCanvas = do ...

Modifying button attribute through dropdown selection

In my project, I have a dropdown that gets its data from a database. Depending on the selection made in the dropdown, I would like to change the attribute of a button (data-uk-modal="{target:'#modal-'value of dropdown'}"). <select id "ci ...

Generating an assortment of specific rows by utilizing checkboxes in React JS

I'm currently dealing with a table of data where the first column consists of checkboxes. My goal is to generate an array containing the ID of each row that is selected. const [selectedRows, setSelectedRows] = useState([]); const handleCheckbox ...

Executing several GET requests in JavaScript

Is there a more efficient way to make multiple get requests to 4 different PHP files within my project and wait for all of them to return successfully before appending the results to the table? I have tried nesting the requests, but I'm looking for a ...

Using Vue JS to showcase array data in a dropdown menu with Bootstrap-vue

Currently, I have an array of JSON data structured like this: loggers = [{ "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'], "level": "WARN", "logger": "com.test1", "status": "success" }, { ...

Assistance needed with selecting elements using jQuery

After some practice with jQuery, I managed to select this specific portion from a lengthy HTML file. My goal is to extract the values of subject, body, and date_or_offset (these are name attributes). How can I achieve this? Let's assume this snippet i ...

Customize each Picker.Item element in React Native with unique styles

How can I style individual Picker.Items beyond just changing the text color? Additionally, what other props can be used for a Picker.Item? I am aware of "key", "value", "label", and "color". Are there any additional props available? I want to customize o ...

What is the best way to activate ui-sref in an AngularJS unit test?

Currently I am conducting a test on an AngularJS view. The code sample contains some non-standard helpers, but they should not affect the specific functionality being tested. Below is the view (written in Jade): #authentication-options button#sign-up(u ...

Attempting to insert items into a storage array and subsequently outputting them using a loop

I am attempting to add "contacts" to local storage, and every time I add a new contact I want to refresh it in a jQuery list. I have successfully achieved this without using local storage. However, now I am facing a problem that I can't seem to solve. ...

Maximizing code efficiency with jQuery toggleClass

After creating a code to validate input fields for empty values, I've come to realize that using jQuery toggleClass could potentially enhance or optimize it. However, I'm stuck on how to go about implementing this improvement. Any assistance woul ...

I am looking to retrieve data from the Graph API JSON and gradually refine my search to achieve successful

I am looking to retrieve data from the "fb_page_categories" endpoint, which provides an array of categories a page can be categorized under. The format for this request is as follows: GET graph.facebook.com /fb_page_categories? Once this request is mad ...

Error Alert: Request missing connection details while trying to connect to Sql server via express.js

I am currently utilizing the most recent versions of node, express, and mssql module. My objective is to establish a connection with the local instance of SQL Server 2014 through express.js. Following the guidelines provided in the official documentation, ...