이 내용은 아래 강의를 참조하여 만들었습니다. 이 강의에서 제공하는 github내용에 추가하여 만든 내용입니다.
https://www.youtube.com/watch?v=KjY94sAKLlw
import Head from 'next/head';
import Link from 'next/link';
import Image from 'next/image';
export default function TestList({posts}) {
return (
<div>
<Head>
<title>test list</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="home_body">
{posts.map((ev) => (
<Link key={ev.id} href={`${ev.url}`} passHref>
<a className="card" href={`${ev.url}`}>
<div className="image">
<Image width={600} height={600} alt={ev.title} src={ev.url} />
</div>
<div className="content">
<h2> {ev.title} </h2>
<p> {ev.url} </p>
</div>
</a>
</Link>
))}
</div>
</div>
);
}
export async function getServerSideProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/photos');
const posts = await res.json();
return {
props: {
posts,
},
};
}이름은 test.js 입니다.
next.config.js에 아래 내용을 수정하여 주시면 됩니다.(외부 도메인에서 데이터를 가져오기 위해서 입니다.)
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ['images.unsplash.com', 'wembleypark.com', 'via.placeholder.com'],
},
};
module.exports = nextConfig;
이 코드의 문제점은 데이터의 용량이 너무 커서 속도가 떨어진다는 점입니다.
이를 해결하기 위해 처음 랜더링 할때 필요한 데이터 빼고 나머지는 클라이언트에서 처리하는 것이 좋다고 합니다.
https://github.com/vercel/next.js/discussions/39880
How to solve "Large Page Data" issue with Nextjs? · vercel/next.js · Discussion #39880
I get this error for my site https://history-maps.com/ : Warning: data for page "/" is 1.05 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance. I'm getting this on...
github.com
이분이 이 문제를 잘 해결하셨습니다.
https://velog.io/@corgi-world/Next.js-Large-Page-Data-Warning-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0
[Next.js] Large Page Data Warning 해결하기!
Warning: data for page "/add" is 1.17 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance. Large Page Data Warning
velog.io
'BACK END > next.js' 카테고리의 다른 글
| next.js에 bootstrap 설치 (0) | 2023.05.25 |
|---|---|
| 1. next.js 란 무엇인가?(SSR/SSG) (0) | 2023.04.25 |