Next.js中的动态路由

Question

我已经开始使用Next.js，自从我对React感到满意以来，学习曲线一直不错。

所以我正在尝试在我的应用程序中进行动态路由

My live/index.js-(这是我使用getServerSideProps发出API请求并获取初始数据的地方(

import Link from "next/link";
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://api.pandascore.co/matches/running?sort=&page=1&per_page=50&token=#`)
const data = await res.json()
const games = data;
// Pass data to the page via props
return {
props:
{
results: games,
}
}
}
const liveGames = ({ results }) => {
return (
<div>
<div className="game-container">
<h2>Live Games NOW - </h2>
{results.map((q) => (
<Link href = {'/live/' + q.slug}key={q.slug}>
<a className="live_link"> <h3>{q.name}</h3></a>
</Link>
))}
</div>
</div>
)
}
export default liveGames;

然后我的live/[slug].js文件-(点击后我会在这里呈现有关每个游戏的更多信息(

export const getStaticPaths = async () => {
const res = await fetch(`https://api.pandascore.co/matches/running?sort=&page=1&per_page=50&token=#`);
const data = await res.json();
const paths = data.map(o => {
return {
params: { slug: o.slug.toString() }
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async (context) => {
const slug = context.params.slug;
const res = await fetch(`https://api.pandascore.co/matches/running?search[slug]=${slug}&token=#`);
const data = await res.json();
console.log(data)
return {
props: {
game: data
}
}
}
const live = ({ game }) => {
return (
<div>
<p></p>
<h1>{game.name}</h1>
<h1>{game.id}</h1>
</div>
);
}
export default live;

所以一切都很正常，我的索引页面被完美地路由，URL也按照我想要的方式生成，我甚至可以从[slug].js中获取控制台中的数据，但是return((根本没有呈现任何内容。我无法解决问题，因为没有错误或任何需要我处理的问题，

我还有一个问题，在index.js中使用getServerSideProps和在[slug].js中使用getStaticPaths可以吗？这可能会导致生产中的CORS问题吗？这样做可以吗？(Next.js还是个新手，所以不太确定-我的API提供商已经明确表示所有的API请求都应该在服务器端进行，并建议我使用Next.js(

Answer 1

好吧，所以我解决了这个问题，我想最小的错误总是最难的，我只需要在[slug].js文件中通过数组再次映射，现在一切都按我想要的方式工作。