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组件
码云笔记 » P02:Next.js教程-如何新建Page页面和Component组件