如何从`getStaticProps`

如何解决如何从`getStaticProps`

我想在网站上显示来自 YouTube 频道的最新视频。该频道每天最多上传一次，因此我在 vercel.json like so 中将 API 路由的响应缓存了 1 天（86400 秒）：

{
    "headers": [
        {
            "source": "/(.*)","headers": [
                {
                    "key": "access-control-allow-origin","value": "*"
                },{
                    "key": "Cache-Control","value": "s-maxage=86400"
                }
            ]
        }
    ]
}

我想使用 getStaticProps with incremental static regeneration 以便我的 API 路由每天最多只接收一次发送请求，但我不确定如何将请求写入我的 API 路由。

Next.js docs say：

注意：您不应该使用 fetch() 来调用 getStaticProps 中的 API 路由。相反，直接导入 API 路由中使用的逻辑。您可能需要为这种方法稍微重构您的代码。

从外部 API 获取没问题！

这是什么意思？我目前编写请求的方法是错误的吗？

// /pages/index.js

import Header from '../components/header/header'
import MainContent from '../components/main-content/main-content'
import Footer from '../components/footer/footer'

export default function Index({ videoTitle,videoURL,videoThumbnailData }) {
    return (
        <>
            <Header />

            <MainContent
                videoTitle={videoTitle}
                videoURL={videoURL}
                videoThumbnailData={videoThumbnailData}
            />

            <Footer />
        </>
    )
}

// Called at build time,and response revalidated after 1 day (86400 seconds)
// since internal API response is cached on Vercel Edge network for 1 day (see /pages/api/get-latest-video.js)
export async function getStaticProps() {
    // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
    const res = await fetch(`${process.env.API_ROUTES_URL}/api/get-latest-video`)
    const data = await res.json()

    // Returned as props to page
    return {
        props: {
            videoTitle: data.videoTitle,videoURL: data.videoURL,videoThumbnailData: data.videoThumbnailData
        },revalidate: 86400
    }
}

// /components/main-content/main-content.js

import Section from './section'
import Image from 'next/image'

export default function MainContent({ videoTitle,videoThumbnailData }) {
    return (
        <main>
            <Section>
                <a href={videoURL}>
                    {videoTitle}
                </a>
                <Image
                    src={videoThumbnailData.url}
                    width={videoThumbnailData.width}
                    height={videoThumbnailData.height}
                />
            </Section>
        </main>
    )
}

解决方法

这意味着您只需将 api 函数导入 getStaticProps 而不是使用 Fetch

// /pages/index.js

import Header from "../components/header/header";
import MainContent from "../components/main-content/main-content";
import Footer from "../components/footer/footer";

export default function Index({ videoTitle,videoURL,videoThumbnailData }) {
  return (
    <>
      <Header />

      <MainContent
        videoTitle={videoTitle}
        videoURL={videoURL}
        videoThumbnailData={videoThumbnailData}
      />

      <Footer />
    </>
  );
}

// Called at build time,and response revalidated after 1 day (86400 seconds)
// since internal API response is cached on Vercel Edge network for 1 day (see /pages/api/get-latest-video.js)
export async function getStaticProps() {
  // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
  const res = await getApiData(); // import your api function here
  const data = await res.json();

  // Returned as props to page
  return {
    props: {
      videoTitle: data.videoTitle,videoURL: data.videoURL,videoThumbnailData: data.videoThumbnailData,},revalidate: 86400,};
}

,

您的请求 /api/get-latest-video 应该从浏览器发送到服务器，然后服务器可能具有某种路由处理程序，例如：

routeMatches('/api/get-latest-video',( req,res )=>{
    requestDB('latestVideos').then( latestVideos => {
        respondWithLatestVideos( req,res,latestVideos );
    })
});

现在，getStaticProps 在服务器端运行。因此，您可以直接在 getStaticProps 内请求您的数据库，而不是向请求数据库的服务器发送请求。

export async function getStaticProps() {
    // Fetch YouTube videos from internal API route /pages/api/get-latest-video.js
    // const res = await fetch(`${process.env.API_ROUTES_URL}/api/get-latest-video`)
    // const data = await res.json()
    const data = await requestDB('latestVideos')
    ...
}

在同一个 NextJs 文档页面的下方有一个信息量稍大的注释“write server side code directly”：

请注意，getStaticProps 仅在服务器端运行。它永远不会在客户端运行。它甚至不会包含在浏览器的 JS 包中。这意味着您可以编写直接数据库查询之类的代码，而无需将它们发送到浏览器。您不应从 getStaticProps 获取 API 路由 — 相反，您可以直接在 getStaticProps 中编写服务器端代码。