getStaticProps

import type { InferGetStaticPropsType, GetStaticProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

export async function getStaticProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}
 
export default function Page({ repo }) {
  return repo.stargazers_count
}

export async function getStaticProps(context) {
  return {
    props: { message: `Next.js is awesome` }, // 이 값은 페이지 컴포넌트에 props로 전달됩니다.
  }
}

// 이 함수는 서버 측에서 빌드 시점에 호출됩니다.
// 재검증이 활성화되고 새로운 요청이 들어오는 경우, 서버리스 함수에서 다시 호출될 수 있습니다.
 
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  return {
    props: {
      posts,
    },
    // Next.js는 페이지 재생성을 시도합니다:
    // - 요청이 들어올 때
    // - 최대 10초마다 한 번씩
    revalidate: 10, // 초 단위
  }
}

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      notFound: true,
    }
  }
 
  return {
    props: { data }, // 프로퍼티로 페이지 컴포넌트에 전달됩니다.
  }
}

export async function getStaticProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()
 
  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
        // statusCode: 301
      },
    }
  }
 
  return {
    props: { data }, // 프로퍼티로 페이지 컴포넌트에 전달됩니다.
  }
}

import { promises as fs } from 'fs'
import path from 'path'
 
// 게시물은 빌드 시점에 getStaticProps()에 의해 채워집니다.
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}
 
// 이 함수는 서버 측에서 빌드 시 호출됩니다.
// 클라이언트 측에서는 호출되지 않으므로 직접 데이터베이스 쿼리를 수행할 수도 있습니다.
export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)
 
  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')
 
    // 일반적으로 콘텐츠를 파싱/변환할 수 있습니다.
    // 예를 들어 여기에서 마크다운을 HTML로 변환할 수 있습니다.
 
    return {
      filename,
      content: fileContents,
    }
  })
  // { props: { posts }를 반환하면, 블로그 컴포넌트는 빌드 시점에 'posts'를 prop으로 받습니다.
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}
 
export default Blog