我在使用Next.js构建一个基本的新闻应用程序,从新闻 API 获取get请求结果并正确地对其进行映射,但我卡在了将单篇文章传递到名为"singleNews"的新页面的问题上。那么我该如何实现呢?下面是获取所有10篇文章的代码:
export default function news({data}) {
// const randomNumber = (rangeLast) => {
// return Math.floor(Math.random()*rangeLast)
// }
// console.log(data)
return (
<>
<div>
<h1 className="heading">Top Techcrunch Headlines!</h1>
</div>
<div className={styles.newsPage}>
{ // here you always have to check if the array exist by optional chaining
data.articles?.map(
(current, index) => {
return(
<Card datas={current} key={index+current.author} imageSrc={current.urlToImage} title={current.title} author={current.author}/>
)
}
)
}
</div>
</>
)
}
export async function getStaticProps() {
const response = await fetch(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${process.env.NEWS_API_KEY}&pageSize=12`)
const data = await response.json() // by default Article length is 104
// const articles = data.articles;
return{
props : {
data,
}
}
}