P02：Next.js教程-如何新建Page页面和Component组件

新建页面和访问路径

直接在根目录下的pages文件夹下，新建一个mybj.js页面。然后写入下面的代码：

function Mybj(){
    return (<button>码云笔记</button>)
}

export default  Mybj;

只要写完上面的代码，Next框架就自动作好了路由，这个也算是 Next 的一个重要优点，给我们节省了大量的时间。

在浏览器访问 http://localhost:3000/mybj，可以看到如下界面：

现在要作一个更深的页面，比如把有关博客的界面都放在这样的路径下http://localhost:3000/blog/aboutBlog,其实只要在pages文件夹下再建立一个新的文件夹blog，然后进入blog文件夹，新建一个aboutBlog.js文件，就可以实现了。

aboutBlog.js 文件内容,我们这里就用最简单的写法了

export default ()=><div>aboutBlog page</div>

写完后，就可以直接在浏览器中访问了，是不是发现 Next 框架真的减轻了我们大量的工作。

Component 组件的制作

制作组件也同样方便，比如要建立一个 mybj 组件，直接在components目录下建立一个文件mybj.js,然后写入下面代码:

export default ({children})=><button>{children}</button>

组件写完后需要先引入，比如我们在 Index 页面里进行引入：

import Mybj from '../components/mybj'

使用就非常简单了，直接写入标签就可以。

<Mybj>按钮</Mybj>

一个自定义组件的创建和使用也是这么简单， 如果你 React 的基础很好，那本文的内容对你来说就更加简单了。也就是说 Next 框架并没有给我们带来太多的学习成本，但是为我们减轻了很多配置工作。

以上关于P02：Next.js教程-如何新建Page页面和Component组件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。