在项目里新建了 app 目录以后,Next 框架会自动在 app 的根目录的下面生成一个 head 文件,这个文件可以配置页面的
标签里的东西。这个文件里定义的就是一个 React 组件,在这个文件里用了一组 fragment,它里面使用了 title,meta 还有一个 link 元素,这些东西都会放在页面的
元素里面。我们在这个 title 元素里可以设置一下页面的标题,比如“宁皓网”。
观察一下应用的首页,你会发现在浏览器标签上显示的页面的标题现在就会是“宁皓网”。
查看一下页面的源代码,我们可以在
元素里面,找到一组访问一下 /about 这个页面,这个页面的标题同样会是“宁皓网”。
如果想要定制一下当前这个页面的页面标题,我们可以在 app/about 目录的下面,再新建一个 head.tsx 文件,在里面定义一个组件,组件的名字是 Head。设置一下组件的视图,一组 Fragment,里面添加一组 title 标签,内容是 “关于 - 宁皓网”。
再观察一下关于这个页面的页面标题,现在就会变成 关于 - 宁皓网。也就是在 app/about 目录里的 head 这个文件里定义的组件里面,用 title 标签设置的页面标题内容。