在为Image组件使用ENV变量时,Next.js中出现水合问题

piok6c0g  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(128)

在Next.js中使用Strapi时遇到了水合问题。我正在通过GraphQL获取所有数据。Strapi给了我不带http:/localhost:/1337的图像的路径。由于这与生产现场不同,我决定创建一个ENV变量。为了将其解析为完整的图像路径,我创建了一个函数:

interface ImageProp {
    data: {
        attributes: {
            url: string,
        }
    }
}

export function strapiImage(src: ImageProp) {
    return process.env.STRAPIHOST + src.data.attributes.url;
}

在浏览器控制台中,最近打开Next.js项目时,我开始收到一个错误。以前没有,我不明白现在从哪来的:

client.js:1 Warning: Prop `src` did not match. 
Server: "http://localhost:1337/uploads/illustration_cleaning_4c030558a9.svg"
Client: "undefined/uploads/illustration_cleaning_4c030558a9.svg"

如果我在函数代码中将变量更改为字符串'localhost:1337',错误就会消失。你能告诉我这可能是关于什么以及如何解决它吗?

smdncfj3

smdncfj31#

为了向浏览器公开一个变量,你必须给变量加上前缀NEXT_PUBLIC_
尝试将env更改为NEXT_PUBLIC_STRAPIHOST

相关问题