When refreshing a page developed by nextjs error occurred

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?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum