Rewrite regex multiple params included slash in NextJS 13

ONLINECAST

2 min read

·

03-09-2024

15

0

Share

Mastering Dynamic URLs with Regex in Next.js 13: A Deep Dive

Next.js 13's rewrite feature provides a powerful mechanism for creating dynamic and user-friendly URLs. This article delves into the intricacies of using regular expressions (regex) for rewriting URLs, particularly focusing on the scenario involving multiple parameters, including slashes, as encountered in the Stack Overflow question we'll analyze.

The Challenge: Dynamic URLs with Slashes

Our user faces a common challenge: constructing URLs with multiple parameters, some of which may contain slashes. For instance, the desired URL structure is /folder/:cond(cond1\|cond2\|cond3)/:city([a-z\-?]+\-ci)/:bld([a-zA-Z0-9\/\-]+). This URL structure includes three parameters:

• cond: A condition value that needs to match one of the predefined values: cond1, cond2, or cond3.
• city: A city name that must adhere to a specific format (lowercase letters, hyphens, question marks, followed by "-ci").
• bld: A building identifier that allows slashes within its value.

The Code: A Detailed Breakdown

The user attempts to configure the rewrite rule using the following code:

{
    source: '/folder/:cond(cond1\|cond2\|cond3)/:city([a-z\-?]+\-ci)/:bld([a-zA-Z0-9\/\-]+)',
    has : [
        {type: "query", key: "cond", value: "(?<cond>.*)"},
        {type: "query", key: "city", value: "(?<ci>.*)"},
        {type: "query", key: "bld", value: "(?<property>.*)"}
    ],
    destination: '/detail/index'
}

However, this configuration encounters a 404 error, indicating the rewrite rule isn't working as intended. Let's understand why.

The Issue: Mismatched Regular Expressions

The key lies in understanding how Next.js interprets the source and has properties. The source defines the pattern for the URL being rewritten. The has array, containing objects with type, key, and value, specifies what parts of the source URL should be captured and passed as query parameters to the destination URL.

The problem arises from the discrepancy between the regex used in source and the ones specified in has. Next.js uses the source regex to match the incoming URL and then uses the has regex to extract specific parts of the matched string. In this case, the regex in has doesn't match the capturing groups defined in source.

The Solution: Aligning Regex Patterns

To solve this, we need to ensure consistency between the capturing groups in the source regex and the has regexes:

{
    source: '/folder/(cond1|cond2|cond3)/(?<city>[a-z\-?]+\-ci)/(?<bld>[a-zA-Z0-9\/\-]+)',
    has: [
        { type: 'query', key: 'cond', value: '(?<cond>cond1|cond2|cond3)' },
        { type: 'query', key: 'city', value: '(?<city>[a-z\-?]+\-ci)' },
        { type: 'query', key: 'bld', value: '(?<bld>[a-zA-Z0-9\/\-]+)' }
    ],
    destination: '/detail/index'
}

Explanation of Changes:

1. Simplified source Regex: We've simplified the source regex by directly including the valid cond values (cond1, cond2, cond3) and using named capturing groups (?<city>...) and (?<bld>...).
2. Matching has Regexes: The has array now uses regexes that match the named capturing groups defined in the source regex, ensuring correct extraction of the captured values.

Additional Tips and Considerations:

• Test Thoroughly: Always rigorously test your rewrite rules using various combinations of valid and invalid URLs.
• Leverage Tools: Utilize regex testing tools to refine and debug your regex patterns.
• Prioritize Clarity: Write clear and concise regex patterns to improve readability and maintainability.

Conclusion:

By aligning the regex patterns in both the source and has properties, we achieve a robust and accurate rewrite rule. This allows Next.js to seamlessly handle dynamic URLs with multiple parameters, including slashes, creating a user-friendly and performant experience.