title: NextJS special characters routes do not work from browser
body: <p>Using NextJS, I am defining some routes in <code>getStaticPaths</code> by making an API call:</p>
  
  <pre class="lang-js prettyprint-override"><code>/**
   * @dev Fetches the article route and exports the title and id to define the available routes
   */
  const getAllArticles = async () =&gt; {
      const result = await fetch("https://some_api_url");
      const articles = await result.json();
  
      return articles.results.map((article) =&gt; {
          const articleTitle = `${article.title}`;
  
          return {
              params: {
                  title: articleName,
                  id: `${article.id}`,
              },
          };
      });
  };
  
  /**
   * @dev Defines the paths available to reach directly
   */
  export async function getStaticPaths() {
      const paths = await getAllArticles();
      return {
          paths,
          fallback: false,
      };
  }
  </code></pre>
  
  <p>Everything works most of the time: I can access most of the articles, <code>Router.push</code> works with all URLs defined.</p>
  
  <p>However, when the article name includes a <strong>special character</strong> such as <code>&amp;</code>, <code>Router.push</code> keeps working, but copy/pasting the URL that worked from inside the app to another tab returns a page: </p>
  
  <blockquote>
    <p>An unexpected error has occurred.</p>
  </blockquote>
  
  <p>In the Network tab of the inspector, a <code>404</code> get request error (in Network) appears.</p>
  
  <p>The component code is mostly made of API calls such as:</p>
  
  <pre><code>await API.put(`/set_article/${article.id}`, { object });
  </code></pre>
  
  <p>With API being defined by axios.</p>
  
  <p>Any idea why it happens and how to make the <code>getStaticPaths</code> work with special characters?</p>