title: making dynamic route by API with next+react
body: <p>i'd like to make a dynamic route with react and next.js
  I have an API like this.</p>
  <pre><code>[
    {
      &quot;id&quot;: 1,
      &quot;name&quot;: &quot;books&quot;,
      &quot;pages&quot;: &quot;277&quot;,
      &quot;title&quot;: &quot;Book A&quot;,
      &quot;no&quot;: 88
    },
    {
      &quot;id&quot;: 2,
      &quot;name&quot;: &quot;books&quot;,
      &quot;pages&quot;: &quot;90&quot;,
      &quot;title&quot;: &quot;Book B&quot;,
      &quot;no&quot;: 32
    },
    {
      &quot;id&quot;: 4,
      &quot;name&quot;: &quot;books&quot;,
      &quot;pages&quot;: &quot;184&quot;,
      &quot;title&quot;: &quot;Book C&quot;,
      &quot;no&quot;: 89
    }
  ...
  ]
  </code></pre>
  <p>and this API will show in the screen like this. this is mapped li in <code>Book.jsx</code></p>
  <pre><code> &lt;li&gt;
        &lt;p&gt;{book.name}&lt;/p&gt;
        &lt;p&gt;{book.pages}&lt;/p&gt;
      &lt;/li&gt; 
  </code></pre>
  <p>Now, what i want to make is when i click li, it connects to the &quot;no&quot; of API and make a new window.
  so I created <code>[bookNo].jsx</code> and the same location with <code>pages</code> &gt; <code>index.jsx</code> and added these to <code>[bookNo].jsx</code></p>
  <pre><code>const DetailedView = () =&gt; {
    const router = useRouter();
    const {bookNo} = router.query;
    
    return (
      &lt;div&gt;
        &lt;p&gt;{bookId}&lt;/p&gt;
      &lt;/div&gt;
    );
  
  };
  </code></pre>
  <p>to make router works, i added these code to <code>Book.jsx</code></p>
  <pre><code>useEffect(() =&gt; {
      getBooks().then(res =&gt; {
        const book = res.data.DATA.RESPONSE.BOOKS;
        for (let i = 0; i &lt; book.length; i++) {
          const bookNo = bookData[i].no;
        }
      }).catch(e =&gt; {
        console.log(e)
      })
    }, [])
  &lt;Link href=&quot;pages/bookView/[bookId]&quot; as={`/bookView/${bookId}`}&gt;
    &lt;li onClick&gt;
      &lt;p&gt;{book.name}&lt;/p&gt;
      &lt;p&gt;{book.pages}&lt;/p&gt;
    &lt;/li&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>And I've got 2 errors that
  ReferenceError: bookNo is not defined and router is not working at all.
  Can anyone help me with this problem?</p>