typescript - 如何使 Next.js getStaticProps 与 typescript 一起使用-6ren

typescript - 如何使 Next.js getStaticProps 与 typescript 一起使用

转载作者：行者123 更新时间：2023-12-04 11:22:12

我正在使用启用了 typescript 功能的 Next.js
尝试使用此处描述的 getStaticProps https://nextjs.org/docs/basic-features/typescript
使用 GetStaticProps 类型

export const getStaticProps: GetStaticProps = () => {
    return {
        props: {
            host: process.env.DB_HOST.toString(),
        },
    }
}

我收到这样的错误

Type '() => { props: { host: string; }; }' is not assignable to type 'GetStaticProps<{ [key: string]: any; }, ParsedUrlQuery>'.
  Type '{ props: { host: string; }; }' is missing the following properties from type 'Promise<GetStaticPropsResult<{ [key: string]: any; }>>': then, catch, [Symbol.toStringTag], finallyts(2322)

我是 typescript 的新手，所以我很难弄清楚它想要什么，
我将不胜感激任何帮助，提前致谢
这是整个页面的代码

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import React from 'react'
import { GetStaticProps, GetStaticPropsContext } from 'next'

interface Props {
    host: string
}

const Home: React.FC<Props> = (props) => {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                aa:{props.host}
                <h1 className={styles.title}>
                    Welcome to <a href="https://nextjs.org">Next.js!</a>
                </h1>
                <p className={styles.description}>
                    Get started by editing <code className={styles.code}>pages/index.js</code>
                </p>
                <div className={styles.grid}>
                    <a href="https://nextjs.org/docs" className={styles.card}>
                        <h3>Documentation &rarr;</h3>
                        <p>Find in-depth information about Next.js features and API.</p>
                    </a>

                    <a href="https://nextjs.org/learn" className={styles.card}>
                        <h3>Learn &rarr;</h3>
                        <p>Learn about Next.js in an interactive course with quizzes!</p>
                    </a>

                    <a
                        href="https://github.com/vercel/next.js/tree/master/examples"
                        className={styles.card}
                    >
                        <h3>Examples &rarr;</h3>
                        <p>Discover and deploy boilerplate example Next.js projects.</p>
                    </a>

                    <a
                        href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                        className={styles.card}
                    >
                        <h3>Deploy &rarr;</h3>
                        <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
                    </a>
                </div>
            </main>

            <footer className={styles.footer}>
                <a
                    href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
                </a>
            </footer>
        </div>
    )
}

export const getStaticProps: GetStaticProps = () => {
    return {
        props: {
            host: process.env.DB_HOST.toString(),
        },
    }
}

export default Home

最佳答案

答案如下:

export async function getStaticProps(context): Promise<GetStaticPropsResult<HomeProps>> {
    return {
        props: {
            host: process.env.DB_HOST,
        },
    };
}

我的同事通过检查 GetStaticProps 类型定义找到了解决方案:

这是整个页面的代码

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React from "react";
import { GetStaticPropsResult, GetStaticProps } from "next";

interface HomeProps {
    host: string;
}

const Home: React.FC<HomeProps> = (props: HomeProps) => {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                aa:{props.host}
                <h1 className={styles.title}>
                    Welcome to <a href="https://nextjs.org">Next.js!</a>
                </h1>
                <p className={styles.description}>
                    Get started by editing <code className={styles.code}>pages/index.js</code>
                </p>
                <div className={styles.grid}>
                    <a href="https://nextjs.org/docs" className={styles.card}>
                        <h3>Documentation &rarr;</h3>
                        <p>Find in-depth information about Next.js features and API.</p>
                    </a>

                    <a href="https://nextjs.org/learn" className={styles.card}>
                        <h3>Learn &rarr;</h3>
                        <p>Learn about Next.js in an interactive course with quizzes!</p>
                    </a>

                    <a href="https://github.com/vercel/next.js/tree/master/examples" className={styles.card}>
                        <h3>Examples &rarr;</h3>
                        <p>Discover and deploy boilerplate example Next.js projects.</p>
                    </a>

                    <a
                        href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                        className={styles.card}
                    >
                        <h3>Deploy &rarr;</h3>
                        <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
                    </a>
                </div>
            </main>

            <footer className={styles.footer}>
                <a
                    href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
                </a>
            </footer>
        </div>
    );
};

export async function getStaticProps(context): Promise<GetStaticPropsResult<HomeProps>> {
    return {
        props: {
            host: process.env.DB_HOST,
        },
    };
}

export default Home;

关于typescript - 如何使 Next.js getStaticProps 与 typescript 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65078245/

文章推荐： Gstreamer:为什么在显示一些滤镜之前需要视频转换？

文章推荐：备份多个文件夹(包括/不包括)

