我得到了以下代码:
路线:
在我的app/page.tsx
- Home组件上,我正在执行:
const HomePage = async () => {
const games = await getGames();
return (
<div className='container mx-auto px-4 py-8 flex flex-wrap relative z-0'>
{games.results.map((game: any) => (
<Link href={`details/${game.id}`} key={game.id}>
<div className='w-1/2 sm:w-1/2 md:w-1/3 lg:w-1/5 flex flex-col items-center mb-6'>
<div className='w-48 h-64 relative'>
<Image
src={game.background_image}
alt={game.name}
width={200}
height={300}
/>
<h2 className='text-center mt-2'>{game.name}</h2>
</div>
</div>
</Link>
))}
</div>
);
};
export default HomePage;
然后我有这个页面app/details/id/page.tsx
:
import Image from 'next/image';
import { getGameDetails } from '@/services';
const GameDetails = async ({ params }: any) => {
const game = await getGameDetails(params.id);
return (
<div className='container mx-auto px-4 py-8'>
<h1 className='text-3xl font-bold mb-4'>{game.name}</h1>
<div className='flex flex-col md:flex-row'>
<div className='md:w-1/3'>
<div className='w-full h-96 relative'>
<Image
src={game.background_image}
alt={game.name}
fill
className='cover'
/>
</div>
</div>
<div className='md:w-2/3 md:pl-8'>
<p className='mb-4'>{game.description}</p>
<div className='flex flex-wrap items-center mb-4'>
<p className='mr-2'>Metacritic Score:</p>
{game.metacritic_platforms.map(
(platform: {
url: string;
platform: { name: string; url: string };
metascore: string;
}) => (
<a
key={platform.platform.url}
href={platform.url}
target='_blank'
rel='noopener noreferrer'
className='px-2 py-1 bg-gray-200 text-gray-800 rounded-full mr-2'
>
{platform.platform.name}: {platform.metascore}
</a>
)
)}
</div>
<p className='mb-4'>
Released: {new Date(game.released).toLocaleDateString()}
</p>
<p className='mb-4'>Rating: {game.rating}/5</p>
<p className='mb-4'>Genres:</p>
<div className='flex flex-wrap mb-4'>
{game.genres.map((genre: any) => (
<span
key={genre.id}
className='px-2 py-1 bg-gray-200 text-gray-800 rounded-full mr-2 mb-2'
>
{genre.name}
</span>
))}
</div>
<a
href={game.website}
target='_blank'
rel='noopener noreferrer'
className='inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600'
>
Visit Website
</a>
</div>
</div>
</div>
);
};
export default GameDetails;
现在的问题是,当我在app/page.tsx
上时,对getGameDetails
的请求也会被执行。
我使用的是Next.js版本13.4.4
。
1条答案
按热度按时间moiiocjp1#
这是由于
next/link
的prefetch
属性,默认值设置为true
以改善客户端导航,正如他们所说:当
true
时,next/link
将在后台预取页面(由href
表示)。这对于提高客户端导航的性能非常有用。视口中的任何<Link />
(初始或通过滚动)将被预加载。如果你不想要这个功能(通常没有理由),你可以禁用它,这样做: