Question

想要实现

我有两个具有动态路径的链接。当我单击它们中的任何一个时，我希望根据单击的链接来动态显示本地数据。

问题

单击两个链接中的任何一个，将带我到404页面。我100％肯定我的设置是错误的，并且方向正确，但是似乎无法弄清楚如何实现动态路径以呈现关联数据。

我的代码

我的数据是一个json文件，位于文件 data/posts.json

[
   {
    "title": "Array",
    "description": "Arrays are ......"
  },

  {
    "title": "Objects",
    "description": "Objects are......"
  }
]

我的页面路径位于 pages/posts/[id].js

import fs from 'fs'
import path from 'path'

import Layout from '../../layout/layout'

const Post = ({data}) => {
  console.log(data);

  return (
    <Layout>
      <h1>{data.title}</h1>
      <p>{data.description}</p>


      <style jsx>{`
        h1, p {
          text-align: center;
        }  
      `}</style>
    </Layout>
  )
}


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 => {
    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

我的主要index.js文件位于 pages/index.js

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}) => {
  console.log(data);

  const titleData = data.map(item => item.title)

  return (
    <Layout>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Banner />
      <CardContainer titleData={titleData}/>
    </Layout>
  )
}

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 => {
    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

我的CardContainer组件是指向每个页面的链接所在的位置：

<Link href='/posts/[id]' as={`/posts/${title}`}>
    <img src={img} alt="card image" />
</Link>

title属性是我的json数据中的标题，该标题与页面路径相匹配，如下所示：

http://localhost:3000/posts/arrays

http://localhost:3000/posts/objects

我已经完成的研究

我检查了以下示例，但由于我的数据是本地数据，而不是来自API的数据，因此无法弄清。

next.js pages

fetching data for pages

markdown blog with Next.js

Next.js通过路径呈现动态内容

0 个答案: