在应用里，一些要重复使用的东西，可以把它定义成组件 .. 在项目的下面创建一个 components 目录，里面添加一个 Header.js ..

存放组件的目录没有要求，你可以自己决定要把组件放在哪里 ..

在这个 Header 组件里面 .. 先导入 Link .. 来自 next/link 这个包 ..

里面添加一个函数 .. 名字是 Header .. 函数返回的东西就是组件的视图 .. 一个 div .. 里面可以添加两个链接 .. 先用一组 Link .. href 是链接的地址 .. 斜线表示应用的根 .. 也就是首页 .. 包装一个 a 标签.. 文字是 首页 .. 再添加点自定义样式 .. 添加一个 style 属性 .. 值是 linkStyle .. 在上面去定义一下这个 linkStyle .. 在它里面，用 marginRight 设置一下右边的边距 ..

复制一份这个链接 .. 地址是 /about .. 文字设置成 关于 .. 最后再导出定义的这个 Header 组件 .. 组件其实跟页面没有什么区别 .. 只不过组件不需要一个地址直接打开它 ..

打开 index 页面 .. 在这个页面上用一下刚才定义的 Header 组件 .. 文件顶部要先导入这个组件 .. 名字是 Header .. 位置是上一级目录下面的 components 里的 Header ..

然后打开地方用一下这个 Header 组件 .. 添加一个 Header .. 再打开 about 页面 .. 找个地方 .. 用一下 Header 这个组件 .. 输入这个组件的名字 .. 按一下 Tab 键 .. 可以直接在文件顶部导入这个组件 ..

在浏览器上预览一下 ..

现在页面顶部显示的这两个链接就是来自 Header 组件 .. 点击链接，打开的就是 Link 组件链向的页面 ..