CODEWITHSUNDEEP
javascriptreactjsnext.jsnext.js13
KA-Yasso
KA-Yasso

Reputation: 541

NextJS dynamic routes is adding .txt to the end of URL

Error:

In **NextJS this link <Link href="/link">link</Link> will redirect to /link.txt

Now this is just an example, because for this simple link I can use just an HTML <a href="/link">link</a>

but the real issue is when using NextJS Dynamic Routes:

src/app/stackoverflow/[questionId]/page.tsx

In my code I have a function that handles the redirection to this specific route:

function handleConditionClick(questionId) {
    router.push(`/stackoverflow/${questionId}`);
}

I also tested it with the link: <Link href={`/stackoverflow/${questionId}`}>Open</Link>.

In localhost it's working fine, but in the production server the router adds a .txt to the end of the URL.

NextJS Version: "next": "^13.4.19"

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    // Optional: Add a trailing slash to all paths `/about` -> `/about/`
    // trailingSlash: true,
    // Optional: Change the output directory `out` -> `dist`
    distDir: 'build',
  };
   
  module.exports = nextConfig;

public/web.config:

<?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="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
    </system.webServer>
    <system.web>
        <authentication mode="None" />
    </system.web>
</configuration>

Upvotes: 2

Views: 362

Answers (1)

KA-Yasso
KA-Yasso

Reputation: 541

Solution :

update NextJS:

npm i next@latest

the issue has been fixed in [email protected]

the problem is only on production server and here's why; the localhost is running on Node when you run the application with:

npm run dev

which is not the case for most production windows servers so the solution is either to install Node on Production server or leave it as it is and work with Query String useSearchParams https://nextjs.org/docs/app/api-reference/functions/use-search-params

Upvotes: 0

Related Questions