title: Next.js rendering dynamic content via paths
body: <p><strong>Want to Achieve</strong></p>
  
  <p>I have two links that have dynamic paths. When I click on either of them, I want my local data to be dynamically displayed based on which link is clicked. </p>
  
  <p><strong>Issue</strong></p>
  
  <p>Clicking on either of the two links brings me to a 404 page. I'm 100% certain my setup is wrong and I'm in the right direction, but can't seem to figure out how to implement my dynamic paths to render with the associated data.</p>
  
  <p><strong>My Code</strong></p>
  
  <ul>
  <li>My data is a json file that lives in the root of my project within a folder <strong><code>data/posts.json</code></strong></li>
  </ul>
  
  <pre><code>[
     {
      "title": "Array",
      "description": "Arrays are ......"
    },
  
    {
      "title": "Objects",
      "description": "Objects are......"
    }
  ]
  </code></pre>
  
  <ul>
  <li>My page paths sit in <strong><code>pages/posts/[id].js</code></strong></li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>import fs from 'fs'
  import path from 'path'
  
  import Layout from '../../layout/layout'
  
  const Post = ({data}) =&gt; {
    console.log(data);
  
    return (
      &lt;Layout&gt;
        &lt;h1&gt;{data.title}&lt;/h1&gt;
        &lt;p&gt;{data.description}&lt;/p&gt;
  
  
        &lt;style jsx&gt;{`
          h1, p {
            text-align: center;
          }  
        `}&lt;/style&gt;
      &lt;/Layout&gt;
    )
  }
  
  
  export async function getStaticProps() {
    // Read file directory
    const postsDirectory = path.join(process.cwd(), 'data')
    const filenames = fs.readdirSync(postsDirectory)
  
    // Read and parse JSON file
    const fileData = filenames.map(filename =&gt; {
      const filePath = path.join(postsDirectory, filename)
      const fileContents = JSON.parse(fs.readFileSync(filePath, 'utf8'))
  
      return {
        filename,
        content: fileContents,
      }
    })
  
    const data = fileData[0].content
  
    return {
      props: {
        data: data[query.id]
      },
    }
  }
  
  export async function getStaticPaths() {
    return {
      paths: [
        { params: { id: 'arrays' } },
        { params: { id: 'objects' } }
      ],
      fallback: false
    };
  }
  
  
  export default Post
  
  </code></pre>
  
  <ul>
  <li>My main index.js file which sits in <strong><code>pages/index.js</code></strong></li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>import fs from 'fs'
  import path from 'path'
  
  import Layout from '../layout/layout'
  import Head from 'next/head'
  import Banner from '../components/banner'
  import CardContainer from './../components/card';
  
  const Home = ({data}) =&gt; {
    console.log(data);
  
    const titleData = data.map(item =&gt; item.title)
  
    return (
      &lt;Layout&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;link rel="icon" href="/favicon.ico" /&gt;
        &lt;/Head&gt;
        &lt;Banner /&gt;
        &lt;CardContainer titleData={titleData}/&gt;
      &lt;/Layout&gt;
    )
  }
  
  export async function getStaticProps() {
    // Read file directory
    const postsDirectory = path.join(process.cwd(), 'data')
    const filenames = fs.readdirSync(postsDirectory)
  
    // Read and parse JSON file
    const fileData = filenames.map(filename =&gt; {
      const filePath = path.join(postsDirectory, filename)
      const fileContents = JSON.parse(fs.readFileSync(filePath, 'utf8'))
  
      return {
        filename,
        content: fileContents,
      }
    })
  
    const data = fileData[0].content
  
    return {
      props: {
        data
      },
    }
  }
  
  export default Home
  
  </code></pre>
  
  <p>My <code>CardContainer</code> component is where the link to each page sits:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Link href='/posts/[id]' as={`/posts/${title}`}&gt;
      &lt;img src={img} alt="card image" /&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>The <code>title</code> prop is the title from my json data which matches the page path like so: </p>
  
  <p><strong><code>http://localhost:3000/posts/arrays</code></strong></p>
  
  <p><strong><code>http://localhost:3000/posts/objects</code></strong></p>
  
  <p><strong>Research I've done</strong></p>
  
  <p>I have checked the following examples but wasn't able to figure it out as my data is local and not from an API.</p>
  
  <p><a href="https://nextjs.org/docs/basic-features/pages" rel="nofollow noreferrer">next.js pages</a></p>
  
  <p><a href="https://nextjs.org/learn/basics/fetching-data-for-pages/fetching-data-for-pages" rel="nofollow noreferrer">fetching data for pages</a></p>
  
  <p><a href="https://dev.to/tinacms/creating-a-markdown-blog-with-next-js-52hk" rel="nofollow noreferrer">markdown blog with Next.js</a></p>