When refreshing a page developed by nextjs error occurred

Question

I have developed a project by nexjs which their backed is IIS and all these are working properly.

I have an URL address like this :

dastshafa.ir/product/2/آویشن

It works well until I wasn't refreshing a page. the browser throws an error:

404 - File or directory not found.

I was applied this web.config snipped:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="ReactRouter Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{QUERY_STRING}"  pattern="^product/\[0-9]{1,}/\.*$" />
              </conditions>
              <action type="Rewrite" url="dastshafa.ir/{C:0}" />
            </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>

But my problem is not fixed yet.

How can I fix it?

Answer 1

It seems it was correlated to IIS URL rewrite issues. fortunately, I succeed to do this using this snipped, that is persist in a web.config file:

?<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="ReactRouter Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{PATH_INFO}" pattern="\/product\/(\d+)\/.*" />
              </conditions>
              <action type="Rewrite" url="product/[productId]/[productName].html" />
            </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>

thanks to https://dnnsupport.dnnsoftware.com/hc/en-us/articles/360005303894-Creating-a-rewrite-rule-with-IIS-and-the-web-config