React服务端渲染框架Next.js入门之旅二：Next.js的Page和Component使用

新建Page

在pages文件夹（专门存放页面的文件夹）下新建juan.js：

function Juan(){
    return (
        <button>Juan按钮</button>
    )
}
export default Juan

启动项目：

yarn dev

Next.js会自动配置路由。访问网址http://localhost:3000/juan：

深层次的路由用文件夹来实现。

假设要访问http://localhost:3000/bolg/nextBlog，那么页面应该写到哪里呢？

在pages文件夹下创建blog文件夹，在blog文件夹下创建nextBlog.js文件：

export default ()=><div>NextBlog Page</div>

效果：

 新建Component组件

项目的components文件夹存放的是自定义组件。

在components/public文件夹下新建juan.js文件：

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

在首页显示它，在index.js中调用该组件：

显示效果：