内容简介:创建完文件夹之后,打开
Next.js
是一个基于 React
的一个服务端渲染简约框架。它使用 React
语法,可以很好的实现代码的模块化,有利于代码的开发和维护
1.1 Next.js带来了很多好的特性
- 默认服务端渲染模式,以文件系统为基础的客户端路由
-
代码自动分隔使页面加载更快
-(以页面为基础的)简洁的客户端路由 -
以
webpack
的热替换为基础的开发环境 -
使用
React
的JSX
和ES6
的module
,模块化和维护更方便 -
可以运行在
Express
和其他Node.js
的HTTP
服务器上 -
可以定制化专属的
babel
和webpack
配置
二、构建一个基本的Next项目
2.1 创建项目
// 在本地创建一个项目跟目录 $ mkdir hello-next // 切换到项目根目录 $ cd hello-next // 用npm初始化项目 $ npm init -y // 将react和next安装到本地依赖 $ npm install --save react react-dom next // 创建文件夹 pages $ mkdir pages
创建完文件夹之后,打开 hello-next
文件下的 package.json
文件,在 scripts
下添加一个 script
,如下
{ "scripts": { "dev": "next" } }
$ npm run dev
2.2 创建页面
Next.js
是从服务器生成页面,再返回给前端展示。 Next.js
默认从 pages
目录下取页面进行渲染返回给前端展示,并默认取 pages/index.js
作为系统的首页进行展示。注意, pages
是默认存放页面的目录,路由的根路径也是 pages
目录
-
在
pages/index.js
中创建一个React
函数式组件
const Index = () => ( <div> <p>Hello Next.js</p> </div> ) export default Index
Next.js
默认使用 Webpack
构建项目, webpack
的热部署功能一样能提升开发效率。创建完 pages/index.js
后,再访问 http://localhost:3000
即可看到设置好的页面
-
在
pages
目录下创建文件pages/about.js
export default () => ( <div> <p>This is the about page</p> </div> )
创建完之后,可以通过 http://localhost:3000/about
访问该页面。至此,所有的页面的路由都是通过后端服务器来控制的,要想实现客户端路由,需要借助 Next.js
的 Link API
。
Link API
从 next/link
中可以引用到 Link
组件。在 pages/index.js
文件中引用 Link
,修改如
// This is the Link API import Link from 'next/link' const Index = () => ( <div> <Link href="/about"> <a>About Page</a> </Link> <p>Hello Next.js</p> </div> ) export default Index
-
Link
组件是通过location.history
的浏览器API保存历史路由,所以,你可以通过浏览器左上角的前进和后退按钮来切换历史路由。而在开发过程中,你不需要再单独写客户端路由的配置 -
Link
组件是React
的高阶组件的实现,不能对它进行样式的设置,它只是起到路由的跳转功能,但是它的复用性强,只要包含一个能触发onClick
事件的组件即可
2.3 组件复用
Next.js
是以多页面为中心,只要将页面文件放在 pages
目录下,就可以在浏览器上以文件名为路由名来访问到
-
组件的设置跟React一样,通过
export
导出,通过import
导入。一般,只要不想让用户通过页面直接访问的组件,都不放在pages
目录下。对除了pages
目录,组件放在哪个目录下没有要求,开发者可以自定义设置
下面再 components
目录下,创建一个公用组件 Header
,用于各个文件的头部导航,通过导航可以在页面见切换
import Link from 'next/link' const linkStyle = { marginRight: 15 } const Header = () => ( <div> <Link href="/"> <a style={linkStyle}>Home</a> </Link> <Link href="/about"> <a style={linkStyle}>About</a> </Link> </div> ) export default Header
在 pages/index.js
中引入 Header
import Header from '../components/Header' export default () => ( <div> <Header /> <p>Hello Next.js</p> </div> )
进一步封装 Header
组件,创建一个自动包含 Header
和 Content
的组件 components/MyLayout.js
import Header from './Header' const layoutStyle = { margin: 20, padding: 20, border: '1px solid #DDD' } const Layout = (props) => ( <div style={layoutStyle}> <Header /> {props.children} </div> ) export default Layout
2.4 创建动态页面
使用 Next.js
创建动态页面,与使用 React
或 Vue
创建一个 SPA
页面大体相同,唯一的区别就是页面的渲染主体不同,前者是 Nodejs
服务器获取到后端数据渲染完页面后再返回给前端展示,后者是前端先获取页面主体架构,再通过 ajax
的方式请求后端的数据,在前端渲染展示
以一个简易的博客页面为例,创建博客列表页,修改 pages/index.js
import Layout from '../components/MyLayout.js' import Link from 'next/link' const PostLink = (props) => ( <li> <Link href={`/post?title=${props.title}`}> <a>{props.title}</a> </Link> </li> ) export default () => ( <Layout> <h1>My Blog</h1> <ul> <PostLink title="Hello Next.js"/> <PostLink title="Learn Next.js is awesome"/> <PostLink title="Deploy apps with Zeit"/> </ul> </Layout> )
有了列表页,需要再写一个博客的详情页,从上面的代码中也可看到,我们需要创建一个 pages/post.js
文件
import Layout from '../components/MyLayout.js' export default (props) => ( <Layout> <h1>{props.url.query.title}</h1> <p>This is the blog post content.</p> </Layout> )
2.5 用路由遮盖(Route Masking)的干净的URL
Next.js
上提供了一个独特的特性:路由遮盖(Route Masking)。它可以使得在浏览器上显示的是路由 A
,而 App
内部真正的路由是 B
。这个特性可以让我们来设置一些比较简洁的路由显示在页面,而系统背后是使用一个带参数的路由。比如上面的例子中,地址栏中显示的是 http://localhost:3000/post?title=Hello%20Next.js
,这个地址含有一个 title
参数,看着很不整洁。下面我们就用 Next.js
来改造路由,使用路由遮盖来创建一个更加简洁的路由地址。比如我们将该地址改造成 http://localhost:3000/p/hello-nextjs
首先我们要修改 pages/index.js
下的 PostLink
组件,会使用到 next/link
组件的 as
属性,并给组件添加一个属性 id
import Layout from '../components/MyLayout.js' import Link from 'next/link' const PostLink = (props) => ( <li> <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}> <a>{props.title}</a> </Link> </li> ) export default () => ( <Layout> <h1>My Blog</h1> <ul> <PostLink id="hello-nextjs" title="Hello Next.js"/> <PostLink id="learn-nextjs" title="Learn Next.js is awesome"/> <PostLink id="deploy-nextjs" title="Deploy apps with Zeit"/> </ul> </Layout> )
-
当在
Link
组件上使用as
属性时,浏览器上显示的是as
属性的值,走的是客户端路由,而服务器真正映射的是href
属性的值,走的是服务端路由 -
这样就会有一个问题,如果在前端路由间切换不会有问题,可以正常显示,但是在页面
http://localhost:3000/p/hello-nextjs
时刷新页面,会显示404
页面。这是因为路由遮盖默认只在客户端路由中有效,要想在服务端也支持路由遮盖,需要在服务端单独设置路由解析的方法
2.6 服务端支持路由遮盖
上面说到,服务器默认不支持路由遮盖,要让服务器支持它,需要单独对路由进行设置。下面以 Express
(你也可以使用Koa等其他Nodejs的Web服务器框架)创建后端服务器讲解如何设置服务器来支持路由遮盖
$ npm install --save express
在项目目录下创建 server.js
,添加内容如下
const express = require('express') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() app.prepare().then(() => { const server = express() server.get('/p/:id', (req, res) => { const actualPage = '/post' const queryParams = { title: req.params.id } app.render(req, res, actualPage, queryParams) }) server.get('*', (req, res) => { return handle(req, res) }) server.listen(3000, (err) => { if (err) throw err console.log('> Ready on http://localhost:3000') }) }).catch((ex) => { console.error(ex.stack) process.exit(1) })
并更新 package.json
文件中的 scripts
:
{ "scripts": { "dev": "node server.js" } }
这时候,服务器已经可以支持路由遮盖了,在显示遮盖路由的页面,刷新页面也可以正常显示内容。具体的实现是在服务器中对 /p/*
开头的路由进行重写,然后重定向到 /post
开头的路由上,最后将内容返回给前端。具体代码是这一段:
server.get('/p/:id', (req, res) => { const actualPage = '/post' const queryParams = { title: req.params.id } app.render(req, res, actualPage, queryParams) })
2.7 请求接口,获取数据
Next.js
在 React
的基础上为组件添加了一个新的特性: getInitialProps
(有点像是 getInitialState
),它用于获取并处理组件的属性,返回组件的默认属性。我们可以在改方法中请求数据,获取页面需要的数据并渲染返回给前端页面
引入一个支持在客户端和服务器端发送 fetch
请求的插件 isomorphic-unfetch
,当然你也可以使用 axios
等其他工具
$ npm install --save isomorphic-unfetch
然后修改 pages/index.js
里的内容,换成下面这样:
import Layout from '../components/MyLayout.js' import Link from 'next/link' import fetch from 'isomorphic-unfetch' const Index = (props) => ( <Layout> <h1>Batman TV Shows</h1> <ul> {props.shows.map(({show}) => ( <li key={show.id}> <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}> <a>{show.name}</a> </Link> </li> ))} </ul> </Layout> ) Index.getInitialProps = async function() { const res = await fetch('https://api.tvmaze.com/search/shows?q=batman') const data = await res.json() console.log(`Show data fetched. Count: ${data.length}`) return { shows: data } } export default Index
上述代码中,在 getInitialProps
中使用了 async
和 await
来处理异步请求,并将取到的数据当做一个属性赋给页面,页面拿到这个属性的值后会用于页面的初始化渲染
2.8 样式化组件
Next.js
提供了一个 css-in-js
的特性,它允许你在组件内部写一些样式,你只需要在组件内使用 <style jsx>
标签来写 css
即可。举个例子,比如我们在 pages/index.js
里添加样式
import Layout from '../components/MyLayout.js' import Link from 'next/link' function getPosts () { return [ { id: 'hello-nextjs', title: 'Hello Next.js' }, { id: 'learn-nextjs', title: 'Learn Next.js is awesome' }, { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT' } ] } export default () => ( <Layout> <h1>My Blog</h1> <ul> {getPosts().map((post) => ( <li key={post.id}> <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}> <a>{post.title}</a> </Link> </li> ))} </ul> <style jsx>{` h1, a { font-family: "Arial"; } ul { padding: 0; } li { list-style: none; margin: 5px 0; } a { text-decoration: none; color: blue; } a:hover { opacity: 0.6; } `}</style> </Layout> )
在上述代码中,我们没有直接使用 <style>
标签来书写样式代码,而是写在一个模板字符串 ({`
}) 里面。
Next.js 使用
babel 插件来解析
styled-jsx` ,它支持样式命名空间,未来还将支持变量赋值。
需要注意的是: styled-jsx
的样式不会应用到子组件,如果想要该样式适用于子组件,可以在 styled-jsx
标签添加属性 global:<style jsx global>。
2.9 怎么部署一个next.js项目
Next.js
项目的部署,需要一个 Node.js
的服务器,可以选择 Express
, Koa
或其他 Nodejs
的Web服务器。本文中以 Express
为例来部署 Next
项目。
服务器的入口文件就使用上文中提到的 server.js
,在 server.js
里添加了针对部署环境的选择,代码如下
const dev = process.env.NODE_ENV !== 'production'
为了区分部署环境,我们需要在 package.json
中修改 script
属性如下
"scripts": { "build": "next build", "start": "NODE_ENV=production node server.js -", "dev": "NODE_ENV=dev node server.js" }
其中, build
命令是用于打包项目, start
命令是用于生产环境部署,dev 命令是用于本地开发。
执行如下命令即可将 Next
项目 部署到服务器
$ npm run build $ npm run start
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 『互联网架构』软件架构-环境搭建maven(三)
- 高并发架构搭建
- 搭建数据驱动测试框架构
- 『互联网架构』软件架构-git服务搭建与使用(四)
- 如何快速搭建一个微服务架构?
- 如何搭建大数据平台技术架构?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
URL 编码/解码
URL 编码/解码
html转js在线工具
html转js在线工具