在使用next.js的页面上添加自定义标题时出错13

uqcuzwp8  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(158)

我有问题,而试图添加自定义标题到我的网页上我的应用程序。我使用的next.js版本13。这是我的代码:

"use client";

export const metadata = {
  title: `Login - ${process.env.NEXT_PUBLIC_APP_NAME}`,
};

import { useState } from "react";

const loginPage = () => {
  const [formValues, setFormValues] = useState({
    email: "",
    password: "",
  });
  const handleFormChange = (event) => {
    const { name, value } = event.target;
    setFormValues((prevState) => {
      const newValue = value === null || value === undefined ? "" : value;
      return { ...prevState, [name]: newValue };
    });
  };
  return <h1>This is the login page</h1>;
};

export default loginPage;

这就是错误:

error - SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)

问题是,如果我删除了导出常量元数据,它就能完美地工作,同样,如果我在服务器端组件中添加导出常量元数据,它也能完美地工作,它只发生在客户端组件上。
我正在使用Windows 11
有人经历过这样的事情吗?谢谢

ykejflvf

ykejflvf1#

**编辑:**对于使用/app目录的NextJS 13项目,请参见添加动态<Head>元数据的文档。即对于OP

对于使用版本〈= 12的NextJS项目(或使用/pages目录的版本13)
next/head component用于客户端组件,用于添加<head>元素,如title
它应该是这样的:

return (
  <>
    <Head>
      <title>Insert your title here</title>
    </Head>
    <h1>This is the login page</h1>
  </>
)

希望这能帮上忙。

相关问题