title: nextjs Dynamic route rendering content not working
body: <p>I am stuck on this problem for many days. I am using <a href="https://nextjs.org/" rel="noreferrer">Next.js</a> and have 3 pages.</p>
  <ul>
  <li>pages/index.js</li>
  <li>pages/categories.js</li>
  <li>pages/categories/[slug].js</li>
  </ul>
  <p>The <code>categories/[slug].js</code> is using <a href="https://nextjs.org/" rel="noreferrer">Next.js</a> fetching method name <a href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering" rel="noreferrer">getServerSideProps</a> that runs on each request and used for build dynamic pages on runtime. The <code>categories/[slug].js</code> is rendering a dynamic content on the page that dynamic content comes from the CMS as a response from the API Endpoint. Dynamic content is nothing but a string that contains HTML with <code>&lt;script /&gt;</code> elements.</p>
  <p><a href="https://i.stack.imgur.com/Z8rlC.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Z8rlC.jpg" alt="CMS Response" /></a></p>
  <p><strong>Note</strong>: To fetch the content from the CMS we have to send a <code>POST</code> request with the <code>CMS</code> credentials like username, password, and the page slug for the content. I am using <a href="https://github.com/axios/axios" rel="noreferrer">axios</a> library to send a post request and the method is inside <code>post.js</code> file.</p>
  <p><strong>post.js</strong>:</p>
  <pre><code>import axios from 'axios';
  
  const postCMS = async (slug) =&gt; {
      const url = `${process.env.CMS_API_URL}/render-page/`;
      let pageSlug = slug;
  
      // If the pageSlug is not start with `/`, then create the slug with `/`
      if (!pageSlug.startsWith('/')) {
          pageSlug = `/${pageSlug}`;
      }
  
      const head = {
          Accept: 'application/json',
          'Content-Type': 'application/json'
      };
  
      const data = JSON.stringify({
          username: process.env.CMS_API_USERNAME,
          password: process.env.CMS_API_PASSWORD,
          slug: pageSlug
      });
  
      try {
          const response = await axios.post(url, data, {
              headers: head
          });
          return response.data;
      } catch (e) {
          return e;
      }
  };
  
  export default postCMS;
  </code></pre>
  <p>But for the rendering content on the <code>categories/[slug].js</code> page, I am using the <a href="https://reactjs.org/" rel="noreferrer">Reactjs</a> prop name <a href="https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml" rel="noreferrer">dangerouslySetInnerHTML</a> to render all the HTML which also contains <code>&lt;script /&gt;</code> elements in the JSON string.</p>
  <p><strong>pages/categories/[slug].js</strong>:</p>
  <pre><code>&lt;div dangerouslySetInnerHTML={{ __html: result.html }} /&gt; 
  </code></pre>
  <p>The content is loading fine based on each slug. But when I navigate to that category page i.e.<code>pages/categories/index.js</code>.</p>
  <pre><code>&lt;Link href=&quot;/categories/[slug]&quot; as=&quot;/categories/online-cloud-storage&quot;&gt;
        &lt;a&gt;Online Cloud Storage&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>It has a <code>&lt;Link /&gt;</code> element and when I click it.</p>
  <p>The dynamic content is loading fine but that dynamic content contains <code>accordion</code> and <code>slider</code> elements they are not working. I think <code>&lt;script /&gt;</code> of these elements is not working. But when I refresh the page they work fine. See this.</p>
  <p><a href="https://i.stack.imgur.com/1T2Lq.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/1T2Lq.gif" alt="Preview the problem" /></a></p>
  <p>They also work fine when I set the Link something like this.</p>
  <pre><code>&lt;Link href=&quot;/categories/online-cloud-storage&quot; as=&quot;/categories/online-cloud-storage&quot;&gt;
            &lt;a&gt;Online Cloud Storage&lt;/a&gt;
   &lt;/Link&gt;
  </code></pre>
  <p>But after setting the link like the above method, the click is caused to hard reload the page. But I don't want this. Everything should work. When the user clicks on the category link.</p>
  <p><strong>Is there a way to fix this</strong>?</p>
  <p><strong>Why the content elements are not working when you click from the <code>categories/index.js</code> page</strong>?</p>
  <p><a href="https://github.com/john45321/next.js-dynamic-content" rel="noreferrer">Github repo</a></p>
  <p><strong>Code:</strong></p>
  <p><strong>pages/index.js</strong>:</p>
  <pre><code>import React from 'react';
  import Link from 'next/link';
  
  const IndexPage = () =&gt; {
      return (
          &lt;div&gt;
              &lt;Link href=&quot;/categories&quot;&gt;
                  &lt;a&gt;Categories&lt;/a&gt;
              &lt;/Link&gt;
          &lt;/div&gt;
      );
  };
  
  export default IndexPage;
  </code></pre>
  <p><strong>pages/categories/index.js</strong>:</p>
  <pre><code>import React from 'react';
  import Link from 'next/link';
  
  const Categories = () =&gt; {
      return (
          &lt;div&gt;
              &lt;Link href=&quot;/categories/[slug]&quot; as=&quot;/categories/online-cloud-storage&quot;&gt;
                  &lt;a&gt;Online Cloud Storage&lt;/a&gt;
              &lt;/Link&gt;
          &lt;/div&gt;
      );
  };
  
  export default Categories;
  </code></pre>
  <p><strong>pages/categories/[slug].js</strong>:</p>
  <pre><code>import React from 'react';
  import Head from 'next/head';
  import postCMS from '../../post';
  
  const CategoryPage = ({ result }) =&gt; {
      return (
          &lt;&gt;
              &lt;Head&gt;
                  {result &amp;&amp; &lt;link href={result.assets.stylesheets} rel=&quot;stylesheet&quot; /&gt;}
              &lt;/Head&gt;
              &lt;div&gt;
                  &lt;h1&gt;Category page CMS Content&lt;/h1&gt;
                  &lt;div dangerouslySetInnerHTML={{ __html: result.html }} /&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  
  export const getServerSideProps = async (context) =&gt; {
    const categorySlug = context.query.slug;
    const result = await postCMS(categorySlug);
    return {
      props: {
        result
      }
    };
  };
  
  
  export default CategoryPage;
  </code></pre>