13.Next.js14 网站打包优化之设置元数据

元数据设置

设置插入到 head 标签中的标题和描述等 Meta 标签的方法有两种：静态和动态。配置在layout.ts或page.ts文件中。

静态设置方式默认在app目录下的layout.tsx文件中设置。

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

浏览器选项卡中就会显示我们设置的标题。

当你跳到users页面的时候，也是显示的该标题：

配置静态元数据

如果你想更改用户页面显示的标题，可以进行以下设置。在users下面的page.tsx中配置：

//app/users/page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
    title: '用户中心',
    description: '用户中心页面',
}
export default function UsersPage() {
    return (
        <h2>Hello User</h2>
    )
}

设置的值将反映在浏览器选项卡中：

动态元数据设置

为了设置动态元数据，我们将使用动态路由来配置设置。这里我们来举个例子，当点击用户列表中的用户名时，跳转到用户的详细信息页面。

我们先来修改UserList.tsx组件

//app/components/UserList.tsx
import Link from "next/link";
//定义字段类型
type User = {
    id:string,
    name:string,
    email:string
}
const UserLst = async () => {
    //请求api
    const response = await fetch('http://localhost:3000/api/hello',
        {cache:'no-store'}
    )
    if (!response.ok) throw new Error('请求失败！')
    const users: User[] = await response.json()

  return (
      <ul>
          {users.map((user)=>(
              <li key={user.id}>
                  <Link href={`users/${user.id}`}>{user.name}</Link>
              </li>
          ))}
      </ul>
  )
}
 export default UserLst

现在当我们点击用户名时，将显示404页面，以为我们还没有配置动态路由。要配置动态路由，我们在users目录下面创建一个[id]目录，并在其下创建一个page.tsx文件。

//app/users/[id]/page.tsx
import {User} from "next-auth";

const Page = async ({params}:{params:{id:string}}) => {
    //获取用户详情
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
    const user:User = await res.json()
  return (
      <div className='m-4'>
          <h1 className='text-lg font-bold'>用户详情</h1>
          <p>ID:{user.id}</p>
          <p>Name:{user.name}</p>
          <p>Email:{user.email}</p>
      </div>
  )
}

export default Page;

设置完成后，点击用户名即可显示用户详细信息屏幕。

如果要将标题设置为用户名，由于页面内容是动态变化的，因此无法使用静态方式设置元数据。因此，我们将使用generateMetadata函数来动态设置元数据。

在设置标题时，我们还要使用fetch函数来获取数据，因此我们创建了getUser函数。在同一个页面组件中，用于显示在页面上的用户信息和用于元数据的用户信息都进行了fetch处理，但由于自动请求去重功能，对同一URL的请求将会被优化。

//app/users/[id]/page.tsx
import {User} from "next-auth";
import {Metadata} from "next";

async function getUser(id:string){
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    return res.json()
}

export async function generateMetadata({params}:{params:{id:string}}):Promise<Metadata> {
    const user = await getUser(params.id)
    return {
        title:user.name,
        description:'user description'
    }
}

const Page = async ({params}:{params:{id:string}}) => {
    //获取用户详情
    const user:User = await getUser(params.id)
  return (
      <div className='m-4'>
          <h1 className='text-lg font-bold'>用户详情</h1>
          <p>ID:{user.id}</p>
          <p>Name:{user.name}</p>
          <p>Email:{user.email}</p>
      </div>
  )
}

export default Page;

从浏览器中检查，我们的标题已经变成了当前用户名

在metadata设置中使用模板（template）

有时候，你可能希望将应用程序的名称（例如，XXXX | Next App）设置为整个页面的标题。在这种情况下，你可以在layout.tsx文件的metadata设置中使用模板（template）。如下面例子

//app/layout.tsx
export const metadata: Metadata = {
  title: {
      default:'Create Next App',
      template:`%s | Next App`,
  },
  description: 'Generated by create next app',
}