getStaticPaths

Bir sayfa Dinamik Rotalara sahipse ve getStaticProps adresini kullanıyorsa, statik olarak oluşturulacak yolların bir listesini tanımlaması gerekir.

Dinamik rotalar kullanan bir sayfadan getStaticPaths (Statik Site Oluşturma) adlı bir işlevi dışa aktardığınızda Next.js, getStaticPaths tarafından belirtilen tüm yolları statik olarak önceden oluşturacaktır.

pages/repo/[name].tsx

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // See the "paths" section below
    ],
    fallback: true, // false or "blocking"
  }
}) satisfies GetStaticPaths
 
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
}

getStaticPaths API referansı, getStaticPaths ile kullanılabilecek tüm parametreleri ve sahne donanımlarını kapsar.

When should I use getStaticPaths?

Dinamik rotalar kullanan sayfaları statik olarak önceden oluşturuyorsanız getStaticPaths adresini kullanmalısınız:

Veriler başsız bir CMS'den geliyor
Veriler bir veritabanından gelir
Veriler dosya sisteminden gelir
Veriler genel olarak önbelleğe alınabilir (kullanıcıya özel değil)
Sayfa önceden işlenmeli (SEO için) ve çok hızlı olmalıdır - getStaticProps, HTML ve JSON dosyalarını oluşturur, her ikisi de performans için bir CDN tarafından önbelleğe alınabilir

When does getStaticPaths run

getStaticPaths yalnızca üretimde derleme sırasında çalışacak, çalışma zamanı sırasında çağrılmayacaktır. getStaticPaths içinde yazılan kodun istemci tarafı paketinden kaldırıldığını bu araçla doğrulayabilirsiniz .

How does getStaticProps run with regards to getStaticPaths

getStaticProps derleme sırasında döndürülen herhangi bir paths için next build sırasında çalışır
getStaticProps kullanırken arka planda çalışır fallback: true
getStaticProps kullanıldığında ilk render işleminden önce çağrılır fallback: blocking

Where can I use getStaticPaths

getStaticPaths ile birlikte kullanılmalıdır getStaticProps
getStaticPaths ile birlikte kullanamazsınız. getServerSideProps
getStaticPaths adresini de kullanan bir Dinamik Rot adan dışa aktarabilirsiniz getStaticProps
getStaticPaths adresini sayfa olmayan bir dosyadan (örneğin components klasörünüzden) dışa aktaramazsınız
getStaticPaths adresini sayfa bileşeninin bir özelliği olarak değil, bağımsız bir işlev olarak dışa aktarmalısınız

Runs on every request in development

Geliştirme aşamasında (next dev), getStaticPaths her istek üzerine çağrılacaktır.

Generating paths on-demand

getStaticPaths ile hangi sayfaların isteğe bağlı yerine derleme sırasında oluşturulacağını kontrol etmenizi sağlar. fallback. Derleme sırasında daha fazla sayfa oluşturmak daha yavaş derlemeye neden olacaktır.

paths için boş bir dizi döndürerek tüm sayfaların isteğe bağlı olarak oluşturulmasını erteleyebilirsiniz. Bu, Next.js uygulamanızı birden fazla ortama dağıtırken özellikle yararlı olabilir. Örneğin, önizlemeler için (ancak üretim derlemeleri için değil) tüm sayfaları isteğe bağlı olarak oluşturarak daha hızlı derlemeler elde edebilirsiniz. Bu, yüzlerce/binlerce statik sayfası olan siteler için faydalıdır.

pages/posts/[id].js

export async function getStaticPaths() {
  // When this is true (in preview environments) don't
  // prerender any static pages
  // (faster builds, but slower initial page load)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }
 
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Get the paths we want to prerender based on posts
  // In production environments, prerender all pages
  // (slower builds, but faster initial page load)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // { fallback: false } means other routes should 404
  return { paths, fallback: false }
}