页面创建

#React介绍

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。它有声明式、高效、灵活的特点。
React 是用于创建页面的 UI 库。 每个页面组件都应导出一个 React 组件，这些组件在其他地方可以多次使用，然后你就可以发挥 React 的表达力构建丰富的交互内容了。

#Next.js

Next.js 是一个轻量级的 React 服务端渲染应用框架。 React 于官方文件内的“推荐的工具链”中提及 Next.js，建议将其作为“使用 Node.js 构建服务器渲染网站”的解决方案。传统的 React 应用程序只能在客户端浏览器中渲染内容，Next.js 扩展了此功能以包括在服务端渲染的应用程序。(部分来自维基百科)

#添加页面

为了方便被 Next.js 识别到页面，我们必须将页面的代码存放到 /pages 文件夹中，并命名为[页面名称]/index.jsx，当然，我们也支持 TypeScript 。

现在，我在 /pages 文件夹中创建一个新的页面，文件夹为 hello ，并命名里面的文件为 index.jsx：

import { NavBar } from '../../components/NavBar';
 
function HelloWorld() {
  return (
    <>
      <NavBar />
      <div className="w-screen h-screen flex flex-col items-center justify-center text-3xl font-bold">
        <div>Hello World</div>
        <div>你好！世界</div>
      </div>
    </>
  );
}
 
export default function Hello() {
  return <HelloWorld />;
}

在这个页面中，我简单地定义了一个组件 HelloWorld，并将其导出为 Hello 页面。在这里面引入了 NavBar 组件，因此页面才会产生导航栏。

#添加路由

我想要把这个页面添加到导航栏中，因此我需要在 daymd.config.js 文件中的 navItems 添加一个路由：

  // 导航栏的选项
  navItems: [
    {
      name: 'Docs',
      to: '/docs',
    },
    {
      name: 'Blog',
      to: '/posts',
    },
    {
      name: 'Nav',
      to: '/website',
    },
    // Hello 页面的路由
    {
      name: 'Hello',
      to: '/hello',
    },
  ],

然后导航栏就出现了 Hello 页面了。

点击进入：

怎么样？添加一个页面是不是很简单？