프로젝트 셋업
$ npx create-next-app@latest --ts next-sample
$ cd next-sample
$ npm run dev
-> http://localhost:3000/
$ npm run build
$ npm run start
# 빌드 생성 및 서버 가동페이지 만들고 위 작업 반복
Side page (w. app router)
생성 : app/sample/page.tsx
-> page.tsx 혹은 page.js 와 같은 파일명으로 생성
function Sample() {
return <span>Hello, world</span>
}
export default Sample
정적 페이지 테스트 (SSG)
import { GetStaticPaths, NextPageContext, NextPage, GetStaticProps } from 'next'
import Head from 'next/head'
// Define props type -> Page Component
type SSGProps = {
message: string;
}
// Page for SSG
const SSG: NextPage<SSGProps> = (props) => {
const { message } = props;
return (
<div>
{/* Head로 감싸면 헤드 태그에 배치 */}
<Head>
<title>Static Site Generation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<p>
이 페이지는 정적 사이트 생성을 통해 빌드 시 생성된 페이지입니다
</p>
<p>{message}</p>
</main>
</div>
)
}
export const getStaticProps: GetStaticProps<SSGProps> = async(context) => {
const timestamp = new Date().toLocaleString();
const message = '${timestamp}에 getStaticProps가 실행됐습니다';
console.log(message);
return {
// draw page component based props
props: {
message,
},
};
};
export default SSG;-> $ npm run dev => 요청 있을 때 마다 getStaticProps 실행
- export, async 포함돼야 됨
getStaticProps with app router
왔도다.
마이그레이션의 때가.
원 코드는 아래와 같았다.
import { GetStaticPaths, NextPageContext, NextPage, GetStaticProps } from 'next'
import Head from 'next/head'
// Define props type -> Page Component
type SSGProps = {
message: string;
}
// Page for SSG
const SSG: NextPage<SSGProps> = (props) => {
const { message } = props;
return (
<div>
{/* Head로 감싸면 헤드 태그에 배치 */}
<Head>
<title>Static Site Generation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<p>
이 페이지는 정적 사이트 생성을 통해 빌드 시 생성된 페이지입니다
</p>
<p>{message}</p>
</main>
</div>
)
}
export const getStaticProps: GetStaticProps<SSGProps> = async(context) => {
const timestamp = new Date().toLocaleString();
const message = `${timestamp}에 getStaticProps가 실행됐습니다`;
console.log(message);
return {
// draw page component based props
props: {
message,
},
};
};
export default SSG;-> Error
⨯ ./app/ssg/page.tsx
Error:
× "getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching-> Docs
Upgrading: App Router Migration | Next.js
Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.
nextjs.org
-> 해결
- pages 디렉토리 생성
- page.tsx -> ssg.tsx 이름 변경
- pages 디렉토리로 파일 이동 (함수 변경 x)