Nextjs Typescript - 绑定服务器道具 - 静态道具答案

【问题标题】：Nextjs Typescript - Bind server props - static propsNextjs Typescript - 绑定服务器道具 - 静态道具
【发布时间】：2022-07-05 15:46:32
【问题描述】：

我正在尝试使用 Nextjs 和 typescript 渲染道具，下面是我的代码，无法获取我的代码中缺少的内容

import { GetStaticProps, NextPage, InferGetStaticPropsType, GetServerSideProps, GetStaticPropsResult } from 'next';

interface Props {
    data:string;
}

export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
    return {
        props: {
            data:'welcome to static props'
        },
    };
}

const Navbar: React.FC<Props> = (props:Props)=>{
    return(<>
    sd
    {
     console.log(props.data)
    }
    </>)
}

export default Navbar;

控制台日志正在获取undefine

【问题讨论】：

标签： reactjs typescript next.js react-typescript

【解决方案1】：

据我记忆，next的getStaticProps函数需要返回一个JSON或者Object Array。

import { GetStaticProps, NextPage, InferGetStaticPropsType, GetServerSideProps, GetStaticPropsResult } from 'next';

interface Props {
    data:[{
       string:string
   }]
}

export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
    return {
        props: {
            data:[{
                string:'hellow world'
             }]
        },
    };
}

const Navbar: React.FC<Props> = (props:Props)=>{
    return(<>
    sd
    {
     console.log(props.data.string)
    }
    </>)
}

export default Navbar;

【讨论】：