title: Create dynamic routes by id from Next JS pages api
body: <p>I have a page with a list of objects called <code>stories</code> that displays all my stories in an array. I also have a detail page with displays an <strong>individual story</strong>.</p>
  <p>I want to click on a link on any given story on the list, then it will navigate me to the individual story. I want to use <code>_id</code> as my dynamic part of the URL, as shown in the GraphQL below.</p>
  <p><strong>My Graphql</strong></p>
  <pre><code>export const listAllStories = () =&gt; {
    const query = gql`
      query StoryEntries($size: Int) {
        storyEntries(_size: $size) {
          data {
            _id
            _ts
            name
            premises{
              data{
                _id
                content
              }
            }
            createdAt
          }
        }
      }
    `
  
    return graphQLClient
        .request(query, { size: 999 })
        .then(({ storyEntries: { data } }) =&gt; data)
  }
  </code></pre>
  <p><strong>IN MY PAGES API I HAVE</strong></p>
  <pre><code>export default async function handler(req, res) {
    const handlers = {
      GET: async () =&gt; {
        const storyEntries = await listAllStories()
        res.json(storyEntries)
      },
    }
  
    if (!handlers[req.method]) {
      return res.status(405).end()
    }
  
    await handlers[req.method]()
  }
  </code></pre>
  <p><strong>ON THE STORY LIST PAGE I HAVE</strong></p>
  <pre><code>const ENTRIES_PATH = '/api/entries/allStories'
  
  const useEntriesFlow = ({ initialEntries }) =&gt; {
      const { data: entries } = useSWR(ENTRIES_PATH, {
          initialData: initialEntries,
      })
  
      const EntryItem = ({ entry }) =&gt; (
           &lt;&gt;
              {entries?.map((entry) =&gt; (
                    {entry.name}
         &lt;Link href=&quot;/story/[storyId]&quot; as={`/story/${entry._id}`}&gt;
                                  &lt;a&gt;Go&lt;/a&gt;
                              &lt;/Link&gt;
               ))}
           &lt;/&gt;
      )
  
  export const getStaticProps = async () =&gt; ({
      props: {
          initialEntries: await listAllStories(),
      },
      revalidate: 1,
  })
  </code></pre>
  <p>This is fine and works.</p>
  <p>**AND THEN ON THE DETAIL PAGE FOR EACH INDIVIDUAL STORY <code>[storyId].js</code> I HAVE  **</p>
  <pre><code>export default function Story({story}) {
  
      const router = useRouter()
      const storyId = router.query.storyId
      return(
          &lt;&gt;
              &lt;h5&gt;hello {story._id}&lt;/h5&gt;
          &lt;/&gt;
      )
  }
  
  export const getStaticPaths = async () =&gt; {
      const res = await fetch(`${server}/api/entries/allStories/`);
      const { data } = await res.json();
      const paths = data.map(story =&gt; {
          return {
              params: { id: story._id.toString() }
          }
            // trying to get the _id from each story 
      })
      return {
          paths,
          fallback: false
      }
  }
  
      export const getStaticProps = async (context) =&gt; {
      const { storyId } = context.query;    // Your dynamic page is [storyId].js
      const server = &quot;http://localhost:3000&quot;;
  
      const res = await fetch(`${server}/api/entries/allStories/${storyId}`);
      // trying to get the params._id from each story
      console.log(res)
      const { data } = await res.json();
      return {
          props: { story: data }
      }
  }
  </code></pre>
  <p><strong>ERROR</strong></p>
  <pre><code>TypeError: Cannot read properties of undefined (reading 'map')
  </code></pre>
  <p><strong>QUESTION</strong></p>
  <p>All I want to do is click on any story link, then it takes me to the details page, via the _id. I have tried a few things but I'm doing something (or some things) wrong.</p>
  <p>Any help will be greatly appreciated.</p>
  <p>EDIT AFTER. ERROR I'M GETTING. I'm not able to map my results on getStaticPaths</p>
  <p><a href="https://i.stack.imgur.com/e1xDs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e1xDs.png" alt="enter image description here" /></a></p>