Next.js项目中使用Head、Fragment添加页面title时出现报错问题

问题原因 #

你遇到的报错核心是 next/head 的导入方式错误，Next.js 中Head是next/head的默认导出，不支持命名导入写法。

复现问题的代码问题点 #

你提供的代码中导入语句错误：

// 错误写法：命名导入
import { Head } from "next/head";

解决方案 #

方案1：Pages Router 场景修正导入写法

如果你的项目用的是Next.js Pages Router，直接修改导入语句即可：

// 正确写法：默认导入
import Head from "next/head";
import { Fragment } from "react";
import Layout from "../components/layout/Layout";

function HomePage() {
  return (
    <Fragment>
      <Head>
        <title>Casselman Travel</title>
      </Head>
      <h1>Home Page</h1>
    </Fragment>
  );
}

export default HomePage;

你也可以用React空标签简化Fragment写法，效果完全一致：

function HomePage() {
  return (
    <>
      <Head>
        <title>Casselman Travel</title>
      </Head>
      <h1>Home Page</h1>
    </>
  );
}

方案2：Next.js 13+ App Router 场景

如果你的项目用的是App Router，next/head组件已经被废弃，不需要手动导入Head组件，直接导出metadata设置页面标题即可：

// page.js文件中直接导出metadata
export const metadata = {
  title: 'Casselman Travel',
}

function HomePage() {
  return (
    <h1>Home Page</h1>
  );
}

export default HomePage;

报错截图参考 #

内容的提问来源于stack exchange，提问作者Jacob Gallant