next简单实践

序

环境

       操作系统：windows 10

       开发工具：WebStorm 2018.1

       Node：8.11.1

       java：1.8.0_171

       网络环境：vps

简介

       next可以帮助我们基于React搭建服务器端渲染的应用，或直接导出成静态站点。next官网地址：https://nextjs.org/。刚刚把照着官方的文档走了一遍，把一些重要的东西记下来，希望对同学们有所帮助。

开始

新建

1．  新建根项目目录 d:\next\admin。

2．  在WebStorm中打开根项目目录。

3．  执行npm init -y 命令。生成package.json文件。

4．  安装react和react-dom和next，即执行命令 npm install –save react react-dom next

5．  在根目录下新建pages目录。

6．  在package.json文件中添加一行命令： “dev”: “next”

7.     启动项目，即执行 npm rundev。

8．  浏览器中打开 http://localhost:3000。即可看到一个404页面。说明新建成功。

首页

1.    新建pages/index.js文件。代码如下：

const Index = () => (     <div>         <p>Hello Next.js</p>     </div> ) export default Index

       2．  打开http://localhost:3000。你将看到一个页面，包含Hello Next.js的信息。

其它页面

1．  新建pages/about.js文件。

2．  打开http://localhost:3000/about。你将看到它。

页面跳转

简单示例

       在页面中，你可以直接使用一个<a>标签进行页面跳转。但是，这样的跳转是需要改善请求到服务端的。如果你想实现一个客户端页面跳转，可以使用Link组件。

import Link from 'next/link' ……         <Link href="/about">             <button>Go to About Page</button>         </Link> ……

Query param

       直接在href属性中拼接?key1=value1&key2=value2的形式，即可通过url形式将值传递到目标页面。

       利用router的withOut方法，可以方便的使用query param。如下：

import {withRouter} from 'next/router' import Layout from '../coms/text-align.js' const Content = withRouter((props) => (     <div>         <h1>{props.router.query.title}</h1>         <p>This is the blog post content.</p>     </div> )) const Page = withRouter((props) => (     <Layout>         <Content />     </Layout> )) export default Page

       示例代码里，是一个子组件套用的形式。在当前组件和子组件上，都要加withOut。

Url优化

       <Linkurl=”/article/detail?id=1”>……</Link>

       如上，你将得到一个url形如  /article/detail?id=1

       这样的url是不美观的，我们希望得到 /article/detail/1

       这时候，你需要用到Link的as属性。

       <Linkas=”/article/detail/1” url=”/article/detail?id=1”>……</Link>

       有没有发现，确实达到了目的。url地址看起来是美观的。但是，刷新……却得到了404。

       原因：美化的url只工作在客户端。刷新后，将去服务器端寻找相应页面，显然服务器端是没有的，所以，得到了404。

使用express

       安装 npm install –save express

       添加/config/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('/post/:id', (req, res) => {             const actualPage = '/post'             const queryParams = { id: 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)     })

       修改dev命令为 node ./config/server.js

       刷新，发现得到了正确的页面。

       注意server.js中的server.get方法。你可以用它来定义更多的服务器端路由。

特性

Link组件中，你可以使用任何你想要用的其它组件，只要它支付onClick事件。

       Link组件完全支持浏览器的前进或后退。

       Link还有很多丰富的使用，您可以通过这里去更深入的学习。https://github.com/zeit/next.js#routing

组件复用

简单示例

       可以自定义组件，重复使用。尝试新建一个Header组件，主要包含页面Link，并在其它页面使用。

1．  新建components/header.js，代码如下：

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

2．  在index.js和about.js加入以下代码：

import Header from '../components/header' ……         <Header/> ……

3．  打开首页和关于我们页，均可以看到Header组件的效果。

特性

对于组件来说components并不是一个必须的路径，你可以命名为任意你想要的。next中的特殊路径只有pages一个。

       你甚至可以将组件直接新建到pages中，这样，你还可以直接访问它。

布局

       利用组件的特性，可以将页面的通用部分抽离出来，形成一个布局组件。这也是我们对组件的常用方式之一。

       接下来，我们尝试将简单示例的导航抽离出来，并把主体内容水平居中，字体颜色为绿色，作为一个layout使用。

1.    新建textCenter.js文件，代码如下：

import Link from 'next/link' const boxStyle = {     textAlign: 'center',     color: 'green' } const TextCenter = (props) => (     <div>         <Link href="/">             <a>Home</a>         </Link>         &nbsp;&nbsp;         <Link href="/about">             <a>About</a>         </Link>         <div style={boxStyle}>             {props.children}         </div>     </div> ) export default TextCenter

2.    使用方式，如about.js:

import TextCenter from '../coms/text-align' const About = () => (     <div>         <TextCenter>             <p>关于我们</p>         </TextCenter>     </div> ) export default About

       textCenter.js中的关键点在于{props.children}。如果没有这个，页面自己的内容将无法展示。

       使用布局时，你也可以不用<TextCenter>标签，而使用其它的方式，比如

       exportdefault TextCenter(About)   或者

       exportdefault () => (<Layout page={Page}/>) 或者

       constcontent = (<p>This is the about page</p>)

export default() => (<Layout content={content}/>)

组件传值

       父组件在调用子组件时，可以直接给其增加属性，如：

       <Childa=”b” />

       子组件可以通过{props.a}的形式使用其值

异步数据

       可以通过异步的方式获取数据，并应用到组件中。可以使用isomorphic-unfetch组件。

       安装：npm install --save isomorphic-unfetch

       在getInitialProps方法中使用，如下：

Post.getInitialProps = async function (context) {     const { id } = context.query     const res = await fetch(`https://api.tvmaze.com/shows/${id}`)     const show = await res.json()     console.log(`Fetched show: ${show.name}`)     return { show } }

       上例中，为了使用Query param，在getInitialProps方法中传入了参数context，通过它，可以方便的获取到query param。

       getInitialProps方法是react预定义的一个方法，return 的内容会附加到props中。

       isomorphic-unfetch支持服务器端和客户端两种方式。

样式

       推荐使用style-jsx 方式。

       形如<style jsx>{`  `}</style>

       父组件的style不能影响子组件，如果需要，考虑使用Markdown辅助。

打包与发布

打包

       添加打包指令：“build”: “next build”

       添加启动指令：“start”: “next start”

       如果使用了express，打包指令相同，启动指令如下：

       "start":"NODE_ENV=production node server.js"

       注意server.js的路径。

       经测试，start命令在windows下是无法正常执行的，会报错，需要修改为：

       "start":"set NODE_ENV=production && node ./config/server.js"

       Mac或Linux下可正常执行。

静态化

       使用export命令可以生成静态化的文件       “export“：”next export”

       需要配置next.config.js

懒加载

模块懒加载

       如  const fetch = awaitimport( 'isomorphic-unfetch')

组件懒加载

       如  import dynamic from'next/dynamic'

       const TextCenter = dynamic(import('../coms/text-align'))

构建工具

       通过create-next-app可以快速构建next应用。并且可以选择各种已有模板进行构造。如需要构建next + ant design的应用，可以如下：

       安装create-next-app:    npm install-g create-next-app

       创建：create-next-app --example with-ant-design my-app

       更多模板参考：https://open.segment.com/create-next-app