reactjs - Next.js getStaticProps 与 SWR "Error serializing ` .initialData.config.transformRequest[0 ]` returned from ` getStaticProps`"
我正在尝试在 Next.js 环境中使用 SWR。 const Best = (props: InferGetStaticPropsType) => { const { data } = useS
javascript - 在组件中使用 getStaticProps
我用下一个 js 和 typescript 开始了一个项目。我有一个主组件，我在 index.js 页面中调用它我在主组件中使用 getStaticProps 函数 getStaticProps 返
javascript - 加载包含 getStaticProps 的组件
我在一个项目中使用 NextJs，我创建了一个组件来加载动态数据，如果我通过 localhost:3000/faq 加载，它可以正常工作，但如果我尝试导入将相同的组件放入 index.js 时，会发生
reactjs - 如何使用 getStaticProps 重定向？
我有一个具有简单用户身份验证的 nextjs 应用程序。这意味着我不希望注销的用户访问一些 protected 路由。该应用程序在开发版本中成功编译并按预期工作。但是当我使用 next build ，
javascript - 为什么我无法在 `` `getStaticProps ``` 中获取查询参数？
我会简单点: 链接:http://localhost:3000/product/bioCloths?activeCategory=medium&id=0文件路径:pages/product/[prod
reactjs - `getStaticProps` 填充页眉/页脚
我正在 Next 中构建一个项目。目前，我有一个自定义 App 组件，它安装了页眉和页脚组件。现在我想从 API 填充页眉/页脚的内容(在构建时，因为它不会经常更改)。但是，getStaticPro
reactjs - 每次返回同一页面时 getStaticProps 是否都获取数据？
我正在使用路由获取页面 ex。 page/[id].js 并仅显示该 id 的数据。那么每次访问这个页面都会重新获取数据吗？前任。通过此页面上的链接转到下一页，然后按返回返回此页面。就像在使用 Did
reactjs - 每次返回同一页面时 getStaticProps 是否都获取数据？
我正在使用路由获取页面 ex。 page/[id].js 并仅显示该 id 的数据。那么每次访问这个页面都会重新获取数据吗？前任。通过此页面上的链接转到下一页，然后按返回返回此页面。就像在使用 Did
next.js源码解析-getStaticProps、getStaticPaths篇
😂 好久前写了关于 getStaticProps 和 getStaticPaths 的内容，然而半年过去了源码解析就一直忘记了，不久前有人提醒才想起来，补下坑。本文主要是
typescript - getStaticProps 返回空 Prop 对象
我正在尝试使用 getStaticProps (Next.js) 呈现登陆页面，但它没有按预期运行。这是我的组件: import { GetStaticProps } from 'next' cons
javascript - NextJS - 在 getStaticProps 中获取动态变量
所以我有 getStaticProps 并且需要根据变量获取一些数据这里是一个例子 export async function getStaticProps() { const res = awa
javascript - 如何访问 getStaticProps 中的 referer？
我需要访问 getStaticProps 中的 referer；有什么方法可以访问它？我知道如何使用 getServerSideProps 访问，但不确定 getStaticProps。使用getS
node.js - 对 GetStaticProps 的许多请求卡住了我的应用程序构建并返回服务器错误
我想列出一堆产品，我想在 Node 上请求数据并以静态方式构建页面，这样主页会更快。问题是当我在 GetStaticProps 上发出超过 80 个请求时。以下包含 80 个项目的代码确实有效 c
javascript - 如何干净地处理 nextjs getStaticProps 中的错误
我现在非常忙于构建我的第一个 Next.JS 应用程序(Next 和 Strapi)。现在一切正常，但我很好奇在使用 getStaticProps 时实现错误处理的最佳方法是什么？ . 我自己尝试了一
javascript - Next.js:getStaticProps 不更新生产中的获取值
我基本上是在 Next.js 上开发一个博客。因为它是负责后端的另一个团队，所以我目前正在从 getStaticProps 获取 API 调用以获取我的文章，即使直接进行数据库查询是更好的做法: ex
javascript - 在从 getStaticProps 返回的组件中获取未定义的 Prop
我从 getStaticProps 返回了 json 响应，控制台将其记录在 getStaticProps 中以验证正确的 json 响应。所以， fetch 工作正常，我从 API 得到正确的响应。
next.js - 可以在博客中使用 getStaticProps 在发布新帖子时进行更新吗？
所以我对 getStaticProps 有点困惑.getStaticProps在构建时运行以生成静态页面。我的问题是，如果我有一个在发布新帖子时更新的博客，我不应该使用 getStaticProps
next.js - 在 getStaticProps 中使用路由器
我正在尝试从一个因 URL 而异的 API 中获取数据，尝试使用 withRouter 来完成它，但它似乎在 getStaticProps 中不起作用。我目前有以下代码: export async
reactjs - Next JS - getStaticProps 不返回任何内容
我正在将 Next.js 与上下文 API 和样式组件一起使用，但似乎无法获得 getStaticProps在职的。我读过其他帖子，他们经常谈论自定义 _app我确实有，但在使用上下文 API 之前
javascript - NextJS : getStaticProps revalidate not working
我有这个 NextJS 站点，其中有从 Firestore 加载数据的 getStaticProps。我有这个: return { props: { allPosts: post

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

typescript - 如何使 Next.js getStaticProps 与 typescript 一起使用