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框架并没有给我们带来太多的学习成本,但是为我们减轻了很多配置工作。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P02:Next.js教程-如何新建Page页面和Component组件

发表评论

提供最优质的资源集合

立即查看 了解详情